Go Mobile (2017 edition) - HTML Mobile Template Documentation

Introduction
Editing the HTML Structure
CSS Files and Structure
JavaScript
Sources and Credits

Last Updated: Tuesday, February 17, 2017
Created: Wednesday, December 18, 2013
Current Version: 3.0

Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please feel free to email via our profile page

1 Introduction

GoMobile is an HTML mobile template that will give you a starting point when creating a mobile website, web app, and integrated with solutions like phonegap/cordova, for a real native app.

The template is available in 2 versions, each with multiple designs:

ONE PAGE VERSION

The one page version include all the pages in one file, and navigate from one to another with jQuery. Each index file includes all the code of the pages.

MULTIPAGE VERSION

In the multipage version all pages are build separatelly. To go from one page to another we use Ajax. This allow the template to behave like an app, and browser url not to refresh when a new page is loaded.

1.A What is a HTML/CSS Template. The diference between HTML and Wordpress items - top ^

An HTML/CSS Template is a pre-designed layout that will help you build a final website. HTML ( HyperText Markup Language) is the basic coding to create web pages. CSS stands for Cascading Style Sheets and it's used to define and style the HTML elements.

The diference between HTML templates and Wordpress themes, is that Wordpress themes as the name says uses Wordpress as CMS, and include other than HTML coding, programming language like PHP and Javascript.

1.B Installing/Editing a HTML/CSS template - top ^

To install a HTML/CSS template requires just to copy the template files on your webserver. This can be done using your hosting provider custom interface or a FTP (File Transfer Protocol) software. Our recommandation is FileZilla.

A regular HTML/CSS template does NOT include a CMS (Content Management System) to edit/add content of the pages. All content is edited using a HTML editor. HTML editors can be found as free and paid editors. A good free HTML editor is NOTEPAD++. Some modern HTML editors have included a DESIGN view mode of the code, making it easier for templates to be edited. Regular ones will let you edit the content only from the code mode, meaning you will need to have a basic HTML coding knowledge.

1.C Redirect users from a normal/desktop website to a mobile website - top ^

After building your mobile website you want to let mobile users access it, and not viewing the desktop website on their mobiles. This will require to add a detection/redirection code on your desktop website. Mobile users comming on your desktop website will be detected and redirected to your mobile website. Most of mobile websites are build on separate subdomains or domains, like mobile.yourwebsite.com or m.yourwebsite.com, so users will be redirected from yourwebsite.com to m.yourwebsite.com

We have created a simple tutorial for this detection/redirection process. Just go HERE and choose the solution that suits your needs, depending on the way your main desktop website is buit (HTML, PHP or Wordpress). You can download the source files and add them to your website.

1.DLaunching the mobile website as a web app from your iphome home screen - top ^

Any mobile website as you know can be saved on iphone home screen. Te purpose of this is to access the website easier and faster. Also the mobile will load the website as a web app, fullscreen, making the navigation more pleasant.

Recently Android modern browsers allows you to do the same thing, saving a website on homescreen and launch it in full screen mode, like an app.

"Go Mobile" web template is build to function like that, when navigating from one page to another you will not refresh the browser url. All sections/pages are dinamically loaded without leaving the main window, so users experience when launching this as a web app will be better.

To save your final created mobile website on your iphone home screen you need to:

1. Load the template using your default Safari browser.

2. Click the bottom center icon (Bookmark) of the browser, and from the popup that will apear press "Add to Home Screen". This will save an icon to you screen, just like in the below screenshot.

To edit the icon and the loading image you need to:

Open each HTML file and edit the code and image from the header lines:

apple-touch-icon is the icon and apple-touch-startup-image is the background image.

Both are locaded inside the images folder.

2 Editing the HTML Structure - top ^

The template is using a responsive design starting from 800px and down. Responsive means it will strech in width depending on the resolution your device have.

All theme content is added in one index main file. We have provided more custom designs, and more index pages. As you can see in your archive, we have 13 index HTML pages.

Each index HTML page loads a diferent design, and the file is named by the design it's using, like "beauty" style design is index_beauty.html

All custom design files are in the folder called "colors". For each design we have a custom CSS style and a folder with images. For example index.html the main green default design is using the folder green, with green.css style and the images folder next to it.

In the HTML code you can see how index.html is loading the specifid style:

<link type="text/css" rel="stylesheet" href="colors/green/green.css"/>

Also how it using some images from green style folder:

