Overview

TECHNICAL NOTE: This article is targeted at advanced user/designers who want to develop Dreamgenie's bespoke advanced themes features, all the below can be acheived via simple mouse click selections in your website control  panel under the option [Design Template]

This article details how to transfer and incorporate your Design Template settings directly into your theme. Doing this will enable you to take advantage of being able to switch themes in a cleaner fashion and avoid potential issues when the currently selected theme is overridden by a Global Deisgn template setting.

To keep things simple most of the CSS blocks used below can be pasted into section one (the common css section) of your theme. If you want to use different styles for different Site default page layouts just put the CSS in the relevent section. eg. the sections in your theme One Column, Two Column etc.

NOTE: The default Site Page Layout is specified from the Design Template (under Installation Settings from the profile page) and can be overriden at page level from a webpage.

1: How to add the page shadow

Easy this one, paste the the following CSS into section one of your Theme. This is the common CSS section.

2: How to Remove the page shadow

Paste the following CSS into section one of your Theme.

3: How to turn the clock ON

Paste the following into section 8 of your Theme

4: Turn the clock OFF

Paste the following into section one of your Theme.

5: Set the webpage Title color

Paste the following into section one of your theme. Replace the question marks with the hex colour of your choice.

6: Set the Dashboard Title Text colour

Paste the following into section one of your theme.Replace the question marks with the hex colour of your choice.

7: Set the menu colours

Step 1: Paste the following CSS into section one of your theme.

Step2: Replace each of the following codes (e.g. menuBC, menuTC etc) with the hex colour of your choice, so for example replace menuBC with #ffffff to set the menu background color to White.

Ensure all the following codes have been replaced, or the menu won't look correct.

menuBC - menu background color
menuTC - menu text color
menuHB - menu Hover background color
menuHT - menu Hover text color

8: Change the Footer text and background colors

Step 1: Paste the following CSS into section one of your theme.

Step2: Replace each of the following codes (e.g. menuBC, menuTC etc) with the hex colour of your choice, so for example replace footerTC with #ffffff to set the footer text color to White.

Ensure all the following codes have been replaced, or the footer won't look correct.

footerTC - footer text color
footerBC - footer background color

9: Set the Footer image

The footer bar can be a colour or an image, use the previous section to define the colours, this section details how to define an image.

10: Set the System buttons images and Style

The buttons in your website can easily be changed. There are two standard buttons a large and a small one, the small is used for search and browse functions. The images suggested size is 98px x 24px though you can use whatever size you prefer.

To change the images paste the following CSS into section one of your theme.

Site header image, HTML or Object Code

Moving your default site image to the theme is straight forward but there are a couple of scenario considerations.

SCENARIO 1: Your Site header is simply an image.

Step 1: You will need a HTML image element to hold your image, copy the following into section 7 ( addtional html ) of your theme.

NOTE: The src attribute (below) has been left blank and is set instead in step 2. Setting the src of the image in this way signals to the function to automatically assign the correct height to the image elemant.

Step 2: Then in section 8 just inside your opening script block add the following...


Here we call the built in function resolveImageHeader().  This takes 3 parameters.

parameter 1: The id of the elemant to move to the Header image location. This can be any HTML elemant, in scenario 1 it is an image with the id imgHeader2.

parameter 2: custom height, in pixels.  If you want to specify a custom fixed height height for the Header area set this here, use pixels. If you are using scenario 1 ( a simple image ) then set to -1, this signals to the resolveImageHeader() function to auto set the height of the Header area to be the height of the specified image.

parameter 3: Path of the image to use.   NOTE: Here we are using the built in / command which returns resolves to the your website root followed by a forward slash. This can be used in section 7 and 8 of your themes. The file manager and image browser feautes in dreamgenie have permission to access to /_Images/uploads, you may not navigate beyond that point as these areas contain system files.

SCENARIO 2: Header image contains html and or flash, which may or may not include an image elemant.

Step 1 : Calculate the height of your header. The only real difference between scenario 1 and 2 is that you prvide the height of the Header, this is the outcome of using freeform HTML and or Flash in the header.  To obtain the height of the header; at the most simplest level you could just run the page and use tools such as the ruler in IE 7 developer tools or Firefox firebug.

Step 2 : Place your HTML and or Flash into section 7 (additional HTML) of your theme, for example.

We recommend using a wrapper outer div for your html or flash. In our example the id is divImgChild. The remaining html above is not required and could be any HTML or flash.

Step 2: Add the following to section 8 (additional javascript) of your theme.


The above Javascript calls the internal function resolveImageHeader() function passing wrapper div id as the first parameter, this will be set to display block and inline.  Immediatley afterwards the height of the Header will be set to that provided in parameter 2, in this case 80px.

NOTE: The height as provided in param 2 is set on the physical dreamgenie element for the Header area which is #ctl00_divImage and not the wrapper div divImgChild in the example above.