You should find the following folders in the download pack:
Key features of the template:
Stylesheet files are located inside the /css folder.
For each CSS element styled (except those in the jquery-ui.css file), its properties are ordered following the alphabet convention. See example below:
Exceptions: vendor-specific properties go right after the main property that they describe. See example below:
If you want to put margin on an HTML element but there is no need for a specific class to be added, you can use any of these:
Adding a fancy button is easy - wrap some text in a span, then wrap the span in an anchor tag with one of the following classes: button-more, button-go, button-add, button-tag, button-read. Below is an exemplary HTML code for the button-more class:
Here is the outcome from the code above, for each of the classes:
You can also use one of the predefined classes for image shadows - wrap the image inside a container (anchor, div, paragraph...) with one of the following classes .shadow-80, .shadow-290, .shadow-640, .shadow-940. The image width will be adjusted according to the class. Below is an example for the .shadow-290 class.
After you replace the logo , don't forget to change the width. No need to touch the height though:
You can easily move the sidebar to the left - find the line starting with the comment /* Layer framework */. See the image below for what changes are needed - at the top is Before (right sidebar) and below is After (left sidebar).
The template uses Cufon for font replacement of some headings and titles via the Cufon.replace() method, called inside the /js/main.js file. The font used for font replacement is Vegur (refer to the Fonts section for fonts used in the template).
If you don't want an h1, h3 or h4 heading to have its font replaced by Cufon, just add a nocufon class to it.
JavaScript code is located inside the /js folder.
The template uses the jQuery JavaScript library.
Below are listed plugins used. Most of them are located inside the /js/plugins.js file, except for /js/jquery-ui.js (included only on the Contact page) and /js/cufon-yui.js (too crowded file for most text editors).
At the beginning of the /js/main.js file there is the Twitter section. Change the value of the twiterName variable and that is all you need to do.
Both sliders are programmed to stop the slideshow whenever a users hovers a slide or the slider controls.
The index.html page contains the Coin slider from CMT Studio. For each slide you only need to setup the heading text, description (can be a list like in the demo) and image source - the slider controls are automatically added. Unlike the Paper slider, the Coin slider needs images with exact dimensions of 380x260px.
Just like the Paper slider, you can also edit the slideshow speed or decide how long a transition takes.
The index_alt.html page contains the Paper slider from CMT Studio. For each slide you only need to setup the image source and the text - the slider thumbnails are automatically added. The image can overflow the slider in both height and width without a problem.
Inside the /js/main.js file you can edit some of the options for the slider, such as the slideshow speed or the transition method (choose between "hide" or "fade" for the last one):
Note that you can change the height of the thumbnails inside the /css/default.css file. Just remember to set #p-carousel li height to be 6px larger than the #p-carousel a height.
Buy the template to view this section
For the image sliders refer to the Image sliders section.
For the services tooltips refer to the Tooltips and image previews section.
The services tabs use anchors which link to the id of a li element - the same way the Table of Contents links on this page work. See the image below.
The first tab is set as active with JavaScript, so no additional work is required: just change the anchor href and list id attribute per your needs - the tabs also work with JavaScript disabled.
Each item in the list is labeled with numbers - for that purpose the list items contain span tags with classes from numb-1 to numb-9, plus numb-0 if you need it for some reason.
Buy the template to view this section
For dialog image previews (at the beginning and end of the single blog post) see Image previews in the Tooltips and image previews section.
For fancy buttons (at the end of the single blog post) and image shadows see Global classes in the CSS Basics section.
Each blog comment can be nested, to visualize which comment is a reply to which. For this purpose blog comments are wrapped in lists, which could have a class of nest1, nest2, nest3... to nest8.
Buy the template to view this section
Just add a link to the theme stylesheet file after the link to default.css and it's done!
The /css/theme-xxx.css files use images that are included inside the /images/theme-xxx/ folder.
Buy the template to view this section
The colored numbers in the About page use the Adobe Garamond font. All numbers (0-9) can be found in the _Colored Elements.psd file, located inside the 24 Carats - Silver Edition (PSD) folder.
In case of not having the Adobe Garamond font you can use the Times New Roman font instead, but changing the colors does not require editing the type - see the Changing the skin » Creating and using your own skins section, step 2.
For JavaScript (jQuery) plugins used see the JavaScript basics section.