Dioxide HTML Documentation

Quick Navigation:

Dimensions
Spacing
Colors
HTML Structure
CSS Structure
Adding Slider Items
Adding Portfolio Items
Fonts
Legal
Scripts
More Help

This is a very basic documentation to get you off your feet with some simple facts about Dioxide.

Dioxide is a beautiful, crisp theme. This is the file strcuture:

Documentation (/doc)
Theme files (/www)
- Home page (index.html)
- Portfolio (portfolio.html)
- Blog (blog.html)
- Individual blog post (post.html)
- About (about.html)
- Contact (contact.html)
- Mail (mail.php)
- Javascript (/js)
- Images (/images)
PSD files (/psd)

Dimensions

Width - 960px
Menu height - 50px
Header height - 150px
Total header height - 200px
Home page portfolio items - 630px by 500px
Portfolio items - 630px by 300px
Contact page avatars - 300px by 150px

Spacing

For the most part, margins between things are 20px
Space between ends of the body are 50px
Most spacing under titles are 40px

Colors

Titles, bold text, links - #1a160d
Regular text - #4c4326
Menu text (inactive) is 60% - #ffffff
Active and hover is 100% - #ffffff
Footer text - #ffffff

HTML Structure

<!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, Stylesheets, Scripts &amp; IE6 PNG Fix
</head>

<body>

<div id="header">

Menu, Navigation, Header
</div>

<div class="body">

Body
The division for the Body is set to a class of "body" because index.html has special properties in a body ID.
</div>

<div id="footer">

Footer
</div>

</body>
</html>

CSS Structure

/* reseting elements: */

/* global */

/* header */

/* body */

/* window */

/* window slider */

/* portfolio */

/* blog */

/* post */

/* about */

/* contact */

/* footer */

Adding Slider Items

Adding slider items to the home page (index.html) is simple and intuitive. In the ul within the div #window-slide (line 67), simply add this line:

<li><img src="image destination" alt=""/></li>

Adding Portfolio Items

For each portfolio item you add, make sure to include this code within the div .container within the div .body:

<div class="portfolio-item">
	<div class="portfolio-description">
		<h1>Title.</h1>
		<p>Description. <a href="#">Link Location</a></p>
	</div>
	
	<div class="portfolio-image" id="portfolio-image-id number">
		<div class="portfolio-image-slider">
			<ul>
				<li><img src="image location" alt=""/></li>
				<li><img src="image location" alt=""/></li>
			</ul>
		</div>
		
		<div class="portfolio-control">
			<a href="#" class="prev" id="prev-id number"></a>
			<a href="#" class="next" id="next-id number"></a>
		</div>
		
		<div class="portfolio-hover"></div>	
	</div>
	
	<div class="clear"></div>
</div> <!--/.portfolio-item-->

The ID number should correspond to the item, for example, the third portfolio item should have an ID number of three (3). Make sure all the ID numbers within a single portfolio item are the same.

<script type="text/javascript">

$(document).ready(function() {
	$('#portfolio-image-1').twirlie({prevSel:"#prev-1", nextSel:"#next-1"});
	$('#portfolio-image-2').twirlie({prevSel:"#prev-2", nextSel:"#next-2"});
	$('#portfolio-image-3').twirlie({prevSel:"#prev-3", nextSel:"#next-3"});
	
	Add a new line for each new portfolio item
		
	$('#portfolio-image-id number').twirlie({prevSel:"#prev-id number", nextSel:"#next-id number"});
});

</script>

Fonts

Images used in portfolio samples are not for commercial use, they are copyright their respective owners and are used for demonstration only. The only font used is Helvetica, which comes with every Macintosh computer. If you do not have Helvetica, Arial is very similar and will do just fine.

Legal

The images which are used in the portfolio screenshots are all Creative Commons commercially licensed, they can be found individually here:

The map in the footer can be found here.

Scripts

This theme uses the Twirlie slider, and the DD_belated PNG fix for IE6.

More Help

For more help leave a comment in the item discussion or contact us through our profile. For legal assisstance, contact envato support.