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!
You can find the following folders in the download package
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:
Also there are some of predefined unique sections (class and id attributes) that you can use with classes above:
There are several main CSS files in this HTML Template. They are located in "css" subfolder
CSS Libraries:
Template CSS files:
The "main.css" file is separated into the following sections:
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
To change template layout from wide to boxed you need to do two things:
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:
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>
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">
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:
Examples:
<section class="ls" id="content"> ... </section>
You can change to:
<section class="ds ms" id="content"> ... </section>
To change page preloader just replace preloader.gif file which is in img directory to any other GIF file.
Following files are located in "js" subfolder
Vendor Plugins: ("js/vendor" subfolder)
Admin Dashboard vendor plugins ("js/admin" subfolder):
Template Scripts:
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>
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:
<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>
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 converterTo setup a Serch widged do the following:
- 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:
- Charts ( Chart Docs)
- Vector Map (Vector Map Docs)
- Events Calendar (Calendar Docs)
- Date Range Picker (Docs)
- Spark Lines (SparkLine docks)
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:
- https://www.shutterstock.com/en/image-photo/pretty-woman-beachwear-throws-money-studio-586701305?src=RUD03Xu87uz_4qdQCwCSbg-6-17
- https://www.shutterstock.com/en/image-vector/vector-wallet-company-logo-design-business-211493413?src=KNk8P-L9xTMFCgIbh9YZMw-1-35
- https://www.shutterstock.com/en/image-photo/diversity-people-connection-digital-devices-browsing-387341530
- https://www.shutterstock.com/en/image-photo/man-counting-money-economy-concept-allocation-344288933?src=RUD03Xu87uz_4qdQCwCSbg-3-45
- https://www.shutterstock.com/en/image-photo/portrait-stunning-blond-student-studio-321704624?src=mT-FNzuLzSPZTJ1vwkKLDQ-5-84
- https://www.shutterstock.com/en/image-photo/portrait-handsome-late-20s-black-man-417800617
- https://www.shutterstock.com/en/image-photo/man-adult-studio-casual-portrait-guy-639529915?src=mT-FNzuLzSPZTJ1vwkKLDQ-29-22
- https://www.shutterstock.com/en/image-photo/people-finances-family-budget-concept-attractive-587565377?src=iQwWHiiF8vrD0t7_YaYBvw-4-74м
- https://www.shutterstock.com/en/image-photo/applying-loan-concept-578154505?src=iQwWHiiF8vrD0t7_YaYBvw-5-10
- https://www.shutterstock.com/en/image-photo/portrait-bearded-hipster-male-red-hat-503537737?src=mT-FNzuLzSPZTJ1vwkKLDQ-21-38м
- https://www.shutterstock.com/en/image-photo/portrait-minded-suited-man-standing-crossed-437484691?src=library
- https://www.shutterstock.com/en/image-photo/business-woman-investment-consultant-analyzing-company-524084893?src=library
- https://www.shutterstock.com/en/image-photo/man-offering-batch-hundred-dollar-bills-521200432?src=library
- https://www.shutterstock.com/en/image-photo/successful-lawyer-giving-consultation-family-couple-519924217?src=library
- https://www.shutterstock.com/en/image-photo/young-family-couple-meeting-bank-worker-626699276?src=library
- https://www.shutterstock.com/en/image-photo/woman-signing-car-insurance-policy-agent-579720262?src=library
- https://www.shutterstock.com/en/image-photo/serious-couple-studying-contract-agreement-reading-626698901?src=library
Images
- depositphotos.com
- danielezedda.com
- foodiesfeed.com
- gratisography.com
- magdeleine.co
- picjumbo.com
- picography.co
- unsplash.com
- freepsdfiles.net
- free-logo-design.net
NOTE: The images used in the template are not included in the main download file, they are only for the preview purpose.
Fonts:
- http://www.google.com/fonts/ - Google WebFonts
- http://www.socicon.com/ - Social Icons Font
- http://fontawesome.io/ - Font Awesome
- http://icomoon.io/ - teaser rt-icons font
Template Scripts
- modernizr-2.6.2.min.js detecting browser's features.
- jquery-2.2.4.min.js is a popular JavaScript library.
- bootstrap.min.js is a stantard Twitter Bootstrap library.
- respond.min.js is required for working Twitter Bootstrap v3 in older browsers.
- html5shiv.min.js adds HTML5 compatibility for older browsers.
- superfish.js is a script that enables a dropdown menu.
- hoverIntent.js is a component for superfish menu.
- jquery.flexslider-min.js is a jQuery plugin for the main and bottom sliders.
- jquery.isotope.min.js is a jQuery plugin for filtrable gallery.
- jquery.prettyPhoto.js is a jQuery plugin for displaying lightbox content.
- jquery.ui.totop.js is a jQuery plugin for toTop button.
- jquery.easing.1.3.js is a jQuery plugin for different types of animation
- jquery.scrollTo-min.js and jquery.localscroll-min.js needed for smooth single page navigation.
- jquery.easypiechart.min.js is a jQuery plugin that uses the canvas element to render simple pie charts for single values.
- jquery.jflickrfeed.min.js plugin makes it easy to pull Flickr feeds and display them on your site.
- jquery.tweet.min.js plugin enables twitter widget on your site.
- owl.carousel.min.js is a jQuery carousel plugin for "partners" section
- jquery.bxslider.min.js is a jQuery slider plugin
- jquery.nicescroll.min.js is a plugin used to replace browser's standard scroll bar
- jquery.fractionslider.min.js is a great slider plugin for the main slider
- jquery.parallax-1.1.3.js is used for parallax backgrounds.
- jquery.appear.js is used to determine whether the HTML element is inside the browser's viewport
- jquery.scrollbar.min.js is a jQuery plugin for custom scrollbar
- bootstrap-progressbar.min.js is used for animating Twitter Bootstrap progressbars
- jquery.countTo.js is used for teasers with counter
- jquery.cookie.js is used for store cookies information in the template
- spectragram.min.js is used for Instagram feed
- jquery.countdown.min.js is used for Coming Soon page
Admin Dashboard Scripts
- http://jvectormap.com/ - Vetcor Map
- http://omnipotent.net/jquery.sparkline/ - Small Charts
- https://fullcalendar.io/ - Events calendar plugin
- http://www.daterangepicker.com/ - datepicker
- http://momentjs.com/ - Date library
- Chart.bundle.min.js is used for admin dashboard charts
NOTE: The images used in the template are not included in the main download file, they are only for the preview purpose.
© Copyright 2017. All Rights Reserved.