Creating a theme from scratch

From e107 Wiki

Jump to: navigation, search

English | Magyar

Contents

Objective

The objective of this article is to guide the reader through how to create a fully functional e107 theme from scratch minus the visual appeal.

It covers all the basic 'core code' default css styles used.

Anyone creating a theme (or editing an existing one) is highly recommended to install Firefox as their Web Browser and the Web Developer Tool Bar extension which will make viewing and editing your project so much easier

NOTE: This article covers versions 0.7+ of e107.

Theme overview

Themes are basically controlled by the theme.php and style.css file - these and an image folder are all you actually need for a basic theme.

Everything else thats templated i.e. downloads area, links, login search etc have templates in the e107_themes >> Templates folder; however some plugins i.e. forum, chat, content manager have templates of their own which are all standardised so if you change themes they display the same.

You can copy any of the templates to your theme folder and hack away at them to change the look of your site. e107 looks in the theme folder and if it sees a template it uses that instead of the core one so 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 - take for example Lamb theme which has a news_template.php file which simply splits the news into 2 columns - you can copy that into most themes to use to get the same effect.

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 - all you do for that is 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 overide the core.

Step 1) File and Folder Structure

An e107 theme usually has the following directory structure: 

- e107_themes (dir)
  |
  + my_theme  (dir)
    |
    + images  (dir)
    |    | 
    |    + bullet.png
    |    + other_images.jpg
    |    + index.html
    |
    + languages (dir)
    |    |
    |    + English.php
    |    + index.html
    |
    + preview.jpg
    + theme.php
    + style.css
    + theme.js OR theme-js.php (Optional)
    + favicon.ico (Optional)
    + index.html
  • e107_themes - Theme folder of your e107 installation.
  • my_theme - The name of your theme.
  • languages - Contains different translations of text found in your theme. Ex. Comments, Trackbak, etc.
  • images - Contains all the images used by your theme.
  • bullet.png - Bullet to be used by your theme.
  • preview.jpg - A small image preview of your theme. Ideal size is 200px by 150px.
  • theme.php - Main theme file. (Ensure this is a php formatted file and not just a text file)
  • style.css - Contains all the styles used by your theme.
  • theme.js OR theme-js.php - if your theme needs Javascript, use one of these files to contain the script (as above, if you use a php file it must be formatted as such).
  • favicon.ico - if your theme has its own favicon store it here (NOT in the images directory) - e107 will pick it up and display it automatically.
  • index.html - Usually a blank file. This is added for security reasons.

Create the above structure before proceeding to the next sections. If you don't have images to use immediately, copy them from another theme.

Step 2) Create Theme.php

Open up theme.php and add the following lines:

Theme Security

Code: Theme Security 
<?php
    if(!defined("e107_INIT")){ exit; }

Language Information

Code: Language information 
    // [multilanguage]
    include_lan(e_THEME."my_theme/languages/".e_LANGUAGE.".php");
  • Make sure to change the "my_theme" to the name of your theme's folder.

Theme Information

Code: Theme information 
    // [theme information]
    $themename = "My Theme";
    $themeversion = "1.0";
    $themeauthor = "Juan dela Cruz";
    $themeemail = "juan@mytheme.com";
    $themewebsite = "http://mytheme.com";
    $themedate = "April 6, 2006";
    $themeinfo = "This theme is originally done by me.";
  • Replace the values with the information pertaining to your theme.

All of these switches are shown next to the theme on the Theme Manager Plugin page, so please be as verbose as you like, especially with the $themeinfo switch.

One other point, if you're making a multi-language theme, you must leave the text in these switches in the theme.php, and not in the language file.

Theme Settings 

  define('THEME_ONLOAD','MyJSinit();');     // Initialize JavaScript code at page load time

  If your theme uses Javascript that is specific to the theme (rather than being part 
  of e107's own Javascript files) then you must place your scripts into either 
  theme-js.php or theme.js (see File and Folder Structure above).

More Coming Soon

Layout

  • Insert this code after the $themeinfo line.
Code: Layout Example 
    // [layout]
    $layout = "_default";

    $HEADER = "
<table>
    <tr>
        <td colspan='2'>
            <h1>{SITENAME}</h1>
            <h2>{SITETAG}</h2>
        </td>
    </tr>
    <tr>
        <td colspan='2'>
            {SITELINKS}
        </td>
    </tr>
    <tr>
        <td>
             {MENU=1}
        </td>
        <td>";

    $FOOTER = "
        </td>
    </tr>
    <tr>
        <td colspan='2'>
            {SITEDISCLAIMER}
        </td>
    </tr>
</table>";
  • $layout : Indicates the name of the layout to be used by your template. The "_default" setting loads the "header_default.php" and "footer_default.php" found in the "e107_themes\templates" folder. If you wish to code your own header and footer, place them in this folder and change the setting to your file.
    • Example: $layout = "_mytheme";
    • This would load "header_mytheme.php" and "footer_mytheme.php" from the templates folder.
  • $HEADER : This is where your html layout starts. The html tags here will be placed right after the body tag.
  • {SITENAME} : This will be replaced with your actual site name set by your preferences.
  • {SITETAG} : Returns the current 'site tag' as configured in preferences.
  • {SITELINKS} : This shortcode will be replaced with the main site links. Formating of the sitelinks is discussed on a later section.
  • {MENU=1} : This will be replaced by all the menus active at menu area 1. You can also apply different formatting on each menu and that is discussed on a later section.
  • $FOOTER : This closes all your html tags in the $HEADER variable.

All the content like news, forum, articles, etc. are placed in automatically by e107 between the $HEADER and $FOOTER variables.

Custom Pages

Custom pages allow heterogeneity within your e107 powered website. For example you can have a 'three column layout' for your news page, a 'one column layout' for your signup page and a 'two column layout' for your forum pages using custom pages/layouts. There are virtually no limits to the number of Custom Pages you can create.

Custom pages are structured and made to work the same way as your Default Layout. The difference is that $HEADER and $FOOTER is denoted as $CUSTOMHEADER and $CUSTOMFOOTER and the markup defined in it will only be used to pages that you define in the $CUSTOMPAGES variable.

Code: Custom pages Example 
$CUSTOMHEADER['my_layout'] = "
    <table>
        <tr>
            <td>
                <h1>{SITENAME}</h1>
                <h2>{SITETAG}</h2>
            </td>
        </tr>
        <tr>
            <td>
                {SITELINKS}
            </td>
        </tr>
        <tr>
            <td>
";

$CUSTOMFOOTER['my_layout'] = "
            </td>
        </tr>
        <tr>
            <td>
                {SITEDISCLAIMER}
            </td>
         </tr>
    </table>
";

$CUSTOMPAGES = "forum.php forum_post.php forum_viewforum.php forum_viewtopic.php user.php 
submitnews.php download.php links.php stats.php usersettings.php signup.php";

You usually use custom pages if you have different designs/layouts for different pages. To know more about defining more than one set of custom page please read this article.

As of e107 v0.8+ the use of $CUSTOMHEADER and $CUSTOMFOOTER is deprecated. In 0.8+ themes all layouts (including the default one) should use $HEADER['my_layout_name'] and $FOOTER['my_layout_name']. Old themes will work, but for best results, just use $HEADER and FOOTER arrays.

Table Render Style

This portion tells e107 how to draw nearly all the inner layouts inside your outer layout/s. Outer layouts consist of both Default Layout and Custom Layout/Pages.

Table Render Style function decides the layouts for your menu blocks, main content block (different e107 core pages, plugin pages etc) and many layouts in the Admin pages.

Code: Table Render Style Example 
//[tablestyle]

function tablestyle($caption, $text){
        echo "<h3>{$caption}</h3>
              <div>{$text}</div>";
}
  • {$caption} - This is the caption/title of the menu or page. This variable will be replaced with the actual name of the menu or page.
  • {$text} - This is the content of the menu or page. This variable will be replaced with the actual content of the menu or page.

One could make a lot of variation to the Table Render Style function to make it render/draw the layout differently for different e107 component that uses it. One example is styling individual menus

News Render Style

This part simply tells e107 how to draw your news items. You can put your markup for rendering your news item here.

A news item essentially has three components a ‘News Title’, a ‘News Body’ and an ‘Extended News Body’ these are printed inside your markup using shortcodes that are predefined for it. Apart from those three components e107 news system allows you to render other information too using predefined shortcodes, they are ‘News Author’, ‘News Date’, ‘News Comments’, ‘News Icon’ ‘Sticky Icon’ etc.

You could also add custom defined shortcodes in news style or many other places in your theme.php but that is beyond the scope of this article and will be discussed elsewhere.

Code: News Render Style Example 
//[newsstyle]
$NEWSSTYLE = "<h3>{NEWSTITLE}</h3>
              <div>{NEWSBODY}<br />
                   {EXTENDED}</div>";
  • {STICKY_ICON} - This front end news style shortcode will be replaced by the 'sticky.png' image, either from e107_images\generic\lite or e107_images\generic\dark directory depending on your theme's IMODE setting.
  • {NEWSICON} -
  • {NEWSTITLE} -
  • {NEWSTITLELINK} -
  • {NEWSBODY} -
  • {EXTENDED} -
  • {NEWSAUTHOR} -
  • {NEWSDATE} -
  • {NEWSCOMMENTS} -
  • {TRACKBACK} -
  • {EMAILICON} -
  • {PRINTICON} -
  • {ADMINOPTIONS} -

Here again you could make a lot of variation to the News Render Style using modifiers.

Link Style

Link style defines how your Site Links will be displayed.

Code: Link Style Example 
//[linkstyle]
define('PRELINK', "<ul>");
define('POSTLINK', "</ul>");
define('LINKSTART', "<li>");
define("LINKSTART_HILITE", "<li class='hilite'>");
define('LINKEND', "</li>");
define('LINKDISPLAY', 1);
define('LINKALIGN', "left");
  • PRELINK - Place in front of the entire site links section. Usually contains opening table, div, or ul. This define can be blank.
  • POSTLINK - Place at the end of the entire site links section. Usually contains closing table, div, or ul. This define can also be blank.
  • LINKSTART - HTML tag in front of each link.
  • LINKSTART_HILITE - HTML tag in front of the active link.
  • LINKEND - HTML tag at the end of each link.
  • LINKDISPLAY - 1: Along top, 2: In left or right column
  • LINKALIGN - Link text alignment.

Link style illustration:

PRELINK LINKSTART Link1 LINKEND LINKSTART Link2 LINKEND POSTLINK

Comment Style

This is how the comments will be displayed on your site. There are 13 shortcodes, a description of them can be found at Shortcodes:Comments. This is setup just like the other styles, first you start with "$COMMENTSTYLE", then the rest is up to you :).

