- Due to local security restrictions, some things will not work locally, especially in Chrome. But everything will work once the files have been updated to your website.
- Use Firebug or Chrome Developer Tools.
- Do not start from scratch, use an existing page from the demo and modify it to learn how it works.
- Explore the live demo for pages ideas and sample code.
- css (Template CSS)
- less (LESS FILES)
- themes
- img (All Images)
- js (Theme JS files)
- php (PHP Helpers - I.E: Contact Us form.)
- vendor (All external libs. We keep all of them in this folder to make updates easily.)
The template is based on Bootstrap Framework - http://twitter.github.com/bootstrap/
The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
The code is well commented
- styles.css - (general styles) - less/styles.less - (LESS MAIN FILE)
- less/variables.less - (LESS GENERAL MIXINS/VARIABLES FILE)- less/theme-builder.less - (you can use this file to easily create your own skins)
jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/
The initialization of the elements, libs and features is made by the file main.js, in the JS folder.
You can use our premade skins on "css/themes" folder or use "css/theme-builder.less" file to make your on. You can compile the less file on this page: http://winless.org/online-less-compiler
To learn about LESS, visit this page http://lesscss.org/
To change the embedded font, please take a look in the head part of the website and you will find this tag:
|
1
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css"> |
To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.
Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.
If you need more information, please visit this site: http://fortawesome.github.com/Font-Awesome/
<i class="fa fa-search"></i><i class="fa fa-facebook"></i>LightboxThe filter is driven by the Nivo Lightbox script. For more information check http://dev7studios.com/plugins/nivo-lightbox/ |
Regarding contact form as main part of Contact section, only thing you need to do is to setup your email address.
To do this, please open "php/contact-form.php" file and change this line:
|
1
|
$to = 'you@domain.com'; |
One notice: this will be functional only on your server, php file can not be executed on your local computer.
The template supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions:
Label: Desktop
Layout width: 1200px and up
Label: laptop
Layout width: 992px and up
Label: tablet
Layout width: 768px and up
Label: mobile
Layout width: 240px and up
The images included in preview are for demonstration purposes and should always be replaced with your own work. They are not included on this download.
Images (Demo only):
Shutterstock (John Rex example only)
If you need pictures please visit http://photodune.net/
Subtle Patterns: http://subtlepatterns.com/
Google Fonts - http://www.google.com/webfonts
Icons Font-face - http://fortawesome.github.com/Font-Awesome/
Scripts:
jQuery - http://www.jquery.com/
Bootstrap Framework - http://twitter.github.com/bootstrap
Nivo Lightbox - http://dev7studios.com/plugins/nivo-lightbox/
Modernizr - http://modernizr.com/
Jquery Easing - http://gsgd.co.uk/sandbox/jquery/easing/
Jquery Validate - http://bassistance.de/jquery-plugins/jquery-plugin-validation/
bxslider - http://bxslider.com/
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions.