ElectriX HTML template

Created: 20.10.2017
By: MWTemplates
Email: support@modernwebtemplates.com

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email us via my user page contact form. Thanks so much!


Download Package Content

You can find the following folders in the download package

  • "documentation" folder contains this documentation.
  • "HTML" - folder contains actual template with all of HTML, JS and PHP files. It's content will be displayed below.
  • "PSD" folder contains all of PSD files.

HTML folder content

  • "css" folder contains CSS files. You can find out more about CSS files in HTML Structure section of this documentation.
  • "fonts" folder has all of the custom fonts that are used in this template, such as icon fonts, font awesome, social icons etc.
  • "images" folder contains all of the images that are used on the template pages. It has several subfolders:
    • "events" folder contains images for events page.
    • "gallery" folder contains images for isotope carousel galleries and other subpages.
    • "partners" folder contains images for partners carousel.
    • "shop" folder contains images for shop pages.
    • "team" folder contains photos of team members.
  • "img" folder contains all of the images that are used in CSS files for template styling (such as patterns, preloader etc). It also contain "parallax" subfolder with background images for parallax sections.
  • "js" folder contains javascript files that are used in this template. It has "vendor" subfolder that containss all of the thirdpart plugins and libs. Also it has "admin" subfolder which contains Admin Dashboard plugins. Go to Sources and Credits section to get the list of the thirdpart libs and plugins.
  • "mailchimp" folder contains PHP scripts for MailChimp subscribe widget.
  • "twitter" folder contains JS and PHP scripts for Twitter widget.

HTML Structure

This HTML Template is based on Twitter Bootstrap v3.3. It is compatible with a IE9 browser and all other modern browsers.

It has several main section classes that may or may not be present on the page (depending on certain page). You can use it depending on your needs. They are:

  • "ls" - light_section - section with white background.
  • "ls ms" - light_section muted_section - section with light grey background.
  • "ds" dark_section - section with dark grey background.
  • "ds ms" - dark_section muted_section - section with dark background.
  • "cs" - color_section - section with the main template color background.

Also there are some of predefined unique sections (class and id attributes) that you can use with classes above:

  • "page_topline" class - contains some contact information, social icons etc.
  • "page_toplogo" class - contains logo in various header layouts.
  • "page_header" class - contains site Main Menu.
  • "intro_section" class - contains homepage main slider.
  • "page_map" class - contains google map.
  • "page_breadcrumbs" class section - contains site navigation (breadcrumbs).
  • "page_content" class section - used for main content section.
  • "page_footer" class section has footer widgets.
  • "page_copyright" class section contains copyright information.
  • "preloader" div element that is located at the bottom of HTML page is a page preloader. Remove it if you do not need a preloader on your pages.

CSS Files and Structure

There are several main CSS files in this HTML Template. They are located in "css" subfolder

CSS Libraries:

Template CSS files:

  • dashboard.css - CSS file contains all styles for admin dashboard pages.
  • shop.css - CSS file contains all styles for shop WooCommerce ready pages.
  • "main.css" file is a main template file. It contains all of the specific stylings for the pages.

