In this post I will cover how to change and customize your theme for Org-page.

Org-page Default Themes

The Org-page themes available can be found at the repository at Github.

If a theme was not specified the default theme will be mdo:


How to configure

The Org-page theme configuration is done by setting these variables:

op/theme-root-directory - if you do not want to use the Org-page default themes.

(setq op/theme-root-directory "~/src/")

op/theme - set the theme name which you want to use:

(setq op/theme 'org-page-one-column)

In this above examples I am using my own theme, then both variables changes are necessary.

If I want to use phaer from default themes only set:

(setq op/theme 'phaer)

How I did create my own

Like mentioned in my previous post I have converted my One Column Hugo Theme(1cht) for Hugo.

It was simple, because I use Sass language: compiling/minify CSS files. The result of conversion can be found org-page-one-column at Github.

 ~/src/org-page-one-column (master=)
$  tree -d

 ├── resources
 │   ├── assets
 │   │   └── scss
 │   │       └── partials
 │   ├── css
 │   └── js
 └── templates

 7 directories

The root directory of a theme has:

  • resources - contains the static files for the theme, in this theme I am using assets to store sass files.
  • templates - contains the source code of each part of the theme: partials(header, body, footer etc) or a page like about, home etc.

Highlight.js vs. Prettify in my case Hihgligth wins. Then the main.js:

$(document).ready(function() {
    $('pre').each(function(i, block) {
    var self = $(this);
    self.html('<code>' + self.html() + '</code>');

Where this code:

  • Remove class attribute from <pre> HTML Tag
  • Put <code> between <pre> and his content.
  • hljs.highlightBlock(block) - from highlightjs usage - Custom Initialization section.

And now highlightjs works for pre.src and pre.example.

The full code for this theme can be found org-page-one-column at Github.

by Lenilson Jose Dias
Written on 2016-05-20