Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my ThemeForest user page contact form. Thanks so much!
Indelight is an HTML Portfolio Template equipped with sleek jQuery effects and unique layout. What really makes this template stand out is its Home Page with laid out pictures grid that slide nicely across the entire screen. The theme comes with clean and friendly html code so you can customize it to any extend (whether you decide to put the theme behind any CMS or use it as is).
NOTE! This is a site template. You'll need to convert it to a WordPress Theme if you want to use it as a skin for WP.
The title and menu items are located on the bottom navigation section. Look up class="logo" in the HTML file to find the title. Simply type your own title instead of original one and save the changes. Look up the class="menu" to manage the navigation items. Note, the main tabs contain Java Script javascript:void(0) instead of a destination URL and a rel="some name here" to define the name of the section which loads corresponding content inside the iFrame.Social icons are generated via class="submenu" and all you need to do is to type the destination URL for each of them.Collection categories are generated via class="sub_tabs". Note, there is a rel="n", where n means the id of the sub-collection item. If you want to add more items to the sub-collections, then you'll need to duplicate the <li>..</li> elements and update rel parameter.
<div class="menu_line_bot"> <div class="menu_block"> <a href="#" class="logo">Indelight</a> <ul class="menu"> <li class="act"><a href="javascript:void(0)" rel="home">Home</a></li> <li><a href="javascript:void(0)" rel="collection">Collections</a></li> <li><a href="javascript:void(0)" rel="whats_new">What's new</a></li> <li><a href="javascript:void(0)" rel="services">Services</a></li> <li><a href="javascript:void(0)" rel="about">About</a></li> <li><a href="javascript:void(0)" rel="contact">Contacts</a></li> <li class="follow"><a href="javascript:void(0)" rel="follow">Follow Us</a> <div class="d-submenu"> <ul class="submenu"> <li><a href="#" class="ico_rss ico_ani"></a></li> <li><a href="#" class="ico_t ico_ani"></a></li> <li><a href="#" class="ico_f ico_ani"></a></li> </ul> </div> </li> </ul> <ul class="sub_tabs"> <li><a href="javascript:void(0)" rel="1" class="act">Collection 1</a></li> <li><a href="javascript:void(0)" rel="2">Collection 2</a></li> <li><a href="javascript:void(0)" rel="3">Collection 3</a></li> </ul> </div> </div>
If you want to change the font type, font size or any other font parameters for the title, then open style.css file (inside /css/ directory) and look up the line 26 which contains the code shown below:
.menu_block
.logo {
color:#000000;
line-height:50px;
font-size:32px;
font-family:'GronzCondensedHeavy';
top:0;
left:39px;
position:absolute;
text-transform:uppercase;
text-decoration:none}
Header slider currently uses 6 pictures sized to fit 900 x 600. The pictures are laid out in a grid of 2 rows and 3 columns. The slider is capable to contain 2 rows ONLY with UNLIMITED number of columns.
Look at the code below to see the slider code sctructure. As you can see there are 2 <li>..</li> elements where each of them represents corresponding row of images in a slider. All you have to do is to update the image path URL's to a new ones (in case of change) or/and add extra <img> elements to define more images. Keep the quantity of images in each row equal. Otherwise, the images grid and slider animation will look unprofessional.
All slider images are located in /img/slider/ directory.
<div class="main_slider_hidder"> <div class="main_slider"> <img src="img/slider/slider_pic1.jpg" alt="" /><img src="img/slider/slider_pic2.jpg" alt="" /><img src="img/slider/slider_pic3.jpg" alt="" /><br /> <img src="img/slider/slider_pic4.jpg" alt="" /><img src="img/slider/slider_pic5.jpg" alt="" /><img src="img/slider/slider_pic6.jpg" alt="" /><br /> </div> </div>
Required image size.You don't necessarily have to make your pictures fit 900 x 600 exactly. Mind, all pictures must be EQUAL in size dimensions. If you are going to make the image size different to original (900 x 600), then you will have to define the image size in a style.css file (on line 22):
.main_slider img { width:900px; height:600px;}
There are 3 sub-categories under Collections. All images are located in /img/gallery/ directory. Each collection has 2 views - thumbnail and full image view. All thumbnails are located in /img/gallery/thmb directory. Note, each image has its black-and-white clone picture that represents inactive view. Color picture represents active (on hover) image mode.
Look up the code for collections inside index.html file on line 65. There are 3 collections, let's look inside the code for the first one on line 74. As seen from the example below, each item in a collection is presented by a <li> ... </li> element inside class="collection_ul". Add more items by duplicating the <li> element and pasting into desired place and by changing the image path URL, updating "rel" parameter (stands for the order), title and description.
We'd recommed you to name images with prefixes or suffixes to recognize the names/ids of collections they belong to.
<div id="collection1" class="sliderkit collection_block"> <div class="sliderkit-nav"> <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#"></a></div> <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#"></a></div> <div class="sliderkit-nav-clip"> <h1>Collection 1</h1> <ul class="collection_ul"> <li> <a href="img/gallery/pic_collection1.jpg" onclick="return false" rel="1"><img src="img/gallery/thmb/pic_collection1.jpg" alt="" width="230" height="130" class="color" /></a><br /> <h2>ipsum auctor pulvinar</h2> Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. </li> <li> <a href="img/gallery/pic_collection2.jpg" onclick="return false" rel="2"><img src="img/gallery/thmb/pic_collection2.jpg" alt="" width="230" height="130" class="color" /></a><br /> <h2>Vestibulum iaculis</h2> Sed ut perspiciatis unde omnis iste natus error sit voluptatem ccusantium. </li> ....... </ul> <div class="clear"></div> </div> </div> </div>
There is style.css file for Indelight Template which is located in /css/ folder and contains main style settings. If you open it you may notice that it has the specific stylings for page elements and fonts. Note, by editing a style you will apply the changes to the elements that use this particular style all over the website.
Please note that CSS file can be edited in any HTML editor.
There are additional .css files that determine settings for slider plugins.
The following theme comes with custom and home-made jQuery plugins and effects except for the following ones:
Once again, I would like to say "thanks" to the developers of these products, they did a good job. You can easily find the technical documention about the use of these scripts on their official web sites.
There are 7 PSD files included within the theme:
Thanks a bunch for the good products to the following developers:
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 related to this theme. No guarantees, but I'll do my best to assist. You can always drop me a line to my email which is help at themedev dot me
Mad_Dog ;)
With any question or queries, join our support forums at http://forums.themedev.me
To register on our support forums you must have "purchase confirmation code" that is located in your ThemeForest account on the downloads page called “Licence Certificate”. Open this text file and retrieve the purchase code from it.
Input the purchase code on http://forums.themedev.me/register.php to get verified. Once done, feel free to submit question.
Do you love free stuff and handy things that make your life better? Access our tiny but growing collection of ThemeDev free resources to download great stuff.
Mad_Dog ;)