Themes in e107

July 2008

What is a Theme?

Back in the mid 1970s, programming code became so immense that changing even the smallest part of a piece of code could have unpredictable effects in the other areas of the program. This led to the development of a concept called modular programming, which essentially broke the program down into smaller more manageable junks that were called upon by the main program when needed. The term for modular programming these days is separation of concerns or SoC. But no matter what you call it, this is its function.

In e107 a theme contains a set of modular code containing XHTML (eXtensible HyperText Markup Language) and CSS (Cascading Style Sheets). In its most basic explanation, XHTML allows us to take a text document, create a link to other documents, and the eXtensible part of the language allows you to create your own tags describing data. Thus a program like e107 can use these tags to extract the information it needs. The data shouldn’t show up on the screen like a computer printout; CSS is employed to define the layout of the various elements and tags such that they may be viewed with consistency by all browsers. The screenshot below shows you the theme files that are available in e107 on the left, and the typical files and folders that make up a particular theme on the right.

Themes in e107

They say a picture is worth a thousand words so I have used the PHP code that makes up the Reline theme, which is what we are using for our front end. Open up your FTP client and go to /public_html/e107_themes/reline/. Locate the file theme.php and use your FTP client's view/edit feature to open the file. As you can see, there is a fair amount of work that goes into creating a theme. If you want to design your own themes, I strongly recommend that you are thoroughly familiar with PHP, XHTML, and CSS before making the attempt.

We won't be tackling theme making in this article. We completely need a different book for that subject; however, if you have the knowledge and want to create your own theme you can find information in the WIKI at But I wanted to show you that these themes take effort so you will appreciate those who take the time to develop themes, especially those who develop themes and share them at no charge. Remember to thank them, encourage them, and offer to send a little money if you like the theme and can use it. It is not a requirement but it encourages more development.

Themes in e107
For more information on customizing your website, visit:

Understanding the Theme Layout

The first thing you can to do is log in as administrator and select Admin Area | Menus. The screenshot below shows the correlation between the areas displayed on the administrator's menu items control page and those on the non-administrator page.

Themes in e107

Psychology of Color

One of the biggest mistakes people make is to choose their theme based on their personal preferences for layout and colors. You can have the perfect layout and great material on your site and yet, people will just not like the site. So you need to ask yourself, "why do people not like my site?" or "why aren't they buying from my site?" The answer is probably that your theme uses a color that is sending out a very different message to your viewers' brains. This is a subject of protracted discussion and there are college courses on this subject. Professionally it is referred to as psychology of color. Your best bet for online information on colors is at

Selecting a Theme

Sometimes, the default theme does not quite convey the style you want for your site. While functionality is always the primary consideration, it does not mean that you have to abandon your sense of style just because you are using a CMS. There are three types of themes available for e107. These are the core themes, additional themes (located at, and custom themes.

Core Themes

There are several core themes within your installation of e107. Before we explore custom themes, let us look at how you select one of the existing themes:

  1. Open the administrator menu by clicking the link Admin Area.
  2. Select Theme Manager (bottom row, second from left).
  3. Scroll down to kubrick Version 1.0.
  4. Select the Preview Theme button.

Themes in e107

As you can see in the screenshot shown above, this theme would give our site a much different look. You will see a heading Theme Preview and then a box with information. Use the links provided instead of the back button on your browser. From here, you can preview the different themes. Do not worry, you are not actually changing anything permanently. If you want to change themes, return to the Theme Manager, find the theme, and then select the Set as Site Theme button. You will also notice a button Set as Admin Theme. If you do not set the admin theme, it will retain the attributes of the default administrative theme or the last administrative theme selected.

Always preview a theme before you commit to changing the theme on sites that already have a large amount of content. Changing the theme may cause information that was visible with the old theme not to be visible with the new theme.

It is always a good idea to open up two windows with one window showing the front end and the other showing the back end. That way if you commit to a new theme and it does not work for some reason, you can switch to the back-end window and change it back.

Go ahead and apply some other themes and see how they look on the screen. You will notice that you can expand some themes to fit the entire screen. When you are done, select the kubrick theme but this time make the selection with the Set as Site Theme button.

Additional Themes

If none of the core themes appeals to you, I suggest that you go to the official e107 themes development and repository site at When I visited this site for the first time, there were only about 9 themes but now the number of themes has grown close to 100 and I'm sure there will be even more themes coming up in the future.

Take a moment to register on the site and then you can preview and download themes and avatar packs, and also find information on developing your own themes. The procedure for installing one of these themes is explained in the following section

Custom Themes

Sometimes a business owner needs to establish a unique identity before the first customer gets to see the website. For those individuals using a theme that is downloadable no matter how nice it looks is just not sufficient. In such cases you will want to make a custom theme.

I would caution anyone who is considering making own theme or having a theme custom made, to ensure the following:

  • The theme is coded in XHTML a minimum of 1.0, 1.1, or better the latest standard, which is version 2.0. You can learn more about XHTML at
  • While browser creators have made better strides to adhere to W3C standards you will still run into the occasional rendering quirk. Therefore I recommend that CSS 3.0 should be employed for the latest layout technology but certainly nothing older than version 2.0. The older the version, the greater the chance for cross-browser rendering differences. You can find out more about CSS at
  • The theme is cross browser compatible i.e. with Internet Explorer, Netscape, Firefox, and Opera.
  • Always check the e107 themes site for e107-specific information, updates, and cross-browser issues. (This could save you or your developer a lot of time.)

The Internet is rapidly moving away from HTML to XHTML with CSS. You will be purchasing obsolete technology if you purchase a theme where the designer uses tables for the layout. There is also a high probability that your theme will not load properly in all browsers.

For information on creating custom themes, go to the website. This is where you will find design tags and information on the requirements for making a theme that e107 will recognize.

Once you have your new theme you need to add it to your e107_themes folder so that you will be able to select it through the administrative interface. This can be accomplished in two ways:

  1. Open the administrator menu by clicking the link Admin Area.
  2. Select Themes Manager.
  3. Scroll down from the default theme. Right below you will see Theme Manager :: Upload Theme.
  4. Browse to the ZIP file on your computer, and then select Upload Theme.

The theme is now available for selection. Sometimes the ZIP files do not work the way they should. If this should happen to you then do the following:

  1. Check to make sure that the fileupload_.php is named fileupload.php and that the required file extension is contained inside.
  2. If the file is zipped, unzip it creating a folder with the name of the theme.
  3. Open your FTP client.
  4. Find the source folder where you just unzipped your files.
  5. On the web server locate the /public_html/cuddlecare/e107_themes/.
  6. Now copy the entire folder up to the web server.
  7. The theme is now available for selection through the Themes Manager menu.

Deleting Themes

Sometimes you know that you are never going to use a particular theme or themes for your site and having it, or those, present is just a waste of resources. To delete unwanted themes do the following:

  1. Open you FTP client to your server.
  2. Locate the theme(s) you wish to delete at /public_html/e107_themes/ and delete them.
  3. Close your FTP client.

The next time you look at themes in the administrative interface you will only see the themes that you left on your server.

You've been reading an excerpt of:

Building Websites with e107

Explore Title