Oriel Theme - part 02 - Assets

How to create new e107 theme from HTML template in e107 2.3. Video serie about porting Oriel Theme Warning. This is advanced stuff.

Continuing with HTML assets, fix for layout names. 


  1. Assets folders
  2. Used assets in head
  3. Used assets in footer (before body tag)
  4. Inline JavaScript

The main problem is to detect what assets to load on each page, what ones depend on the layout (single page), and what ones are related to page elements.

Solution: let optimization for later, only take notes


  •  CSS folder
  •  Font folder
  •  JS folder
  •  Images folders

Just copy everything, use the same folder structure.

HEAD part: e107::CSS() + IE9 fix

  •  convert HTML code to e107 way
  •  replace outdated (not working) IE9 fix
  •  find CSS used only for some pages (there can be another CSS on other pages). Just be aware of them
  •  Some of them are related to page content (elements), some to page itself (gallery).  Some are a combination (slider on the homepage – it is displayed only on home layout, but if it is content-related).  It will be solved later.

Don’t forget to check the console after this.

Layout fix

There was a bug in starter theme, wrong layout names.

The next part is an example of how to fix after the theme installation.

You need to set Visibility again manually then!

This mistake caused the header and footer from the starter pack weren’t loaded.


  •  convert HTML code to e107 way
  •  find JS used only for some pages
  •  loading homepage slider only for home layout
  •  check console, result: some basic HTML markup is needed to fix custom.js 

Useful links: https://e107.org/developer-manual#theme-php


Other links

Follow us