Theme_Design

---

title: Theme Design permalink: /Theme_Design/

Theme Structure

+ e107_themes (dir)   ↓   + theme_folder  (dir)     ↓     + theme.php     + theme.xml     + style.css     + e_module.php                    (Optional)     + index.html     + theme.js OR theme-js.php      (Optional)     + favicon.ico                   (Optional)     + preview.jpg                   (Optional)     ↓     + forum (dir)             (Optional)     ↓    ↓     ↓    + (custom forum image set)     ↓     + images  (dir)     ↓    ↓      ↓    + bullet.png     ↓    + other_images.jpg     ↓    + index.html     ↓     + languages (dir)         (Optional)     ↓    ↓     ↓    + English.php     ↓    + Italian.php     ↓    + index.html     ↓     + menu (dir)         (Optional)     ↓    ↓     ↓    + menu.css     ↓    + menu.js     ↓    + menu_rtl.css     ↓    + index.html     ↓     + tempates (dir)         (Optional)          ↓          + index.html          + plugin (dir)               ↓                       + plugin_template.php

theme_folder

The theme folder is the main container for your theme. It should contain all of the files required to build your theme and extend e107's display features.

theme.php

This contains the main design of your external site.

theme.xml

theme.xml complements theme.php file, providing data about the theme itself. (This is different to plugins, where plugin.xml replaces the plugin.php file used in 0.7/1.0). Various layouts can be configured and Menu-Presets created. Custompages are assigned in theme.xml. (Adding $CUSTOMPAGES to theme.php, as was done in 0.7/1.0, is now deprecated and should be avoided).

style.css

This contains the stylesheet information used by the various html elements used in e107.

e_module.php

This file is used for extending the core functions within e107. For advanced users only.

index.html

Do not leave a folder without an index file, placing an empty file named index.html inside every folder you create in e107. This is recommended for security purposes.

theme.js

(Optional)

To include theme related JavaScript in your websites

, which is through the creation of a theme.js file in your themes directory. If e107 finds this file in your themes folder it automatically outputs a <script> tag in to point the browser to the file. ### theme-js.php (Optional) If your theme needs Javascript, use only **one** of either '''theme.js or theme-js.php of these files to contain the script (as above, if you use a php file it must be formatted as such). ### favicon.ico (Optional) ### preview.jpg (Optional) ### forum (dir) (Optional) Custom forum image set ### images (dir) - bullet.png - other_images.jpg - index.html ### Languages (dir) (Optional) If you are designing a multi-language theme, it will contains at least one language file, where you place translated item codes for use in theme.php - English.php - Italian.php - index.html #### menu (dir) (Optional) #### menu.css #### menu.js #### menu_rtl.css ### tempates (dir) (Optional) e107 uses Template Files to format specific types of content provided by core features and plugins, i.e. downloads, links, login search, forum etc. Many themes simply use the defaults provided with e107, but you can include customised versions in your theme folder to get finer control. The default templates should remain unchanged in the e107_themes > templates folder, so that your changes are not lost at upgrade. Plugin which provide templates, such as, forum, chat, content manager, store them in the e107_plugins/plugin_name folder. The default templates provide the standard layout for the plugin. You can copy any templates into your theme folder and code away at them to change the look of your site. e107 first checks your theme folder for a template to use. When your theme does not contain a template, then the default template will be used instead. This means you can make your site as individual as you like without any of your work getting overwritten by future updates. The templates generally consist of tables to control the layout of a page. Lamb theme, for example, contains a news_template.php file which splits the news into 2 columns. You can copy that into most themes to use to get the same effect. Theming Forum Icons: One of the things that lets down most themes is that few developers bother to mod the templates to match or add different images from the standard ones. Create a folder in your theme called forum and drop the images into that. As long as they have the same filename as the core ones, then e107 will again override the core. Creating your first Theme ------------------------- [Category:Development](/Category:Development "wikilink") [Category:Theming](/Category:Theming "wikilink")