HTML Structure:

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

<div id="header">
<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 id="submenu">
			<div id="desc">
				<div class="body">
					This is the content area
				<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 id="footer">


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:


some code


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 class="title">
	<div class="modules_right">
		Modules right

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

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>

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..." />

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>

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>

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>


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • <span class="strong">Lorem ipsum</span>
  • <span class="underline">dolore magna aliqua.</span>
  • <span class="highlight">aliquip ex ea</span>
  • <span class="italic">dolore eu fugiat nulla</span>
  • <span class="italic strong underline">dolore eu fugiat nulla</span>
  • <span class="small">consectetur adipisicing elit</span>

Header H1

Header H2

Header H3

Header H4

Header H5


Simple box with title

<div class="box">
<div class="head"><div></div></div>
<h2>Here is the header</h2>
<div class="desc">
<div class="bottom"><div></div></div>

Simple box with header

<div class="box header">
<div class="head"><div></div></div>
<h2>Here is the header</h2>
<div class="desc">
<div class="bottom"><div></div></div>


<div class="col classname"><div class="content">Text</div></div>
This it he basic syntax. If the column is last in a row, add class="last" to the div and add a clear div or br element below the last column.

col w10 last

col w1

col w2 last

col w2

col w8 last

col w3

col w7 last

col w4

col w6 last

col w5

col w5 last

col w6

col w4 last

col w7

col w3 last

col w8

col w2 last

col w9

col w1 last


Its Success, js call: $().Message({type:'success'});

Something wrong in here, js call: $().Message({type:'error'});

Its just a notice, js call: $().Message({type:'notice'});

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.


Simple button
<a href="" class="button"><span>Simple button</span></a>
Simple link

Buttons with icons
<a href="" class="button"><small class="icon classname"></small><span>Button with icons</span></a>
single_user multiple_users calendar speech_bubbles polaroids film message new_message v-card presentation settings unlock lock flatscreen save pencil cut clipboard facebook twitter looking_glass off address_book clock documents pdf_documents word_documents excel_documents powerpoint_documents zip_documents single_document single_pdf single_word single_excel single_powerpoint single_zip music play stop next_track previous_track eject minus plus cross check home crosshair favorite unfavorite folder tag bookmark book_bookmark bar_graph heart-favorite arrow_left arrow_right arrow_down arrow_up

Three different colors
<a href="" class="button classname"><span>Coloured button</span></a>
red green yellow

Three different colors, with icons
<a href="" class="button classname"><small class="icon classname"></small><span>Button with icons</span></a>
red green yellow

If you want to submit a form with a stylish button:
Add the button inside the form, like this:
<a href="" class="button form_submit" ><span>Submit</span></a>

And add "novisible" class to the normal submit button, to hide it:
<input type="submit" value="Submit" class="novisible" />

Other options:
<a href="" class="button option"><span>Coloured button</span></a>

  • right: if you want to align the button right instead of left
  • mt: 10px top margin
  • mb: 10px bottom margin
  • ml: 10px left margin
  • mr: 10px right margin
  • italic: italic text


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


You can change the width by the class attribute, (w_1 to w_40) and you need to add class="text" attribute to the input.

As you can see, this is a little different solution, but this is use Javascript, so the html code is basicly the same, like a normal checkbox:
<input type="checkbox" class="checkbox" name="first_checkbox" checked="checked">
The only thing, you can pay attention is the class name, you need to add "checkbox", the rest is Javascript, you don't need to care about that, its just works.
If you need the default checkbox for some reason, just remove the class attribute.

Radio #1
Radio #2
Radio #3

When you build a form, follow this structure:

		<input />
		<br />
		<input />
		<br />

Layout options
The default layout is label, and below the form element. If you want to side-by-side, just add class="left" attribute to the label.


Th #1 Th #2 Th #3 Th #4 Th #5 Th #6
Lorem Ipsum Dolor Sit Amez Consectetur
Lorem Ipsum Dolor Sit Amez Consectetur
Lorem Ipsum Dolor Sit Amez Consectetur
Lorem Ipsum Dolor Sit Amez Consectetur
Lorem Ipsum Dolor Sit Amez Consectetur
Lorem Ipsum Dolor Sit Amez Consectetur
Lorem Ipsum Dolor Sit Amez Consectetur
Lorem Ipsum Dolor Sit Amez Consectetur
Lorem Ipsum Dolor Sit Amez Consectetur
Lorem Ipsum Dolor Sit Amez Consectetur

The end...