Wiki ⇒ v9 Developer's Manual ⇒ Dragonfly Themes ⇒ The Idiot's Guide to CPG Dragonfly CMS Theme Design ⇒ CPG Dragonfly™ CMS
Wiki ⇒ v9 Developer's Manual ⇒ Dragonfly Themes ⇒ The Idiot's Guide to CPG Dragonfly CMS Theme Design
13.7. 3: The Idiot's Guide to CPG Dragonfly CMS Theme Design
A few notes about this tutorial:
Section 1 - Getting Started With Your Theme
1.1 - Create a new directory within yoursite.com/themes and name it anything you would like to call your new theme.
1.2 - Download and place this DEAD LINK REMOVED file and extract the included theme.php file to that directory.
1.3 - Find the three instances of the word BaseTheme on lines 34, 39, and 98. Change each of these to your new theme directory name.
1.4 - For now, we are finished with theme.php.
Section 2 - The Overall Appearance Of Your Site
2.1 - Create a directory within your new theme directory called template.
2.2 - Create two new HTML files in this directory called header.html and footer.html.
We will now begin the structure of your new Dragonfly theme!
2.3 - In header.html, we will start to build a table that will look like this:
2.3 - In footer.html, we will start to build a table that will look like this, minus the comments in italics:
This is where your content will be!</td>
2.4 - At this point, you are going to decide if you want a fluid 100% width theme or a fixed width theme. Above the <table> tag in header.html place the following code:
<div class="center"> - Unless you want your site aligned to the left or right. In which cass, use left or right instead of center.
2.5 - Below the </table> tag in footer.html, place the following code:
2.6 - In the main directory of your new theme, create a directory called style and within this directory, create a file called style.css.
2.7 - In style.css, we're going to define your new style class!
Section 3 - Adding Your Content and Functions
To be continued!
Section 4 - General Theme Dimension Guidelines
Here are the general sizes for dragonfly themes.
Left Block = 172
775 - 344 = 441 max for your center block width.
These calculations can be used for just about all dragonfly themes using 100% width.
Here are DJDevon3's normal design widths.
Fixed width themes follow a completely different set of dimensions and would need class changes. You can make a fixed width theme 100% width but if there is siding detail then that would be lost. Any 100% width theme can be made into fixed-width as long as the graphics inside the .main class do not exceed 440px.
Created: Wednesday, June 01, 2005 (08:26:31) by xXxtreme
Updated: Thursday, March 06, 2008 (22:52:00) by Phoenix