how to setup my own css ?

[joonhwan]

Nice idea utilizing org as static generator with git.

I finally figured out how to update my own github.io pages, but from my point of view, the mod css looks too much for me. I just want to simplest css site. How to configure?

My own org-page configuration follows

(setq 
 op/site-main-title "Joonhwan' IO"
 op/site-sub-title "Random thoughts on many things"
 op/repository-directory "/Volumes/MyHdd/prj/oss/mine/joonhwan.github.io"
 op/site-domain "http://joonhwan.github.io/"
;;; for commenting, you can choose either disqus or duoshuo
 op/personal-disqus-shortname "joonhwan"
 op/personal-github-link "https://github.com/joonhwan"
 ;; ;;; the configuration below are optional
 ;; op/personal-google-analytics-id "your_google_analytics_id"
 ;; op/template-directory ---> ????
 ) 

it seems that op/template-directory var is key to do that but I've not catch up yet.
Any help would be appreciated.

Thanks.

[sillykelvin]

Hi,

For your requirement, It's better to define a new theme. But sorry, currently org-page can only support themes defined in the folder "themes" under its load directory. But, I have updated code to support customized theme directory. You may wait some time for melpa to update org-page to newest version and then you can upgrate org-page to do that, or you can clone the master branch to enable this feature immediately.

Assume you have a theme called "simple", stored at "/themes", you should set the two variables:

(setq op/theme-root-directory "/themes")
(setq op/theme 'simple)

And your own theme directory should have the following structure:

- /themes         <= theme root directory
  |- simple       <= theme name
     |- resources
        |- css    <= folder to store styles, however, the name is not required to be css, it depends on the path you defined in header.mustache, same as below two
        |- img
        |- js
     |- templates <= templates folder, the following templates are all required, and names should not be changed
        |- about.mustache
        |- category-index.mustache
        |- container.mustache
        |- footer.mustache
        |- header.mustache
        |- index.mustache
        |- nav.mustache
        |- post.mustache
        |- tag.mustache
        |- tag-index.mustache
   |- another_theme

Oh, so many files, uh? However, as you described, you just want to do some customization to css, so, you could just copy the templates folder of theme mdo to your own theme, and customize the resources folder (as you want to customize css, I suppose you may also want to customize javascript files and images, and I believe you may also want to customize those templates in the future :-p).

Hope that helps,
Kelvin

[joonhwan]

Thanks for the updates.
I'll try with the new version after coming back to my business travel.

[shackra]

I tested this and works find. I would just change the themes name if you copied the =themes= directory under org-page directory, because org-page seems to not updated the generated html files if the name of the themes is the same.

[kat-co]

Also tested with the latest version, and this looks fine. I suggest closing this issue.

[sillykelvin]

After you changed something in the templates, you need to clear the template cache to make the changes take effect:

(setq op/item-cache nil)

Sorry that I didn't mention this above.

[shackra]

in mdo template, there is a file called template.html, what's it for?

[sillykelvin]

@shackra Oh, it's an obsolete template, which is used by early version org-page.