<img src="colors/green/images/logo.png" alt="" title="" border="0" />

Other than the custom design styles, all files are loading a general CSS file style.css from the CSS folder.

<link type="text/css" rel="stylesheet" href="css/style.css"/>

Each HTML index page starts in code with the HEADER

 <div id="header">
 <div class="gohome radius20"><a href="#"><img src="images/icons/home.png" alt="" title="" /></a></div>
 <div class="gomenu radius20"><a href="#" onclick="swiperParent.swipeTo(9);"><img src="images/icons/contact.png" alt="" title="" /></a></div>
 </div>

The header will only be available for the secondary pages. All pages will use the same header.

The header si positionated right at the top section of the theme, and it's hidden when the menu section is visible. The general style of the header is found in the general style.css file.

#header{ position:absolute; top:-100px; left:0px; z-index:9999; width:94%; height:40px;padding:6px 3%;}

To customize the header color and style, use the custom CSS file under each color folder.

For example in green.css file we have the header with:

#header{ background-color:#738c5b; color:#FFFFFF;}

After the header layout comes the page sections of the themes. Each section is one slide. In the HTML code we have delimited the sections by some commented text like   and so on.

<!--Page 1 content-->
 <div class="swiper-slide sliderbg">
 <div class="swiper-container swiper-nested">
 <div class="swiper-wrapper">
 <div class="swiper-slide">
 <div class="slide-inner">
 <div class="pages_container">
 <h2 class="page_title">About Us</h2>
   ...................PAGE CONTENT HERE..................................
   <div class="clearfix"></div>
   <div class="scrolltop radius20"><a href="#"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
   </div>
   <!--End of page container-->
   </div>
   </div>
   </div>
   <div class="swiper-scrollbar"></div>
   </div>
   </div>

We will describe below how to add/edit this section starting with the menu section.

2.A Creating a menu section - top ^

The first section under the header is the menu. This will be the slide that will first be visible when your theme loads.

On each design we have diferent menus styles.

ONE PAGE VERSION MENU

The HTML structure for the menu is almost the same for all designs:

<div class="menu">
<ul>
<li><a href="#" onclick="swiperParent.swipeTo(1);"><img src="images/icons/about.png" alt="" title="" /><span>About Us</span></a></li>
<li><a href="#" onclick="swiperParent.swipeTo(2);"><img src="images/icons/tools.png" alt="" title="" /><span>Services</span></a></li>
<li><a href="#" onclick="swiperParent.swipeTo(3);"><img src="images/icons/blog.png" alt="" title="" /><span>Blog</span></a></li>
<li><a href="#" onclick="swiperParent.swipeTo(4);"><img src="images/icons/docs.png" alt="" title="" /><span>Portfolio</span></a></li>
<li><a href="#" onclick="swiperParent.swipeTo(5);"><img src="images/icons/photos.png" alt="" title="" /><span>Gallery</span></a></li>
<li><a href="#" onclick="swiperParent.swipeTo(6);"><img src="images/icons/videos.png" alt="" title="" /><span>Videos</span></a></li>
<li><a href="#" onclick="swiperParent.swipeTo(7);"><img src="images/icons/clients.png" alt="" title="" /><span>Clients</span></a></li>
<li><a href="#" onclick="swiperParent.swipeTo(8);"><img src="images/icons/twitter.png" alt="" title="" /><span>Twitter</span></a></li>
<li><a href="#" onclick="swiperParent.swipeTo(9);"><img src="images/icons/contact.png" alt="" title="" /><span>Contact</span></a></li>
</ul>
<div class="clearfix"></div>
</div>

We have one image followed by a SPAN text wich is the menu item text.

The icons we are using comes in white and black png images. Both are found under the main images folder of the theme. You can use them on white or black depending on the style you want. You can allways use your own icons if you want, but keep the most important thing in mind, to use them at the same size as this ones, not to modify the visual design.

The corect size for an icon to be used in the mene is 114px width and 114px height.

All the CSS style for the menu is found under each design folder, in the custom CSS file.

For example the menu from the green design is found in green.css file