The "main.css" file is separated into the following sections:

  • Bootstrap Overrides - here we override some of the predefined bootstrap styles.
    • columns
    • container
    • breadcrumbs
    • pagination
    • forms
    • carousel
    • accordion
    • progressbar
    • navs and tabs
    • tables
    • etc.
  • General Styles for HTML tags
  • Styled Lists
  • Buttons
  • JQuery Plugins - Styles for plugins that we used in our template:
    • Owl Carousel
    • FlexSlider
    • prettyPhoto
    • Easy pieChart
    • Time Table
    • toTop
    • Countdown
  • Vertical Margins and Paddings - here we set up vertical margins and paddings for the main sections of our HTML Temlpate.
  • Common Sections Styles
    • parallax
    • page preloader
    • animated elements
    • boxed layout
  • Helper Utilites - some helper classes for margins and paddings etc.
    • layout
    • borders, colors and backgrouns
    • dividers, margins and paddings
    • alignment
    • media items
  • Header
  • Side Header
    • side header layout
    • side menu styles
    • sidebar scroll plugin
  • Light Section - .ls
  • Grey Section - .ls.ms
  • Dark Sections - .ds
  • Color Section - .cs
  • Template Specific Styles
    • topline styles
    • toplogo styles
    • title section (breadcrumbs) styles
    • template parallax sections
    • footer styles
    • copyrights styles
    • google map
    • intro slider inside content
  • Intro Section Styles - styles for template header
  • Main Menu - styles for the template main menu.
    • Desktop menu
    • Mobile menu
    • Mobile menu toggler
    • Mega Menu
  • Subpages
    • 404
    • about
    • blog
    • single post
    • gallery
    • post formats
  • Widgets - in this sections we styled all the major widgets.
    • common widgets styles
    • search_mailchimp
    • nav_recent_categories
    • tags
    • popular
    • recent_posts
    • calendar
    • banner
    • slider
    • flickr
    • instagram
    • twitter
    • post_tabs
    • rss
    • access_press
  • Shortcodes - in this section we styled all of template's shortcodes.
    • teasers
    • testimonials
    • thumbnail
    • price tables
    • contact forms
    • partners_carousel
  • Social Icons
    • layout
    • corporate colors

Template CSS files (main.css, shop.css and dashboard.css) also has versions with number at the end of the name (ex. main2.css). This files contains same styles as original ones but with different predefined accent color (aka color schemes).


Changing template layout

To change template layout from wide to boxed you need to do two things:

  1. add "boxed" class to div with ID "canvas" HTML element
  2. add "container" class to div with ID "box_wrapper"

Example:

<div id="canvas" class="boxed"> 
	<div id="box_wrapper" class="container"> 
		... 
	</div>
</div>

To add pattern in boxed layout just add one of the following predefined CSS classes to div with ID "canvas" HTML element:

  1. pattern1
  2. pattern2
  3. pattern3
  4. pattern*

Example:

<div id="canvas" class="boxed pattern2"> 
	... 
</div>

To add top and bottom margins for boxed version just add class "top-bottom-margins" for div with id "box_wrapper"

Example:

<div id="canvas" class="boxed"> 
	<div id="box_wrapper" class="container top-bottom-margins"> 
		... 
	</div>
</div>

Changing the main color

If you want to change the main color for this template, just replace all instances of main color hex code with hex color value that you want inside the "main.css" file.

Also you can change "main.css" to "main2.css" or "main3.css" (also "shop2.css" and "dashboard2.css") in your HTML code inside "head" tag which are the same with the exception of predefined colors within it.

Example:

<link rel="stylesheet" href="css/main2.css">
<link rel="stylesheet" href="css/shop2.css">
<link rel="stylesheet" href="css/dashboard2.css">

Changing Light and Dark versions

You can change a class for any section inside "#box_wraper" div to change your template version from light to light grey or dark.

Available section classes are:

  • ls - light background section
  • ls ms - light section, muted section (light grey background)
  • ds - darkgrey background section
  • ds ms - dark muted section (dark background section)
  • cs - color background section

Examples:

<section class="ls" id="content"> 
	... 
</section>

You can change to:

<section class="ds ms" id="content"> 
	... 
</section>

Changing page preloader

To change page preloader just replace preloader.gif file which is in img directory to any other GIF file.


JavaScript Files

Following files are located in "js" subfolder

Vendor Plugins: ("js/vendor" subfolder)

Admin Dashboard vendor plugins ("js/admin" subfolder):

Template Scripts:

  • plugins.js contains some of our custom jQuery plugins.
  • admin.js inits all the plugins in admin dashboard pages.
  • main.js inits all the basic behavior for this template.
  • switcher.js has a code for style switcher. Used only in demo.

All of JS files (except "main.js", admin.js and "switcher.js" ) are compressed in a single "compressed.js" file for best perfomance.

