“Superweb | HTML5 Bootstrap Website Template” Documentation by “LITTLE NEKO“


“Superweb HTML5 Template”

Created: 07/02/2013
By: LITTLE NEKO
Email:little@little-neko.com

Thank you for purchasing our 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 here. Thanks so much!


Table of Contents

  1. Installing the Template
  2. HTML Structure
  3. CSS Files and Structure
  4. Jquery plugins (javascript)
  5. Shortcodes
  6. Twitter timeline
  7. Credits

A) Installing the Template - top

You can view this template in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template.

Setting the base color scheme

  1. Locate css folder, you have all the colors in there
  2. Choose your color
  3. Open the file, copy the content
  4. Open “colors.css”, replace content with the one of your color file
  5. Finally, open "custom.js" and erase the lines at the top (see comments in file), to remove the color switcher script

Getting the Template Online

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
  2. The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, font-icons, bootstrap, js-plugin, images, and js.
  3. Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
  4. Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file into your FTP client.
  5. Once the files are done uploading, rename the file you want to be your home page as 'index.html'.

B) HTML Structure - top

This theme has a responsive layout with a variation of column layouts depending on the page. This theme uses the TWIITER BOOTSTRAP (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the Bootstrap system, be sure to read about it here.

The main structure of this site is wrapped in a '.container' div and a '.row' div. Inside of that div you will find each major section of the site given an appropriate column size all equalling 12 columns in length. For example, if you want a two columns layout width the same width you would create two div's 'span6' . The total columns equals 12.

You can also easily include columns layout within a Bootstrap column by using one of the following css class (all sizes of these classes are expressed in % to always fill up the right space of any container)

  1. one_half
  2. one_third
  3. two_thirds
  4. three_fourths
  5. one_fourth
  6. one_fifth,
  7. two_fifth
  8. three_fifth
  9. four_fifth
  10. one_sixth
  11. five_sixth

If you would like to edit the colors of any elements in one of these columns, you would do the following in color.css :

        #mainLogo {
                color: #someColor;
        } 

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

        header #mainLogo {
                color: #someColor;
        }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.



C) CSS Files and Structure - top

We are using a set of two main CSS files (layout.css and color.css) in this theme which you are free to modify depending on the customization you require. There are also one additional style sheet that we do not recommend changing. Those style sheets reside in the 'CSS' folder. The style sheets are:

The main CSS file contains all of the specific stylings for the page. The file is separated into sections using:

        /* #NAME OF THE SECTION
        ================================================== */
        /* Table of Content
        ================================================== */
        #Custom Reset
        #Typography
        #Boostrap customization
        #Site Styles
        #HomePage Styles
        #Page Styles
        #Shortcodes classes
        #Forms
        #Sliders Styles
        #Media Queries

The color.css file contains all colors and styles for the color scheme you choosed. This file is also where you would make any changes to the main look of the theme since it overrides all css rules found in layout.css.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.



D) Jquery plugins - top

This template uses several javascript files, all of them are placed a folder called "js-plugin" and on googleapis servers. All javascript files are called in the bottom of the page to speed up the loading time. The custom.js file, which is located in the js folder, is where we have placed all plugin calls and custom functions such as flexslider "captions" custom animations.

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">...
        <script src="//maps.google.com/maps/api/js?sensor=false">...
        <script src="js-plugin/respond/respond.min.js">...
        <script src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js">...
        <script src="js-plugin/isotope/jquery.isotope.min.js">...
        <script src="js-plugin/easing/jquery.easing.1.3.js">...
        <script src="js-plugin/pretty-photo/js/jquery.prettyPhoto.js">...
        <script src="js-plugin/flexslider/jquery.flexslider.js">...
        <script src="js-plugin/jquery-validation/jquery.validate.js">...
        <script src="js/custom.js">...

Here is a complete list of all plugins we've used to create The Superweb Template. All plugins are called in the custom.js file in the js folder

One by One, Premium Responsive jQuery Plugin

The OneByOne Slider is a lightweight, responsive & layered jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven by Animate.css. It’s mobile friendly, which support wipe left/right on your touch device like iPhone & iPad. You can drag and drop to navigate with your mouse too. The latest update add an extra example, which make Twitter Bootstrap Carousel support the one by one animation. The documentation can be found here.

FlexSlider

This is one of the 3 sliders we've included in the theme. The documentation for this plugin can be found here The only specifics about this slider is that all caption animations are placed in the custom.js file in a function called "animateTxt" which takes two parameters (curSlide: the current slide the slider is on, state: the state of the animation). You can customize this function to fit your needs. To change the way the slider looks like, you would go in the js-plugin folder and look for the flexslider/themes folder.

