By: WOWThemes.net
Email: wowthemesnet@gmail.com
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us!
This theme has a responsive layout, based on Skeleton framewrok. The grid is a variation of the 960 grid system.
The main HTML structure for a left sidebar layout:
<div class="container"> <div class="three columns"> Sidebar's content here </div> <div class="nine columns"> Main content here </div> </div>
The main HTML structure for a right sidebar layout:
<div class="container"> <div class="nine columns"> Main content here </div> <div class="three columns"> Sidebar's content here </div> </div>
The main HTML structure for a two columns layout:
<div class="container"> <div class="six columns"> Content here </div> <div class="six columns"> Content here </div> </div>
The main HTML structure for a three columns layout:
<div class="container"> <div class="one-third column"> Content here </div> <div class="one-third column"> Content here </div> <div class="one-third column"> Content here </div> </div>
The main HTML structure for a full width layout:
<div class="container"> <div class="twelve columns"> Content here </div> </div>
This theme is using 2 basic stylesheets: style.css and styleresponsive.css. There is a different stylesheet for skins, in this case "blue". To change it with your a different one, open index.html and find in head:
<!-- Skin (you can set a different color skin here - just change the name of the color) ================================================== --> <link rel="stylesheet" href="stylesheets/skins/blue.css">
Replace "blue" with your chosen color. That's all.
Here is an example where we change our theme's skin color to black:
<link rel="stylesheet" href="stylesheets/skins/black.css">Tip: if you are not decided which color you should use, open "skinsdemo" folder and take a look at the snapshots.
This theme includes a single HTML page, split in sections. Each menu link relates to a section.
In example, the "our guarantee" menu link relates to "our guarantee" section:
This is the menu link:<li><a href="#guarantee">Our Guarantee</a></li>
This is how the section begins:
<div class="container" id="guarantee">
Notice the id ("guarantee") has the same name as the link.
So if you change the name of the link, remember to change the name of the id, too and make them identical.
Let's say you want to create a new section, called "Prices". The menu link would be:
<li><a href="#prices">Our Prices</a></li>And the content would be:
<div class="container" id="prices"> <div class="twelve columns"> content here </div> </div>
I have used a full width layout in this example, but you can use any layout you like, see HTML structure above for more.
This theme uses the following Javascript files.
Peel & form settings are explained below, in their own sections.
I've included three psds with this theme:
Both forms are working, but you must set your e-mail address first.
Contact form - open processcontact.php from. Find: youremailhere@gmail.com and replace it with your own email address.
Newsletter form - open processnewsletter.php and do the same.
This is the top right corner effect that looks like a page from a book being opened.
Step 1 - Replace the image "large.jpg" from "peel" folder, with your own advertising image. There is a psd file called "large" in psd folder if you want to simply modify the existing image. If you choose to modify the psd, save the edited image for web and devices as "large.jpg" and place it in "peel" folder.
Step 2 - Open peel.js. Lines: 3, 4, 5, 10 and 11 require modification (use notepad ++ , it's free):
Line 3 -> replace http://www.yourwebsite.com with your website's link:
jaaspeel.ad_url = escape('http://www.yourwebsite.com');
Line 4 -> replace http://www.yourwebsite.com with your website's link:
jaaspeel.small_path = 'http://www.yourwebsite.com/peel/small.swf';
Line 5 -> replace http://www.yourwebsite.com with your website's link:
jaaspeel.small_path = 'http://www.yourwebsite.com/peel/small.swf';
Line 10 -> replace http://www.yourwebsite.com with your website's link:
jaaspeel.big_path = 'http://www.yourwebsite.com/peel/large.swf';
Finally, Line 11 -> replace http://www.yourwebsite.com with your website's link:
jaaspeel.big_image = escape('http://www.yourwebsite.com/peel/large.jpg');
Important! In each line,replace www.yourwebsite.com with your relative path of your website, not the root domain. Example, if your site's path is http://www.games.com/toys:
jaaspeel.big_image = escape('http://www.games.com/toys/peel/large.jpg');
If you want to remove the page peel, open index.html, find and delete:
<script src="peel/peel.js"></script>
WOWThemes.net