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 abmathasuriya on ThemeForest. Thanks so much!
Before we start, lets take a look on the folder structure of the theme. All individual variant files are placed in the same folder. The main HTML folder consists of 3 more folders for diferent types of theme assets:
This is an HTML theme and doesn't require installation in the traditional meaning of the word. You only need to place the content (HTML files and the three folders) in your prefered web directory
Keep in mind that the folder structure and file/folder names are important for theme to work in correct order.
The theme is based on Foundation framework. The general template structure is the same throughout the template. Here is the general structure.
Below are the general HTML structure of index page.
Each section further described in Explaining every section
The theme comes with 9 CSS (stylesheet) files grouped in the css folder:
1. gumby.css is a framework css
2. flexslider.css contains style for flexslider used in about us and team section
3. font-awesome.css contains the iconic font style.
4. bislideshow.css contains hedaer bislideshow style.
5. owl.carousel.css contains style for owl carousel slider used in testimonial, clients and portfolio detail slider.
6. rotatetext.css contains style for header text.
7. service-grid.css contains style for service grid.
9. style.cssis the main CSS file containg the layout styling of the pages.
10.blog.csscontains style for blog page.
11.component.csscontains style tilted slideshow
The main sections of the style.css are separated by comments and the classes are named with clear names for better understanding and easier navigation.
This theme uses Lato google fonts
This template is loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files are as under:
Some of the jQuery plugins are heavily customized and chages in their files are not recommended.
All JS functions related to the theme content management are placed in script.js. The script.js file is responsible for the main functions like, Menu scroll, Mobile menu, PARALLAX, and all slider initialization script.
This section explains how every section is implemented.
section containing id "menu" contains navigation and mobile menu. Further navigation menu contains logo, social icon and menu links. Div id "logo" contains brand logo. Div id "social" contains social icon links and Unordered list id "nav" contains menu. Div class "mobile-menu" contians menu for small device.
The scroll effect is controlled by jQuery plugin. The screenshot below explains code for navigation.All navigation menu style contains in style.css style with comments like /* NAVIGATION */
Section containing id "header" contians slider with brand logo and hedaer rotated text. Unordered list id "cbp-bislideshow" contains slider. Div class "heaingtext" contains middle logo and header text.
Header text effect style contians in rotatetext.css file. Below are the general HTML structure for header section.
The banner styles are marked under /* HEADER */ in style.css file
All html in this section is nested within a section with an id of id "intro". About section contains:
Below are the general HTML structure of about us section
Div class "ten columns centered" contains about us heading and sub heading. Unordered list id "intro" contains four column introduction block which act as a navigation for about us description slider. Div containing id "desc-slider" contians description slider for about us. Description fullscreen slider contians video and or images with right side small description with previous and next navigation.
Below are the general HTML structure for about section.
All styles for this about us section contains in style.css style and flexslider.css file
The next code shows an example of works/portfolio grid. All html in this section is nested within a div with an id of "works". Work section contains:
DIv containing id "slideshow" contains ordered list tilt slider. The slideshow has a main container with the class and ID “slideshow” and use an ordered list for our slides. Each list item contains a description with a title and a paragraph. It will also contain a division with the class “tiltview” where we will add our screenshots. The classes “col” an “row” will help us set the right layout for the inner anchors. Below are the general HTML structure.
navigation element in our JavaScript which we’ll place right after the ordered list. It will consist of a nav with the right amount of spans.
For tilt slider all the style and animation effect contains in component.css file.
Div containing id "portfolio_detail" contians all portfolio detail of individual thumbnail work. Div id "portfolio1", "portfolio2", "portfolio3" etc.. contains work detail blocks for respective work thumbnail. Each work detail section contains close button to close detail. Work detail section contains single image or image slider or video with work description. Below are the general HTML structure for work detail section.
Div class "grid" contains fullscreen work thumbnail images with work name and small description visible to on hover of individual thumbnail images. On click events of the thumbnail images, respective detail section slideup at top for detail view of the work. Below are the general HTML structure for thumbnail section.
section containing id "intersection" contains testimonial slider. Below are the general HTML structure for client slider
Used custom javascript, Jquery plugin for work section.
All work/portfolio styles in style.css file are commented under /* works */
All html in this section is nested within a div with an id of "services". Service section contains:
Div containing class "grid demo-3" contains individual service block with service name and description with beautiful hover wffect. Below are the general HTML structure for service block.
section id "clients" contains carousel clients slider. Use jquery plugin and javascript for service section. Below are the general HTML structure for client slider.
All style contains in style.css file with comments like /* services */
All html in this section is nested within a div with an id of "team". The HTML consist of a div that contains team section heading, team slider, and skill section.
Div id "team-slider" contains team slider with team images, description and social icon.Below are the general HTML structure for team section.
Div id "skillround" contains three columns skill half circul. Below are the general HTML structure for skill section.
All style contains in style.css style with comments like /* Page sections */ in respective theme.
All html in this section is nested within a div with an id of "blog". Div class "blog" contains mesonary block section with blog tag name, title, date and read more link. article tag contains individual mesonary blog post. Below are the general HTML structure for blog post block.
Div class "post" contains individual blog post. below are the HTML structure of blog section.
All style contains in style.css style with comments like /* blog page */
All html in this section is nested within a div with an id of "contact". The HTML consist of a containers that contains contact from action button to open contact from. Div class "overlaycontact" contains contact form with close button at right top corner. Use jquery plugin and javascript to open and close contact form.
mail.php script contain php code for sending mail from contact form. open get-mail.php in editor and just change email address in get_mail.php save it and upload on live server.
Below are the general HTML structure for contact section.
All style contains in style.css file with comments like /* Contact */
All html in this section is nested within a div with an class of "footer". Below are the general HTML structure for footer section which contains social icons links, address and google map. Div id "showmap" contains custom google map with close button at bottom. On click of the address link google map section visible at bottom of footer section.
All style contains in style.css file with comments like /* Footer */
Once again, 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 abmathasuriya on ThemeForest. Thanks so much!