Rhythm Web Design

Getting started with the designer

The Rhythm Web Design theme builder is an easy to use tool which provides a modern and innovative approach to building web site templates. Getting started is easy, click here to launch the designer.

Zipped Files

After the process of building a theme that you are statisfied with, you can download a zipped file which contains a package of the theme that you have built.

Exploring the files

A package with a folder structure similiar to the one on the right is included within the zipped file that you downloaded.

The Site.htm File

This file contains the XHTML and the CSS class that are responsible for picking up and rendering the styles from the mytheme.css file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Snap Design</title> <link href="package/css/mytheme.css" rel="stylesheet" type="text/css" /> <input type='text' scriptId='0' class='scriptProtect' value="<input type='text' scriptId='0' class='scriptProtect' value="<script src='package/js/myscript.js' type='text/javascript'></script>"/> </head> <body> <div id="Wrapper"> <div id="TopBar"> </div> <div id="MainContainer"> <div id="Header"> <div id="HeaderContent" class="HeaderContent"> <div id="SiteTitle"> <h1>Your Site Title Goes Here</h1> </div> </div> </div> <div id="Menu" class="Menu"> <div id="MainMenu"> <ul> <li> <a href="#">Page 1</a> <a href="#">Page 2</a> <a href="#">Page 3</a> </li> </ul> </div> </div> <div id="Content" class="Content"> <div id="PageContent" class="PageContent"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td style=" width: 40%; padding-right: 10px" iestyle=" width: 40%; padding-right: 10px" iestyle=" width: 40%; padding-right: 10px" iestyle=" width: 40%; padding-right: 10px" valign="top"> <h1> Welcome </h1> <p> This template is created with snap design. For more of this awesome and amazingly elegant themes please visit <a href="#">snapdeisgn.com</a>. </p> <img src="package/images/snap-design.jpg" /> <p> <a href="#" style=" font-size: 12pt;" iestyle=" font-size: 12pt;" iestyle=" font-size: 12pt;" iestyle=" font-size: 12pt;" onclick="LoadWindow('Window1');return false;">More info >></a> </p> <p> <img src="theme/images/close.gif" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam scelerisque. Phasellus eget lacus in orci hendrerit ornare. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam scelerisque. Phasellus eget lacus in orci hendrerit ornare. </p> <ul style="list-style-type: square;" iestyle="list-style-type: square;" iestyle="list-style-type: square;" iestyle="list-style-type: square;"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> </ul> </td> <td valign="top"> <h1>Header 1</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam scelerisque. Phasellus eget lacus in orci hendrerit ornare. <h2>Header 2</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam scelerisque. Phasellus eget lacus in orci hendrerit ornare. <h3>Header 3</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam scelerisque. Phasellus eget lacus in orci hendrerit ornare. <h3>Header 4</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam scelerisque. Phasellus eget lacus in orci hendrerit ornare. <h5>Header 5</h5> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam scelerisque. Phasellus eget lacus in orci hendrerit ornare. </td> </tr> </table> </div> </div> <div id="Footer" class="Footer"> <div id="FooterContent" class="FooterContent"> <div class="FooterText" id="FooterText"> © 2007 Your name. </div> <div id="SponsorLink" class="SponsorLink"> Theme created with <a href="http://snapdesign.gm">Snap Design</a> </div> </div> </div> </div> </div> <div id="Window1" class="Dialog" style="width: 200px; height: 200px; display: none;" iestyle="width: 200px; height: 200px; display: none;" iestyle="width: 200px; height: 200px; display: none;" iestyle="width: 200px; height: 200px; display: none;"> <div id="Window1DragTrigger" class="DragBar" style="cursor: pointer" iestyle="cursor: pointer" iestyle="cursor: pointer" iestyle="cursor: pointer"> <div class="CloseButton" onclick="CloseWindow('Window1')"> </div> <div class="ScreenTitle"> Quick Info </div> </div> <div class="DialogContent"> <h1> Dialog Content </h1> </div> </div> <div id="cached"></div></body> </html> <div id="cached"></div></body></html> <div id="cached"></div></body></html>

Website created with Lara

.geographical media