This theme is a liquid layout with multiple columns. The basic hierarchy:

<div id="header">
</div>
<div id="wrapper">
	<div id="minwidth">
		<div id="holder"> wrapper, minwidth and holder divs make the liquid layout, minimal width is 700px
			<div id="menu">
				<div id="left"></div> This is the left rounded corner
				<div id="right"></div> This is the right rounded corner
			</div>
			<div id="submenu">
			</div>
			<div id="desc">
				<div class="body">
					This is the content area
				</div>
				<div class="clear"></div>
				<div id="body_footer">
					<div id="bottom_left"><div id="bottom_right"></div></div> The bottom left/right rounded corner
				</div>
			</div>
		</div>
	</div>
</div>
<div id="footer">
</div>

<div id="menu">
	<div id="left"></div> This is the top left rounded corner
	<div id="right"></div> This is the top right rounded corner
	<ul>
		<li>
			<a href="index.html"><span>Home</span></a> This is a simple menu option
			If you want to select, just simply add class="selected" to the link
		</li>
		<li>
			<a href="somethin.html">Submenu</a>
		</li>
	</ul>
	<div class="clear"></div>
</div>

I'm using three CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
The second file contains all of the specific stylings for the page. The file is separated into sections using comments:

/*--------------------------BODY--------------------------*/

some code

/*--------------------------MENU--------------------------*/

some code

etc, etc. 

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

This theme imports three Javascript files:

1. jQuery:
   jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. Modal window:
   This is create the modal window function. The only necessary thing to know is how to call the method. Scroll down for examples.
3. Global js file:
   In addition to the custom scripts, I implement a few plugins to create functions. This plugin is packed, so you won't need to manually edit anything in the file. This file is commented, so you can see more info about the functions.

The modules is located below the menu bar, inside the submenu div. The submenu div looks like this:

<div id="submenu">
	<div class="modules_left">
		Modules left
	</div>
	<div class="title">
		Title
	</div>
	<div class="modules_right">
		Modules right
	</div>
</div>

The modules goes inside the modules_left or the modules_right div. You can use unlimited numbers of modules, but the width is not unlimited:) This template has 5 modules:

• Text: plain text
• Buttons: you can show buttons with or without icons, you can see below more example for the icons
• Search: basic search field
• Dropdown: if you click the button, a div is going to slide down, and you can put anything in it, like forms, text or images for example.
• Pagination: simple pagination module, with previous and next arrow, and numbers

Text module

<div class="module text">
	Text goes here
</div>

Nothing much to say, you can use the basic typography classes, like class="module text strong" or class="module text italic" and class="module text highlight".

Buttons module

<div class="module buttons">
	<a href=""><span>Button without icon</span></a>
	<a href=""><small class="icon plus"></small><span>Button with icon</span></a>
</div>

You can have unlimited number of buttons here, and you can use icons too. (more icons in the Buttons section)

Search module

<div class="module search">
	<form action="">
		<input type="text" value="Search..." />
	</form>
</div>

Change the form action. The default value is cleared, when you click inside the input.

Dropdown module

<div class="module buttons">
	<a href="" class="dropdown_button"><span>Dropdown</span></a>
	<div class="dropdown">
		<div class="arrow"></div>
		<div class="content">
			<a href="" class="close button"><span>Close</span></a>
			<div class="clear"></div>
		</div>
	</div>
</div>

This one is pretty cool. This is de default html layout. The button is same, as the Buttons module, so you can use icons too. The difference is the class name, you need to put "dropdown_button" class to the button. The arrow div is just the little arrow of course, so you don't need to put any html inside this div. The content goes to the content div, you can put anything here, text, image, form, or any html code you like. If you want a close button, just add the "close" class to any element you like, for example a button.

Pagination module

<div class="module pagination">
	<a href="" class="page_left"><small class="icon arrow_left"></small></a>
	<a href="" class="current">1</a>
	<a href="">2</a>
	<a href="">3</a>
	<a href="" class="page_right"><small class="icon arrow_right"></small></a>
</div>

The page_left and the page_right link is the left and the right arrow, the active link is the current page. If you want to put some text between the numbers, like dots, use the span element: <span>...</span>

Header H1

Header H2

Header H3

Header H4

Header H5

Avaible options:
$().Message({type:'error',time:2000,text:"Some text",target:"#targetdiv",click:true});

• type: you can choose form success, error and notice(or anything else, this is the classname, so you can create your own message style in css)
• time: number of milliseconds visible the message
• text: the text value to set the contents of the element to.
• target: the target div.
• click: if you click on the message, it will slide away, if you don't want that for some reason, just add click:false.

This system is liquid too, so you can change the width and it still looks great. The basic syntax looks like this:

<div class="shelf">
	<div class="left"></div>
	<div class="right"></div>
	<div class="inside">
		<div class="books">
			Elements
		</div>
	</div>
	<div class="clear"></div>
</div>

Inside the books div, you can use the columns(col w1, col w2 etc..). You need a little CSS knowledge to modify the style, but nothing hard.

Username

Username

Username

Username

Username

Username

Username

Username

Username

Username

This link is load a custom modal window with 700px width, 2000 ms animation speed, the title is not visible and modal class: red