Oriel Theme - part 01 - Preparation

How to create new e107 theme from HTML template in e107 2.3. Video serie about porting Oriel Theme

Warning. This is advanced stuff.

Oriel theme is not a bootstrap theme, it is maybe 4 years old (possible jquery issues), so I don't know if it is possible to use it for e107 now. But I have not used the licence and I was able to get permission by the author to use it any way I want.   

This is more about porting that about theme itself. 



Starter POINTS:

  •  downloaded HTML version
  •  installed e107 2.3 version (from 17.03.2020)
  •  installed JM Core 1.9 plugin and set for K-Admin skin
  •  K-Admin skin set as admin skin
  •  created empty theme folder oriel
  •  prepared starter theme pack

If anything above is not clear to you, ask in comments, it is basic stuff not covered by this topic


  •  copy theme.xml and customize it
    •  Theme name
    •  Theme description
    •  Libraries (if needed)
    •  Preview image
  •  add the theme preview image
  •  copy theme.php and change class name
  •  copy other folders
  •  check style.css


The standard way in the Theme manager.

Just check the homepage if there is an error.  Now porting can start.

NOTE: after time I found that it is easier to start with just home and default layouts. They are already prepared in the starter part, so no mention of layouts in the preparation phase.

Useful links:

Starter theme on GitHub: https://github.com/Jimmi08/e107-starter-theme

About theme.xml: https://www.e107sk.com/knowledge_base/file-theme-xml/?content.34

Original HTML template: https://themeforest.net/item/oriel-responsive-interior-design-html5-template/10598776

Source files for this part:  https://www.e107sk.com/download/category/16/porting-oriel-theme/


There are wrong layout names in this part. I will fix it at the next one. 


Other links

Follow us