HowTo: Make Minor Theme Adjustments

Making Minor e107 Theme Adjustments

This is not meant to be an all encompassing guide to theme development. It is aimed at non-technical system administrators who are new to HTML, CSS, PHP and e107 CMS Theme Development. It is just meant to show how to change a minor item in a theme.

The reader should, regardless of skill level, also read the full article Creating a theme from scratch to get a basic level of understanding of how a theme structures your e107 Website.

Identifying Theme Elements

You have a theme which is not quite how you need it. How do you go about finding out what bit of code needs to be changed?

• Get the WebDeveloper Toolbar for Firefox [1]] For Chrome [2]
• Navigate to the web page you would like to examine.
• Click Information > Display Element Information.
• Notice the Yellow Box appears
  • It's at the top left of the browser.
  • You can position the yellow box by clicking and holding to the top line then move the mouse.
• Next move your mouse around the page.
  • Notice that the structures which make your page highlighted in red.
  • Notice also how each area fits into the next one - a 'hierarchy' if you like.
    • This is an Ancestor
      • This is a Ancestor and child
        • And this is a child
• Next Click an Item, such as your Main Website Header Text
  • The Yellow Box now contains information about the selected object.
    1. The first line tells which HTML tag it is.
    2. Next is the Attributes Section, if any.
    3. Position and Size Information
    4. Other Attributes, like font, color and so forth.
    5. It's position in the page hierarchy, hence ancestors and children.
• Next View the source and find the item, and look at the properties and its location in the page, which should help you find it in your theme.

This is the information will help you identifying what needs to be changed.

Example: e107.org clicking the Welcome to e107 Message

The yellow box contains this information:-

h2
Attributes
   None
Position
   Left: 565px	Top: 191px
   Width: 542px	Height: 18px
Other
   Font Family:	verdana,arial,tahoma,sans-serif
   Font Size:	15.5px
Ancestors
   html
   body
   div #wrapper
   div #leftcolumn
   div .content
   table
   tbody
   tr
   td .main2
   table
   tbody
   tr
   td
Children
   None

How to Change the font color of Heading 2

Lets say you want to change the Welcome Title colour to Red.

However, first be aware that you can either change just this instance of h2 by modifying theme.php or all h2 tags by changing style.css.

Having found the element using the tool above.

• Find out what the name of your site theme is.
  • Admin Area > Tools > Theme Manager
  • Next check the Name of the Site Theme.
• Assuming you have a copy of the theme on your local machine, you need to create your own version of the theme.
  • Open the original theme folder.
  • Copy the entire folder
  • name it something like e107v4_YourName
• Use a good editor - this is very important.
  • Not Notepad, Wordpad or Word - see Text Editors.
• Next open your copy of the file theme.php
  • Search for the shortcode {SITETAG} (or whatever else it may be that you want to change).
  • Next check what HTML TAG {SITETAG} sits between.
  • In the example it is in h2.
    • Have a look at the tag attributes to see if it has any colour or in-line style information.
• If you want to change this h2 only to RED change the theme.php like the code below
• Add a note to say what you changed
• Save the file.

<h2>{SITETAG}</h2> 

<h2><font color=red>{SITETAG}</font></h2> <!-- Note to myself that I changed this-->

NOTE: It is good practice to change the theme information near the top - so add a note on the version - See Creating a theme from scratch.

Tip: Try the Pixie colour picker [3]

Changing All Heading 2 Style

To change all h2 tags then this is where the style.css comes in. Essentially the css is behaves as a reference sheet for style information which is used many times over.

• In your good text editor open style.css
• Find the h2 class name.
• Now this can get complicated because you can have multiple h2 styles.
  • This example has two sub-classes.
    • smalltext
    • highlighttext

#h2 {
	background-image: url(images/header.png);
	width: 100%;
	height: 104px;
	background-repeat: repeat-x;
         }

.smalltext {
	color: #000000;
	font: 10px verdana, tahoma, arial, sans-serif;
           }

.highlighttext {
	color: #DC6504;
	font: 11px verdana, tahoma, arial, sans-serif;
           }

"Colour" would fail - take care with programming language spellings and punctuation marks - copy what is already there carefully!

• To change ALL h2's to RED.
• Change the color code to red which is FF0000
• Remember the # it is important.

color: #FF0000;         

• Hence

#h2 {
	background-image: url(images/header.png);
	width: 100%;
	height: 104px;
	background-repeat: repeat-x;
         }

.smalltext {
	color: #FF0000;
	font: 10px verdana, tahoma, arial, sans-serif;
           }

.highlighttext {
	color: #FF0000;
	font: 11px verdana, tahoma, arial, sans-serif;
           }

• Save the file.
• Deploy the folder and files to the server in your themes folder.
• Setting your new theme.
  • Go to Admin > Tools > Theme Manager
  • Find your Theme in the list
  • IMPORTANT - PREVIEW the theme first in case you break it.
  • Apply as SITE theme.
    • There is no need to change your Admin Theme, keep it as Jayya (Only logged in e107 admins on your site see this - this theme is known to always work properly in the admin area).

How to Move a Banner

We will use theme e107v4 once again in this example. In the header area there is a banner, but we want to move it to the bottom of the site.

• Note that you will only see it if you have an active banner configured through the Banner Core Plugin.

Open your copy of the theme.php which you copied to your own theme name.

Go down the page, and you will come to the start of the main function which builds the top and left area of the page. It is called $HEADER. Within that block of code, you will see that it starts building the page with a series of html tags. Find the line with {BANNER} shortcode in it.

<td style='text-align:right'>
{BANNER}
</td>

Remove {BANNER}.

Next go to the part of the code which builds the bottom of the website which is called $FOOTER. Locate the Theme Disclaimer and then paste the {BANNER} shortcode on a new line after the Disclaimer. Note however, that we want it to be on a new line rather than on the same line as the disclaimer, so we add an extra line break with the BR tag as shown below.

<td colspan='3' style='text-align:center' class='smalltext'>
{SITEDISCLAIMER}
<br />
{THEME_DISCLAIMER}
<br />
{BANNER}
</td>

Save you theme and refresh your page!

Further Reading

• e107 CMS Reference
  • Creating a theme from scratch
  • Shortcodes
  • Templates
  • How can I change my theme?
• w3Schools
  • HTML Reference
  • CSS Reference
  • PHP Reference
  • Color Names