Code: Example theme.php (originally from human condition theme by Steve Dunstan [jalist]) 
$COMMENTSTYLE = "
<table style='width:100%'>
<tr>
<td colspan='2' class='forumheader3'>
{SUBJECT}
<b>
{USERNAME}
</b>
|
{TIMEDATE}
</td>
</tr>
<tr>
<td style='width:30%; vertical-align:top'>
<div class='spacer'>
{AVATAR}
</div>
<span class='smalltext'>
{COMMENTS}
<br />
{JOINED}
</span>
<br/>
{REPLY}
</td>
<td style='width:70%; vertical-align:top'>
{COMMENT} {COMMENTEDIT}
</td>
</tr>
</table>
<br />";

Chatbox Style

Rather easy, there are only 3 shortcodes (you can find them listed at Shortcodes:ChatBox). You need to start with "$CHATBOXSTYLE", then you can format it any way you wish.

Code: Example theme.php (originally from human condition theme by Steve Dunstan [jalist]) 
$CHATBOXSTYLE = "
<img src='".THEME_ABS."images/bullet2.gif' alt='bullet' />
<b>{USERNAME}</b><br />{TIMEDATE}
<div class='smalltext'>
{MESSAGE}
</div>
<br />";

Closing

Finally, make sure you've enclosed all of the php code in the proper opening and closing tags:

Code: Example theme.php (originally from human condition theme by Steve Dunstan [jalist]) 
<?php
    //theme.php code
?>

Style.css

Coming soon

