Easy Customisation

With Dimensions, the process of customisation is that much easier with 4 references in the style.css files controlled the colour of the majority of the template from titles, links, images, typography and backgrounds.

The style.css file is split into 4 distinct sections. The first part controls the loading of the header and footer background images i.e. the textures that you see on the demo. With a simple modification of the path name, you can load your own background images. In the following example, we are using style3 and here is the relevant section:

/* header */
#bg-top {
	background: #000 url(../images/backgrounds/texture-1.jpg) 50% 0 no-repeat;
}
/* footer */
#bg-bottom, #bg-bottom-ie {
	background: url(../images/backgrounds/texture-1.jpg) 50% 100% no-repeat;
}

From the highlighted section, you can see the reference which you can change to fit the filename of your custom background. Notice that the path relates to /images/backgrounds. This is a relative path from the template rt_dimensions directory.

The 3 other references control the colours. These colours are responsible for the links, titles, accents, typography, read more links and many more. Basically, transparent images are placed on top of CSS backgrounds so you do not need to start editing images for a simple colour change and just reconfigure in the CSS which is far quicker and subsequently, more efficient. You can observe the colour CSS below.

This is color 1 which controls the following references. The highlighted areas represent the colour codes that control main accent colours for the template. The classes are all consolidated in a single place so when you make the change, it affects the majority of the template. The same process applies to the Color 2 and Color 3 blocks as well.

/* color 1 */

a, h2, .contentheading, #maincol .moduletable h3, #bottom-modules h3, 
.moduletable-hilite2 h3, .moduletable-hilite5 h3, .module-hilite2 h3, 
.module-hilite5 h3, ul.sidenav li.active a, 
a#active_menu, a#active_menu.sublevel {
	color: #e3bf56;
}

a img.album {
	border-color: #e3bf56;
}

.contentheading, .maincol .accent, 
#horiz-menu li.active span span.selector, 
a#active_menu, ul.sidenav li.active a, a.readon,
div.moduletable-hilite1 a.readon, div.module-hilite1 a.readon, 
ul.arrow-1 li, ul.triangle-1 li, ul.bullet-1 li, ul.bullet-5 li, 
ul.plus-1 li, span.pathway img   {
	background-color: #e3bf56;
}

Time Changing Styles

Style1 and Style2 are not individual styles but a collection of multiple styles and backgrounds into a coalition. The purpose of this is to harness the latest template features, time changing styles.

There are 4 default times, dawn, day, dusk and night in which the style/background will change depending on what time it is at your location. The default template times are as follows:-

• Dawn : 5am
• Day : 9am
• Dusk: 5pm
• Night: 8pm

Remember, the times are based on user time, not server time so you will not have the conflicting backgrounds for your time zone. You can modify these times, the names which are associated with them, and even add more to your personal preferences. If you wish to edit this, you need to edit the file roktempus.js which is located in the /js directory. Edit the following in this file:

if (thehour >= 20)
 timeofday = "night";
else if (thehour >= 17)
 timeofday = "dusk";
else if (thehour >= 9)
 timeofday = "day";
else if (thehour >= 5)
 timeofday = "dawn";
else
 timeofday = "night";