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!
Springfield Template is built using Bootstrap v3.1.1 framework: Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder. The main HTML folder consists of 4 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 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 Bootstrap v3.0.0 framework. The general template structure is the same throughout the template. Here is the general structure.
Below are the general HTML structure of all pages.
Each section further described in Explaining every section
The theme comes with CSS (stylesheet) files grouped in the css folder:
1. bootstrap.css Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
2. style.css is the main CSS file containg the layout styling of the pages.
3. font-awesome.min.css contains the iconic font style.
4. owl.carousel.css contains style owl touch slider
5. animate.css contains style for content animation
6. YTPlayer.css contains style YTPlayer plugin
7. cubeportfolio.css contains style for portfolio plugin
8. jquery.bxslider.css contains style for bxslider plugin
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 Montserrat google fonts and Raleway google fonts.
This template is heavily 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 theme.js. The script.js file is responsible for the main functions and all slider initialization script.
This section explains how every page section is implemented.
The navigation menu, Div containing id "fixed-navbar" contains nav tag brand logo and navigation menu.
navigation menu visibility control by JavaScript function. The smooth scroll effect is controlled by jQuery plugin. The screenshot below explains code for fixed menu.
All navigation menu style contains in style.css file
Div containing id "home" contains fullscreen background image with parallax background image and Text slider on center of the screen. Div containing id "slider-home" contains home text slider. on scroll parallax effect is control by custom javascript in script.js file and jquery plugin.
Below are the general HTML structure home section.
All home page style contains in style.css file.
All html in this section is nested within a section with an id of "about". About section contains:
Div containing id "about" contains about us section heading and sub-heading text. Article id "about-intro" contains abous us intro block with icon, text title. Unordered list id "intro-blocks" contains individual intro block with on click of the block Intro Detail show on bottom of the block. Used jquery plugin and custom javascript in about us section. Below are the general HTML structure for about us section.
All styles for this section in style.css style
All html in this section is nested within a section with an id of "who-we-are".
Div containing class "skills-col" contains individual skill bar with text and percentage. Used custom javascript and jquery plugin. Below are the general HTML structure for this section.
All styles for this section in style.css style
All html in this section is nested within a section with an id of "fun-facts".
Div containing class "fact-container" contains individual facts number and text title. Below are the general HTML structure for this section.
All styles for this section in style.css style
All html in this section is nested within a section with an id of "quotes-separator" with parallax background image.
Div containing id "quotes-slider" contains individual quotes slider. Used jquery plugin for parallax effect and quotes slider. Below are the general HTML structure for this section.
All styles for this section in style.css style
All html in this section is nested within a section with an id of "team".
Div containing class "team-member" contains individual team member with image, title, sub-title and social icon links. Below are the general HTML structure for this section.
All styles for this section in style.css style
All html in this section is nested within a section with an id of "video-separator".
Div containing id "fluid-width-video-wrapper" contains iframe which holds vimeo video. Below are the general HTML structure for this section.
All styles for this section in style.css style
All html in this section is nested within a div with an id of "services". Service section contains:
Div containing class "serviceBlock" contains individual service block with icon and service name. Below are the general HTML structure for service block.
data-reveal-id link to open detail in overlay. All service block detail section are palced below body in div containing class "service-detail-wrapper" with clear comments. below are the general HTML structure for detail view for service block.
DIv id "service01" link to anchor tag in first service block. same way div id "service02" links to anchor tag with second service block same way all service block with anchor tag link to individual detail block. when click on service name the respective detail view is open in popup. Popup block contains icon, service description with previous and next service detail navigation SVG icon and close button to close popup block.
DIv class "close-reveal-modal" contains close button. Unordered list class "nav_modal" contains previous and next nav with anchor tag link to respective detail block with attributes "data-reveal-id".
All style contains in style.css file
All html in this section is nested within a section with an id of "how-we-work" with parallax background image.
Div containing class "process-b" contains individual process block with text and icon. Below are the general HTML structure for this section.
All styles for this section in style.css style
The next code shows an example of works/portfolio grid. All html in this section is nested within a div with an id of "portfolio". Below are the general html for work section.
Portfolio section contains following blocks
All work/portfolio styles in cubeportfolio.css and style.css file
Used jquery plugin jquery.cubeportfolio.js for portfolio section.
All html in this section is nested within a section with a class "client-logo" . Div containing id "clients" contains clients slider images. Below are the general HTML structure for client section.
All style contains in style.css style
Div containing id "testimonial" contains testimonial slider with parallax background image. Use custom javascript and jquery plugin for testimonial slider. Below are the general HTML structure.
All style contains in style.css style
All html in this section is nested within a section with an id of "price-list" . Four column block contians price info, text and sign-up button. Below are the general HTML structure for Price list section.
All style contains in style.css style
All html in this section is nested within a div with an id of "contact-adderss". Div containing class "contactBlock" contains individual contact block for address, contact number and email address with icon and title text. Below are the HTML structure of blog section.
All style contains in style.css style
All html in this section is nested within a div with an id of "contact-form" with background parallax image. Form tag containing an id "contactform" contains name, email, phone and message textbox. Use custom javascript and ajax for form submit. email.php script used for sending mail. Below are the HTML structure of contact form section.
All style contains in style.css style
All html in this section is nested within a div with an id of "img-gallery".
Div containing id "gallery" contains image slider. Below are the general HTML structure for gallery slider.
All style contains in style.css file
All html in this section is nested within a div with an id of "footer".
Below are the general HTML structure for footer section which contains copyright notes and footer menu.
All style contains in style.css file
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 relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
please feel free to send me a message here: abmathasuriya on ThemeForest.