e107 Core Classes

  • button
  • defaulttext
  • fborder
  • fcaption
  • forumheader
  • forumheader2
  • forumheader3
  • indent
  • installed
  • login
  • pass
  • smalltext
  • mediumtext
  • tbox
  • tbox
  • search
  • user

Classes that occur in Templates

button

  • contact_template.php
  • download_template.php
  • fpw_template.php
  • search_template.php
  • signup_template.php
  • usersettings_template.php

link_button

  • links_page - links_template.php

small

Also found in
*Alt_Auth - alt_auth_conf.php
*Banner_Menu - config.php
*Blogcalendar_Menu - config.php
*Calendar_Menu - admin_config.php , calendar_shortcodes.php , calendar_template.php , event.php
*Chatbox_Menu - admin_chatbox.php , chat.php , chatbox_menu.php
*Clock_Menu - config.php
*Comment_Menu - config.php
*Content - content_class.php , content_form_class.php , content_preset.php
*Featurebox - admin_config.php
*Forum - forum.php , forum_admin.php , forum_conf.php , forum_post.php , Forum_post_shortcodes.php , forum_uploads.php , forum_viewforum.php , Forum_viewtopic.php , newforumposts_menu_config.php , forum_post_template.php
*Gsitemap - admin_config.php
*Integrity_Check - admin_integrity_check.php
*Links_Page - link_class.php , links_template.php
*Linkwords - admin_config.php
*List_New - admin_list_config.php
*Log - admin_config.php
*Login_Menu - config.php , login_menu_shortcodes.php
*Newforumposts_Main - admin_config.php
*Newsfeed - admin_config.php
*Newsletter - admin_config.php , newsletter_menu.php
*Pm - pm_conf.php , pm_shortcodes.php , private_msg_menu.php
*Poll - poll_class.php
*RSS_menu - rss_shortcodes.php , rss_template.php
*Search_Menu - search_menu.php
*Trackback - admin_config.php , modtrackback.php
*Tree_Menu - config.php
*Userlanguage_Menu - userlanguage_menu.php
*Usertheme_menu - usertheme_menu.php

defaulttext

  • banner_template.php
  • download_template.php
  • signup_template.php
  • usersettings_template.php
Also found in
*Calendar Menu - calendar_template.php
*Chatbox Menu - chat _template.php
*Featurebox - centered.php , default.php
*Forum - forum_post_shortcodes.php , forum_posted_template.php

fborder

  • banner_template.php
  • comment_template.php
  • download_template.php
  • footer_default.php
  • fpw_template.php
  • login_template.php
  • membersonly_template.php
  • online_template.php
  • search_template.php
  • signup_template.php
  • user_template.php
  • userposts_template.php
  • usersettings_template.php

fcaption

  • banner_template.php
  • download_template.php
  • footer_default.php
  • fpw_template.php
  • trackback_template.php
  • user_template.php
  • userposts_template.php

forumheader

  • banner_template.php
  • comment_template.php
  • download_template.php
  • fpw_template.php
  • login_template.php
  • online_template.php
  • signup_template.php
  • user_template.php
  • userposts_template.php
  • usersettings_template.php

forumheader2

  • login_template.php
  • usersettings_template.php

forumheader3

  • banner_template.php
  • download_template.php
  • footer_default.php
  • fpw_template.php
  • login_template.php
  • membersonly_template.php
  • online_template.php
  • search_template.php
  • signup_template.php
  • user_template.php
  • userposts_template.php
  • usersettings_template.php

installe

  • header_default.php

smalltext

  • comment_template.php
  • download_template.php
  • footer_default.php
  • login_template.php
  • signup_template.php
  • userposts_template.php
  • usersettings_template.php

tbox

  • contact_template.php
  • download_template.php
  • fpw_template.php
  • signup_template.php

tbox search

  • search_template.php

Classes appearing in e107.css

table (element)

searchhighlight

defaulttable

fbdefault

fdefault

f2default

f3default

fcdefault

center

right

left

day

dayentry

forumheader4

forumheader5

ul

Retrieved from "http://wiki.e107.org/index.php?title=Creating_a_theme_from_scratch"
Personal tools