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.
Easy this one, paste the the following CSS into section one of your Theme. This is the common CSS section.
Paste the following CSS into section one of your Theme.
Paste the following into section 8 of your Theme
Paste the following into section one of your Theme.
Paste the following into section one of your theme. Replace the question marks with the hex colour of your choice.
Paste the following into section one of your theme.Replace the question marks with the hex colour of your choice.
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
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
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.
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.
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.
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.
Visit the blog archive »
All sites include the powerful Dreamgenie web based online content management system (CMS) powering this site, giving you complete control over styling and content and enabling you to change anything anytime you wish.