/* Menu style
   /*------------------------------------------*/
   .menu{ width:100%; padding:0px;margin:0px 0 50px 0;}
   .menu ul{ list-style:none; padding:0px; margin:0px; width:100%;}
   .menu ul li{ list-style:none; margin:1% 0 2% 4%; padding:5.5% 0; width:28%;height:auto; float:left; display:block; text-align:center;
   background-image: url(images/transparent_circle.png);
   background-repeat: no-repeat;
   background-position: center center; 
   background-size: cover;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   }
   .menu ul li a{ color:#FFFFFF; text-decoration:none;  text-align: center;} 
   .menu ul li a span{ display:block; text-align:center; font-size:11px; line-height:15px;}
   .menu ul li img{ display:inline-block;max-width:50%;}

This menu style is using as you can see a background image as icons bg. It's a png transparent circle.

The metro style theme for another example is using a diferent menu style:

/* Menu style
   /*------------------------------------------*/
   .menu{ width:100%; padding:0px; margin:0px 0 50px 0;}
   .menu ul{ list-style:none; padding:0px; margin:0px; width:100%;}
   .menu ul li{ list-style:none; margin:3% 0 0 3%; padding:5.5% 0; width:45.5%;height:auto; float:left; display:block; text-align:center;}
   .menu ul li a{ color:#FFFFFF; text-decoration:none;  text-align: center;} 
   .menu ul li a span{ display:block; text-align:center; font-size:14px; line-height:25px;}
   .menu ul li img{ display:inline-block;max-width:50%;}

And so on, each design will use his own style.

Remember that you can use any of this style in any theme. Just copy/replace the Menu style code from one style to another. Also the images containing, if they use some.

Beeing a responsive design remember that some menus styles requires some CSS media queries. This Media Queries code is located at the bottom of each CSS file.

For example the green.css file use for the menu

/* CSS Media Queries
   /*-----------------------------------------------------------------------------------*/
   @media screen and (max-width: 480px) {
   .menu ul li{  padding:5% 0%;width:28.5%;margin:1% 0 2% 3.5%;}
   }
   @media screen and (max-width: 360px) {
   .menu ul li{  padding:4.6% 0.3%;width:28.5%;margin:1% 0 2% 3.2%;}
   }
   @media screen and (max-width: 320px) {
   .menu ul li{  padding:4.1% 0.1%;width:28.5%;margin:1% 0 2% 3.5%;}
   }

MULTIPAGE PAGE VERSION MENU

The HTML structure for the multipage version:

        <nav id="menu">
        <ul>
        <li><a href="about.html" class="insidelink"><img src="images/icons_colored/about.png" alt="" title="" /><span>ABOUT US</span></a></li>
        <li><a href="services.html" class="insidelink"><img src="images/icons_colored/tools.png" alt="" title="" /><span>FEATURES</span></a></li>
        <li><a href="blog.html" class="insidelink"><img src="images/icons_colored/blog.png" alt="" title="" /><span>JOURNAL</span></a></li>
        <li><a href="portfolio.html" class="insidelink"><img src="images/icons_colored/docs.png" alt="" title="" /><span>PORTFOLIO</span></a></li>
        <li><a href="gallery.html" class="insidelink"><img src="images/icons_colored/photos.png" alt="" title="" /><span>GALLERY</span></a></li>
        <li><a href="videos.html" class="insidelink"><img src="images/icons_colored/videos.png" alt="" title="" /><span>VIDEOS</span></a></li>
        <li><a href="clients.html" class="insidelink"><img src="images/icons_colored/clients.png" alt="" title="" /><span>CLIENTS</span></a></li>
        <li><a href="twitter.html" class="insidelink"><img src="images/icons_colored/twitter.png" alt="" title="" /><span>TWITTER</span></a></li>
        <li><a href="contact.html" class="insidelink"><img src="images/icons_colored/contact.png" alt="" title="" /><span>CONTACT</span></a></li>
        </ul>
        </nav>

INTERNAL AND EXTERNLA LINKS

For a link to point to a page with ajax use class="insidelink".

For a link to point externally to an outside page use class="externallink".

2.B Creating and editing pages sections - top ^

After the menu slide comes the pages slides. Like we first mentioned each page is a new slide.

The corect structure of a slide/page is the following:

<!--Page 1 content-->
 <div class="swiper-slide sliderbg">
 <div class="swiper-container swiper-nested">
 <div class="swiper-wrapper">
 <div class="swiper-slide">
 <div class="slide-inner">
 <div class="pages_container">
 <h2 class="page_title">About Us</h2>
.......................PAGE CONTENT HERE........................ 
   <div class="clearfix"></div>
   <div class="scrolltop radius20"><a href="#"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
   </div>
   <!--End of page container-->
   </div>
   </div>
   </div>
   <div class="swiper-scrollbar"></div>
   </div>
   </div>

2.C The Blog page - top ^

The Blog section is a static content page and not extracted from a database. Meaning it's not using a CMS to manage the posts. If you want to do that, you will need to integrate the template into a CMS like Wordpress for example.

The HTML code of this section starts with a toogle menu for the categories

 <div class="toogle_wrap_blog radius8">
 <div class="trigger_blog"><a href="#">blog categories</a></div>
 <div class="toggle_container_blog">
 <ul class="listing_detailed">
 <li><a href="#">webdesign work</a></li>
 <li><a href="#">painted illustrations</a></li>
 <li><a href="#">programming and javascript</a></li>
 </ul>
 </div>
 </div>

And continues with the posts archive. Listed using UL and LI elements.

   <ul class="posts">
   <li class="post" id="postid1">
   <a href="#" class="post_more"></a> 
   <div class="post_right_reveal">
   <h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</a></h4>
   </div>
   <div class="post_right_unreveal">
   Posted in <a href="#">blog category</a>
   <span class="post_comments">25 Comments</span>
   <a href="#" class="post_readmore">read more</a>
   </div><div class="post_left">
   <span class="day">23</span>
   <span class="month">june</span>
   </div> </li>
   <li class="post" id="postid2">..............ANOTHER POST HERE...........</li>
   <li class="post" id="postid3">..............ANOTHER POST HERE...........</li>

   </ul>

The details sections of the posts are listed under the archive listing. The HTML structure starts with

 <ul class="post_details_page">
 <li id="postid1">........DETAILS POST CONTENT...............</li>
<li id="postid2">........DETAILS POST CONTENT...............</li>
<li id="postid3">........DETAILS POST CONTENT...............</li>
</ul>

When a post from archive listing is clicked, and details section from the bottom will apear.

IMPORTANT
If you have in plan building the posts section dinamically, you need to make sure the post from the archive listing have the same ID as the one on the details listing. So when clicking on it, the corect details page will apear.

Instead of a pagination for the posts we are using "Load more posts" function at the bottom of archive listing.

We just want to remember if you want to change the nr of posts first to show you will need to see the js file called load.js

The function looks like:

$(document).ready(function () {
 containerHeight = $('.blogheight').height(); 
 $(".blogheight").css({height: containerHeight}) 
 $(".posts li").hide(); 
 size_li = $(".posts li").size();
 x=3;
 $('.posts li:lt('+x+')').show();
 $('#loadMore').click(function () {
 x= (x+1 <= size_li) ? x+1 : size_li;
 $('.posts li:lt('+x+')').show();
 if(x == size_li){
 $('#loadMore').hide();
 $('#showLess').show();
 }
 });
 });

The nr of posts to show can be changed from x=3;

The secondary pages contains a lot of design elements that you can use, like single responsive images, toggles, tabs, buttons..etc

When editing this elements the most important thing is not to leave an unclose DIV or delete one that is important to the structure of the theme.

Also when building buttons try to follow the CSS code to see what posibilities you have.

For example a button can be created with round corners or square, and on a diferent color.

<a href="#" class="button_12 green green_borderbottom radius4">Button 1/2</a>

In the main style.css file we have some predefined colors that you use

.green{ background-color:#85af5d;}
   .blue{ background-color:#29aae3;}
   .darkblue{ background-color:#035792;}
   .red{ background-color:#c53238;}
   .purple{ background-color:#8b2767;}
   .pink{ background-color:#f87c68;}
   .orange{ background-color:#f17225;}
   .black{ background-color:#272625;}
   .gray{ background-color:#6e6e6e;}
   .yellow{ background-color:#ffb606;}
   .bluegreen{ background-color:#06a78b;}

.green_borderbottom{border-bottom:3px #759a51 solid;}
   .blue_borderbottom{border-bottom:3px #198bbd solid;}
   .red_borderbottom{border-bottom:3px #8e262c solid;}
   .purple_borderbottom{border-bottom:3px #671a4b solid;}
   .pink_borderbottom{border-bottom:3px #d36755 solid;}
   .orange_borderbottom{border-bottom:3px #c55512 solid;}
   .black_borderbottom{border-bottom:3px #000000 solid;}
   .gray_borderbottom{border-bottom:3px #535150 solid;}
   .yellow_borderbottom{border-bottom:3px #e3a000 solid;}
   .bluegreen_borderbottom{border-bottom:3px #058770 solid;}
   .darkblue_borderbottom{border-bottom:3px #003a62 solid;}

And also some predefined corner radius

/* Border radius
   /*------------------------------------------*/
   .radius4{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
   .radius6{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
   .radius8{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
   .radius20{-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}

3.C Gallery page - top ^

The gallery page is using the swipebox script.

You can add your gallery photos on full width, 1/2 and 1/3 sections

The HTML structure looks like:

<ul class="photo_gallery_13">
 <li><a rel="gallery-3" href="images/photos/photo1.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo1.jpg" alt="image"/></a></li>
 <li><a rel="gallery-3" href="images/photos/photo2.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo2.jpg" alt="image"/></a></li>
 <li><a rel="gallery-3" href="images/photos/photo3.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo3.jpg" alt="image"/></a></li>
 <li><a rel="gallery-3" href="images/photos/photo4.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo4.jpg" alt="image"/></a></li>
 <li><a rel="gallery-3" href="images/photos/photo5.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo5.jpg" alt="image"/></a></li>
 <li><a rel="gallery-3" href="images/photos/photo6.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo6.jpg" alt="image"/></a></li>
 </ul>
 <h2>Photo Gallery 1/2</h2>
 <ul class="photo_gallery_12"> 
 <li><a rel="gallery-4" href="images/photos/photo7.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo7.jpg" alt="image"/></a></li>
 <li><a rel="gallery-4" href="images/photos/photo8.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo8.jpg" alt="image"/></a></li>
 <li><a rel="gallery-4" href="images/photos/photo9.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo9.jpg" alt="image"/></a></li>
 <li><a rel="gallery-4" href="images/photos/photo10.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo10.jpg" alt="image"/></a></li>
 
 </ul>
 <h2>Photo Gallery 1/1</h2> 
 <ul class="photo_gallery_11">
 <li><a rel="gallery-5" href="images/photos/photo11.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo11.jpg" alt="image"/></a></li>
 </ul>

So using UL class with photo_gallery_13 is for 1/3 section, photo_gallery_12 for 1/2 and photo_gallery_11 for full width

The thumbs will automatically be resized from the main image, you don't need to use 2 images size. Just the big one, and try to use it at a bigger size than 640 in width. Your must look great also on retina display.

3.D Contact page - top ^

The template includes a functional contact form. All index HTML files are loading the php working form from an external php file called contact-send.php.

Other than the contact form, the contact page include some social icons you can use, and 2 buttons for a map location and phone call.

To actually call a phone number when the call button is pressed, just add a corect phone number under a href="tel:... Just like below.

<a href="tel:123 456 789" class="call_button radius8">Click To Call Now!</a>

And to link to a map use the button as:

<a href="http://maps.google.com/maps?q=houston+usa&amp;hl=en&amp;sll=37.0625,-95.677068&amp;sspn=53.961216,114.169922&amp;hnear=Houston,+Harris,+Texas&amp;t=m&amp;z=5" 
class="map_button radius8">View our location</a>

The contact form HTML code looks like

 <div class="form">
 <form class="cmxform" id="CommentForm" method="post" action="">
 <label>Name:</label>
 <input type="text" name="ContactName" id="ContactName" value="" class="form_input radius4 required" />
 <label>Email:</label>
 <input type="text" name="ContactEmail" id="ContactEmail" value="" class="form_input radius4 required email" />
 <label>Message:</label>
 <textarea name="ContactComment" id="ContactComment" class="form_textarea radius4 textarea required" rows="" cols=""></textarea>
 <input type="submit" name="submit" class="form_submit radius4 green green_borderbottom" id="submit" value="Send" />
 <input class="" type="hidden" name="to"  value="youremaill@yourwebsiteee.com" />
 <input class="" type="hidden" name="subject" value="Contacf form message" />
 <label id="loader" style="display:none;"><img src="images/loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
 </form>
 </div>

To add your own email just edit the line

<input class="" type="hidden" name="to"  value="youremaill@yourwebsiteee.com" />

To edit the inputs and php code of the form you need to have some basic php knowledge.

3.E Twitter page - top ^

We have provided a custom code that will show you latest tweets.

This can be see under the twitter section.

In HTML code we have:

 <div class="pages_container">
 <h2 class="page_title">Latest Tweets</h2>
 <div class="tweet"></div>
 <a href="#" class="button_11 blue">Follow Us!</a>
 <div class="clearfix"></div>
 <div class="scrolltop radius20"><a href="#" class="scrolltop8"><img src="images/icons/top.png" alt="Go on top" title="Go on top" /></a></div>
 </div>
 <!--End of page container-->

The most important thing is <div class="tweet"></div> , there our content will be loaded.

TO EDIT YOUR TWITTER SETTINGS YOU NEED TO:

1. Inside the js folder you will find the twitter folder. There the main files of the script are.

Opening index.php file right on the top lines you will see

 // Your Twitter App Consumer Key
 private $consumer_key = '';
 // Your Twitter App Consumer Secret
   private $consumer_secret = '';
 // Your Twitter App Access Token
   private $user_token = '';
 // Your Twitter App Access Token Secret
   private $user_secret = '';

You will need to complete all this keys numbers from your twitter developer account. If you don't have an account just make one using twitter developers page https://dev.twitter.com/

2. Load the js file at the bottom of index.html file

<!--Twitter Feed-->
 <script type="text/javascript" src="js/twitter/jquery.tweet.js" charset="utf-8"></script>

This is allready loaded by default in each index file

3. Edit your username from the bottom javascript code, at the end of the page ...username: "sindevothemes",

<script type="text/javascript" charset="utf-8">
   var $ = jQuery.noConflict(); 
   jQuery(function($){
   $(".tweet").tweet({
 modpath: 'js/twitter/',
 join_text: "auto",
 username: "sindevothemes",
 count: 5,
 auto_join_text_default: "we said,",
 auto_join_text_ed: "we",
 auto_join_text_ing: "we were",
 auto_join_text_reply: "we replied",
 auto_join_text_url: "we were checking out",
 loading_text: "loading tweets..."
 });
 });
 </script>

4 CSS Files and Structure - top ^

The template is using more CSS files

1. The general css file is style.css loaded in each index file

<link type="text/css" rel="stylesheet" href="css/style.css"/>

2. The color CSS file loaded for each color in each index file

<link type="text/css" rel="stylesheet" href="colors/green/green.css"/>

3. The slide-effect style and photo gallery style:

4. The google web custom font

<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />

All headers are using a custom google web font. Each theme design with his own web font style.

To add/edit the custom font we have used you will need to load it, like we have mentioned above, right under the CSS files. And add the class name into the CSS like

/* Google web font
   /*------------------------------------------*/
   h1, h2, h3, h4, h5, h6, .logo, .image_caption, a.button_12, a.button_11, .trigger a, .trigger_blog a, .post_left, .post_right_unreveal, #loadMore, 
#showLess, a.backtoblog, .form label, .form_submit, a.call_button, a.map_button{font-family: 'Lato', sans-serif;}

This can be added on each color CSS file.

If you would like to edit other 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.

5 JavaScript Files And Functions - top ^

All the javascript file are loaded at the end of each index file

1. <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>

The basic jquery code

2. <script type="text/javascript" src="js/jquery.swipebox.js"></script>

The photo gallery script

3. <script type="text/javascript" src="js/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.scrollbar-2.1.js"></script>

The scripts used to make the slide-touch effect and scrollbar

4. <script type="text/javascript" src="js/jquery.tabify.js"></script>

The custom responsive tabs code. See About page to see it in action.

5. <script type="text/javascript" src="js/jquery.fitvids.js"></script>

The code to make videos responsive. Use videos like on our Video section page. Only for videos with responsive players, like youtube, vimeo...

6. <script type="text/javascript" src="js/code.js"></script>

Diferent functions that are used to load the slider, tabs, toggles..

7. <script type="text/javascript" src="js/load.js"></script>

The code to make the "Load more" posts function from blog

8. 
<script type="text/javascript" src="js/twitter/jquery.tweet.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict();
jQuery(function($){
$(".tweet").tweet({
modpath: 'js/twitter/',
join_text: "auto",
username: "sindevothemes",
count: 5,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
</script>

Twitter custom code to load the latest tweets from one twitter account.

6 Sources and Credits - top ^

jQuery - from http://jquery.com/
Swiper - https://github.com/nolimits4web/Swiper
Swipebox - http://brutaldesign.github.io/swipebox/
Fitvidsjs - http://fitvidsjs.com/
Free comercial icons from http://www.webalys.com/design-interface-application-framework.php
Video player - https://plyr.io/

Go To Table of Contents