If you do not want to use "compressed.js" file, you can replace following code at the bottom of your page:

	<script src="js/compressed.js"></script>
	<script src="js/main.js"></script>

with this one:

	<script src="js/vendor/jquery-2.2.4.min.js"></script>
	<script src="js/vendor/bootstrap.min.js"></script>
	<script src="js/vendor/jquery.appear.js"></script>
	<script src="js/vendor/jquery.hoverIntent.js"></script>
	<script src="js/vendor/superfish.js"></script>
	<script src="js/vendor/jquery.easing.1.3.js"></script>
	<script src="js/vendor/jquery.ui.totop.js"></script>
	<script src="js/vendor/jquery.localscroll-min.js"></script>
	<script src="js/vendor/jquery.scrollTo-min.js"></script>
	<script src="js/vendor/jquery.parallax-1.1.3.js"></script>
	<script src="js/vendor/jquery.easypiechart.min.js"></script>
	<script src="js/vendor/bootstrap-progressbar.min.js"></script>
	<script src="js/vendor/jquery.countTo.js"></script>
	<script src="js/vendor/jquery.prettyPhoto.js"></script>
	<script src="js/vendor/jquery.countdown.min.js"></script>
	<script src="js/vendor/isotope.pkgd.min.js"></script>
	<script src="js/vendor/owl.carousel.min.js"></script>
	<script src="js/vendor/jquery.flexslider-min.js"></script>
	<script src="js/vendor/jflickrfeed.min.js"></script>
	<script src="js/vendor/spectragram.min.js"></script>
	<script src="js/vendor/jquery-ui.min.js"></script>
	<script src="js/vendor/price-slider.min.js"></script>
	<script src="js/vendor/jquery.countdown.min.js"></script>
	<script src="js/vendor/jquery.cookie.js"></script>
	<script src="twitter/jquery.tweet.min.js"></script>
	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>

Setup Widgets and Shortcodes.

Widgets and Shortcodes that need to be setup are:

  • Google Map
  • Instagram
  • Flickr
  • Twitter
  • Subscribe
  • Contact form
  • Coming Soon countdown
  • Search

To setup Google Map do the following:

First of all, you need to get a Google map API key by following this link:

Go to https://developers.google.com/maps/documentation/javascript/get-api-key#key,click button "GET A KEY" and follow instructions from Google.

Then scroll to the bottom of your contact page and find this code:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXX"></script>

and replase existing key with your API key.

To provide a Google map address, title, description and marker image do the following:

  • Scroll to section with 'id="map"' or class="page_map" attribute and add or replace value of data-address attribute with your address.
  • Then find inside map section div with class "map_marker_description" and edit following tags:
    • Replace "Map title" text in H3 tag to provide map title.
    • Replace "Map description text" text in P tag to provide map description.
    • Replace "src" attribute of IMG tag with class "map_marker_icon" to change a map marker or remove IMG tag if you do not need a custom map marker.
<section class="page_map" data-address="sydney, australia, Liverpool street">
	<!-- marker description and marker icon goes here -->
	<div class="map_marker_description">
		<h3>Map Title</h3>
		<p>Map description text</p>
		<img class="map_marker_icon" src="images/map_marker_icon.png" alt="">
	</div>
</section>

To setup a Instagram Widget do the following:

  • Register an application at Instagram Developers
  • get a client_id and recieve an access_token.
  • Edit your "main.js" file. Just replace ID with your Flickr ID
  • Pass username if you are using getUserFeed method in your query

You can use "getUserFeed" or "getRecentTagged" methods to show your photos:

