Wiki ⇒ v9 Developer's Manual ⇒ Dragonfly Themes ⇒ The Idiot's Guide to CPG Dragonfly CMS Theme Design ⇒ CPG Dragonfly™ CMS
Wikiv9 Developer's ManualDragonfly Themes ⇒ The Idiot's Guide to CPG Dragonfly CMS Theme Design

13.7. 3: The Idiot's Guide to CPG Dragonfly CMS Theme Design Parent


A few notes about this tutorial:
Ignore italics text as it is used for me to describe why and what alterations can be made to the code. It is not part of the code!
Code and file/directory names will always be in bold text.

Chapter 1

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.

Important Information!

Your new header.html and footer.html files serve as "wrappers" for your Dragonfly modules. All modules will be displayed beginning at the end of header.html and end at the beginning of 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:

<table>
<tr>
<td colspan="3">This is where your header will be located!</td>
</tr>
<tr>
<td>This is where your left blocks will be located!</td>
<td>This is where your content will be!

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>
<td>This is where your right blocks will be located!</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>

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.
<div class="site">

2.5 - Below the </table> tag in footer.html, place the following code:

</div>
</div>

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!

.site {
width: 100%;
- Width can be changed to any % for a fluid page that changes with the window or px for fixed width.
border: 0px solid #000000; - This border will be around the entire site table.
background: #000000 url(imagepath); - The background color within the table. No background image, remove url( ).
}

Section 3 - Adding Your Content and Functions

To be continued!

Section 4 - General Theme Dimension Guidelines

Here are the general sizes for dragonfly themes.
These dimensions only apply for 100% width themes.

Left Block = 172
164 + 4 padding (will add 4 to each side therefore making 8px) = 172
Right Block = 172
Total for side blocks is == 344

775 - 344 = 441 max for your center block width.
This means that if a standard web banner of 468 is used in a center block will make 800 res users sidescroll a bit.

These calculations can be used for just about all dragonfly themes using 100% width.
Of course that depends on the block width being at 172px total including padding.
If anything in your center block (.main class) is larger than 441 it will breakout for 800 res users.

Here are DJDevon3's normal design widths.
800x600 = 775 for header graphic
1024x768 = 775 for header graphic
1280 = 775 for header graphic
They are all the same to design for the lowest common denominator however if you really have a disdain for 800 res users then use 995 for 1024 users. That will give you 660 px to play with for your center block (.main) area.

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