Camera

This is the third slider included in the theme. The documentation for this plugin can be found here. Camera slideshow is an open source project, based on Diapo slideshow .


Isotope

This plugin is used to layout the portfolio section and animate each columns depending on the filter the user select. The documentation can be found here.


Easing

This plugin is used to add easing methods for jquery animation such as Bounce or Elastic animations. The documentation can be found here.


Pretty photo

PrettyPhoto is a jQuery responsive lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. The documentation can be found here.


Neko Contact AJAX Form

This plugin allows you to easily place a self-contained Contact Form on any HTML or PHP page of your existing website.


Custom light-weight Jquery-ui

We have also included a light-weight version of jquery-ui. jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. The documentation can be found here.


Sharre plugin

Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more... See documentation here


Google map

Google map will let you easily include a dynamic map for your contact page.

Setting your address

The initializer code is in custom.js. Locate “function initialize( id )” (line 994), then replace: var 'address' and var 'PlaceName' values.


  
Replace the default icon with your own

The initializer code is in custom.js. Locate “function initialize( id )” (line 994), then replace:

 var contentString = '<div class="contentMap">'+PlaceName+'<br />'+address+'</div>';
 var marker = new google.maps.Marker({
     position: myLatlng,
     map:map,
     title: 'Locate Us'
 });
 

with:

 var image = 'images/your-image.png'; 
 var contentString = '<div class="contentMap">'+PlaceName+'<br />'+address+'</div>';
 var marker = new google.maps.Marker({
     position: myLatlng,
     map:map,
     title: 'Locate Us',
     icon:image
 });
  

Google Analytics

We include the Google Analytics code in every footer of the template. You need to create a google account to use it. Once you are done, open "custom.js" and locate "var UA" at the top of the file, and put your UA there. If you dont want to use Google Analytics, just remove the code at the bottom of the pages :

  <script type="text/javascript">
  var _gaq = _gaq || [];
    _gaq.push(['_setAccount', UA]);
    _gaq.push(['_trackPageview']);
 (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

E) Shortcodes - top

We have included all bootstrap shortcodes, classes and javascript plugins so that you can easly customize your theme. You can find a complete explanation of how it works here

 
Icons fonts

We have included Icon fonts so that your icon will always look great no matter which screen they are displayed on. We have included a custom icon font pack. Here is a example on how to use these icons fonts

<i class="icon-left-circle"></i>

Just change the class name to switch the icon inside you html element. Here is a link showing the complete custom pack included with your theme.

You can extend the icons with the Fontello library. To add more icons to the set:

  1. Go to http://fontello.com/
  2. Click on the settings and choose "import config.json"
  3. Import the file from font-icons/custom-icons. This will highlight the icons of the set
  4. Choose the icons you want, download, unzip and replace the files



F) Twitter timeline - top

Twitter's decision to discontinue their unauthenticated v1.0 API means that old javascripts widgets stopped working. Twitter wants your only option for on-page widgets to be their own Embedded Timelines and follow their display requirements ( https://dev.twitter.com/terms/display-requirements ). That is why we decided to not include Twitter JS widget in our templates in order to follow the twitter guidelines. You may find alternatives (most using a php script) to display the tweets in a different way, breaking the Twitter rules, but we rather provide a safe solution for our buyers.

How to set up your twitter timeline?

We included our own Twitter timeline in this template

To create a timeline you must be signed in to twitter.com and visit the widgets section of your settings page. From this page you can see a list of the timelines you've configured and create new timelines. Click the “Create new” button to build a new timeline for your website, choose the type, and complete the fields in the form; most fields are optional. The configuration is stored on our server, so once you've saved the timeline a small piece of JavaScript is generated to paste into your page, which will load the timeline. Here's an example embed code:

<a class="twitter-timeline" href="https://twitter.com/twitterapi"
data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Twitter embed timeline comes with a set of option to customize the look and feel. See online documentation for more info about them. https://dev.twitter.com/docs/embedded-timelines



Responsiveness

To set your timeline responsive, you need to embed that code inside a <div> element, like this:

                        <div id="twitterFrame">Twitter code</div>
                    

G) Credits - top

Demo images (NOT included in the package) http://www.shutterstock.com/


Once again, thank you so much for purchasing this theme. As We said at the beginning, we'd be glad to help you if you have any questions relating to this template. Please contact us via my author contact form. We'll do our best to assist you!

LITTLE NEKO

Go To Table of Contents