// Instagram widget
var Spectra = {
	instaToken: 'YOUR_TOKEN',
	instaID: 'YOUR_ID',

	init: function () {
		jQuery.fn.spectragram.accessData = {
			accessToken: this.instaToken,
			clientID: this.instaID
		};

		//available methods: getUserFeed, getRecentTagged
		jQuery('.instafeed').spectragram('getRecentTagged',{
			max: 8,
			//pass username if you are using getUserFeed method
			query: 'grey',
			wrapEachWith: '
' }); } } Spectra.init();

To setup a Flickr Widget do the following:

  • Go to http://idgettr.com/ and search for your Flickr ID
  • Edit your "main.js" file. Just replace ID with your Flickr ID

To setup a Twitter Widget do the follofing:

  • Go to https://dev.twitter.com/apps and register a new application to receive Consumer Key, Consumer Secret Word, User Token and User Secret Word
  • Edit lines from 27 to 36 of your "twitter/index.php" file. Place your secret keys and words onto the corresponding placeholders.
  • Edit "number of tweets" and "username" in your "js/main.js" file.
  • Delete cache xxx.json file in "twitter" folder if it exists.

To setup a MailChimp Subscribe form do the following:

Edit the "mailchimp/store-address.php" file:

Line 19: replace "your_apikey" with an API Key retrieved from here:

http://admin.mailchimp.com/account/api/

Line 23: replace "my_list_unique_id" with the List Unique Id obtained by going to: http://admin.mailchimp.com/lists/.

Click the "settings" link for the list - the Unique Id is at the bottom of that page.

To setup a Contact Form do the following:

  • Edit lines from 7 to 22 of your "contact-form.php" file. Place your email and message text.

To setup a Coming Soon counter on "comingsoon" page do the following:

  • Open your "js/main.js" in your favorite code editor.
  • Find following line of code:
  • jQuery('#comingsoon-countdown').countdown({until: demoDate});
  • Replace "demoDate" with "new Date(VALUE);":
  • jQuery('#comingsoon-countdown').countdown({until: new Date(VALUE)});
  • "VALUE" is a string ou number in milliseconds. Read more about date format:
  • JavaScript Date documentation
    Online JavaScript date converter
  • Edit lines from 1 to 7 of your "search.php" file. Place your message text at appropriate variables.

Setup Animation for any HTML elements

To set up animation for the single element, just add class "to_animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

Available values for "data-animation" attribute:

  • fadeIn
  • fadeInLeft
  • fadeInUp
  • fadeInRight
  • fadeInDown
  • fadeInUpBig
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig
  • slideRight
  • slideUp
  • slideLeft
  • slideInDown
  • slideInLeft
  • slideInRight
  • expandUp
  • slideExpandUp
  • expandOpen
  • bigEntrance
  • hatch
  • tossing
  • pulse
  • floating
  • bounce
  • pullUp
  • pullDown
  • stretchLeft
  • stretchRight
  • moveFromLeft

Setup Admin Dashboard elements

You can use admin dashboard pages and front end markup with styles to create your custom admin panel (dashboard) for your website or your web app.

All of Admin Dashboard plugins initiation is located in "js/admin.js" file.

Here you can find a code for init following plugins:

You can pass a parameters for SparkLines plugin via data attributes:

<span class="sparklines" 
	data-values="670,350,135"
	data-type="bar"
	data-line-color="#4db19e"
	data-neg-color="#007ebd"
	data-height="60"
	data-bar-width="6"
	>
</span>

Credits and Sources

As we mentioned earlier, we used Twitter Bootstrap v3 as CSS framework and HTML5 Boilerplate for this template.


This template has the following PSD files:

1.1_home.psd
2.1_professors.psd
2.2_professor_profile.psd
2.3_about.psd
2.4_services.psd
2.5_calendar.psd
2.6_faq.psd
2.7_404.psd
2.8_typography.psd
2.9_elements.psd
3.1_courses.psd
3.2_course_sample.psd
4.1_blog.psd
4.2_blog_post.psd
5.1_gallery_fullwidth.psd
5.2_gallery_portfolio.psd
5.3_gallery_standard_grid.psd
6.1_category.psd
6.2_product_page.psd
7.1_contacts.psd

Following images are used in this template:

Images


Fonts:


Template Scripts

Admin Dashboard Scripts