Created: 04/03/2010
By: ruderic
Email: rudericweb@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This is a single page fixed layout theme. All of the content is nested within a div called "#wrapper".
The header is always positioned at the top of the page. It consists on a div named "#header", that encloses an h1 title (the logo) and an unordered list (main menu).
The welcome text is just a paragraph with an id of "intro".
Next, you can find an unordered list named "portfolio", that belongs to the portfolio galley. Inside each portfolio item, you will find a div called "description" that belongs to the text displayed on mouse over.
Each section of the theme is between ".page" divs.
The bottom part is a div called "#footer".
The body tag is assigned an id of "top" in order to make the "back to top" button work.
If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:
a { color: #someColor; }
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.
I.E.
#wrapper a { color: #someColor; }
So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.
I'm using two CSS files in this theme. The first one contains all of the stylings for the page. Many browser interpret the default behavior of html elements , so it also includes a CSS reset at the top of the file. The file is separated into sections using:
/* === Header Section === */ some code /* === Main Section === */ some code /* === Sidebar Section === */ some code /* === Footer === */ 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.
The second file is the Fancybox stylesheet. It styles the modal window displayed when looking at the portfolio.
This theme imports seven Javascript files.
In order to add a new section to the theme, you will have to create a div with a "page" class and assign a unique id to it. That id is going to be linked at the menu item.
Each section is formed by boxes. You can choose between 3 sizes of boxes (940px wide, 620 and 300). For example, if you want to use a 940px box, you would add a div called "box_940".
By default, every box is assigned a 20px right margin. That is why you will have to add a "last" class to the last box in your section.
Take a look at the "Services" section I created:
The whole section is between a div with a class of "page" and an id of "services".
Then, each sub-section is enclosed by a ".box_300" div. That way, I created 3 boxes of 300px wide.
Finally, the last box is assigned a class name of "last" to remove it's 20px right margin.
If you want to add a normal image, just use the "img" tag.
By default, images will have an 8px border. To remove it, add the "icon" class to the image.
If you want to float the image to the left, add the "left" class to it.
If you want to float the image to the right, add the "right" class to it.
If you want to show a list with links to your social profiles, create an unordered list with a class of "social".
Then, you can choose between 12 websites I provided images form.
Take a look at the example I used:
You have to add a title attribute to the "a" element with the name of the social website.
You can choose between:
This theme includes a functional PHP contact form.
processform.php is the file that sends MIME type emails. Basic PHP knowledge is needed to edit this file. Open it, and write your email account where it is indicated.
If you add a field to the contact form, you will add a "name" attribute to it. At the PHP file, the variable that contains it will be named $_POST['name'].
I've included one PSD file with this theme.
It is a well organized one that contains every element of the theme. The design is based in the 960 Grid System.
Everything is divided into well named groups and layers, so you will find very easy to modify the design.
In order to add slides to the Slider version of this theme, navigate to the index.html file inside the Galeria Slider folder ("Galeria Slider - Light" if you are using the light style).
In line 59 of that HTML file you will find a div called slider. Each image inside it will be used as a slide. Feel free to modify the current ones or add your own ones.
Some of those images have a title attribute. That text will be used as the slide caption.
You can learn more about the Nivo Slider in it's website: http://nivo.dev7studios.com/
You can customize the theme colors to your taste.
As an example, I have included 2 CSS declarations just before the </head> tag. There you can find 2 alternative color schemes, a green and a blue one.
Uncomment the one you want to use, or create a new one and the theme will have a fresh look.
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Ruderic