Dots Theme Documentation

Dots Theme documentation contains contains tutorials that will make you easier to configure the template as you want.

Thank you very much for purchasing from Dots Theme.

If you have any issue or question that this document does not cover, you can contact us via email dotstheme@gmail.com. You can get more update documentation here.


Table of Contents



Template Installation


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.

All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.

Upload to The Server
  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. Select /html folder and there will have several files with the extension labeled .html. This is where all your content will. In addition to .html you should see a file labeled .css. .css files are going to be the files that will tell the .html how to to be styled. CSS is simply a way to take text, images, and other elements and change the look of them. It's very important to keep the .css file with the HTML or the HTML will not look how the design is meant to look. Along with the HTML and CSS files, you will also have three additional folders to upload; css, 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 that you have labeled .html, .css, .js into your FTP client.
  5. Once the files are done uploading, you can try access your website via browser.

HTML Structure


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

The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length. For example, the '#main' element has a class of 'col-sm-8' and the '#side' element has a class of 'col-sm-4'. The total columns equals 12 columns.

    <div class="container">
    	<div class="row">
        	<div id="main" class="col-sm-8"></div>
            <div id="side" class="col-sm-4"></div>
		</div>
	</div>
    

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following in css/layout.css :

    .nav-menu { text-align:center; }
    

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.

    #header .nav-menu { text-align:center; }
    

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.


Some site elements you must change:


Header

You can change the site logo and navigation menu in header section with change this code:

    <header id="header" class="stickem">
    	<div class="header-wrap">
        	<nav class="navbar navbar-default" role="navigation">
            	<div class="container">
                	
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            ....
                        </button>
                        <a class="navbar-brand" href="index.html" title="CheckIn"><img src="images/logo.png" alt="Image" /></a> <!-- site logo -->
                    </div>
                    
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse navbar-ex1-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#top" class="smooth-scroll">Home</a></li>
                            ....
                        </ul>
                    </div>
                    
                </div> <!-- End container -->
			</nav> <!-- End navbar -->
        </div> <!-- End header-wrap -->
        
        <div class="container header-shadow"></div> <!-- nav shadow -->
    </header> <!-- End header -->
    

Top

In this section you can change the top section for this site template with change some code below:

    <section id="top" data-stellar-background-ratio="0.5">
    	<div class="top-overlay">
            <div class="container">
                <div class="row">
                
                    <div class="col-sm-7 top-desc">
                        <h1>The new application to organize your <strong>travel destination</strong></h1>
                        <p>....</p>
                        <div class="btn-section">
                            <a href="#" class="btn-custom btn-custom-default"><i class="icon-apple"></i>Available in App Store</a>
                            <a href="#" class="btn-custom btn-custom-default"><i class="icon-android"></i>Get It on Google Play</a>
                        </div>
                    </div>
                    
                    <div class="col-sm-4 col-sm-offset-1">
                    	<figure>
                        	<img src="images/top-phone.png" alt="Image" />
                        </figure>
                    </div>
                    
                </div> <!-- End row -->
            </div> <!-- End container -->
        </div> <!-- End top-overlay -->
    </section> <!-- End top -->
    

Welcome Text

In this section you can change the welcome text for welcoming the visitors:

    <div class="welcome-text">
        <h2>Select places you want to be your destination</h2>
        <p>....</p>
    </div> <!-- End welcome-text -->
    

Main Gallery

In this section you can show your best images to the visitors:

    <div class="main-gallery" id="gallery">
    	<div class="row">
                	
			<div class="col-sm-4">
                    
				<div class="col-sm-7 item"> <!-- 1 -->
                	<figure class="figure-hover">
                    	<a href="images/galleries/full/1.jpg" data-rel="prettyPhoto[photoGallery]">
                        	<figure class="figure-hover">
                            	<img src="images/galleries/thumbnail/1.jpg" alt="Niagara Waterfall" />
                                <div><span class="icon-hover icon-hover-zoom"></span></div>
							</figure>
						</a>
					</figure>
					<h5>Niagara Waterfall</h5>
					<p>Ontario, Canada</p>
				</div>
                        
				....
                        
			</div> <!-- End col-sm-4 -->
                    
			<div class="col-sm-4">
				<div class="main-slider">
                	<div class="nivoSlider">
                    	<img src="images/galleries/sliders/1.jpg" alt="Image" class="screenshoot-primary">
                        ....
					</div> <!-- End nivoSlider -->
				</div> <!-- End main-slider -->
			</div> <!-- End col-sm-4 -->
            
            <div class="col-sm-4">
            
            	<div class="col-sm-7 col-sm-offset-5 item"> <!-- 4 -->
                	<figure class="figure-hover">
                    	<a href="images/galleries/full/4.jpg" data-rel="prettyPhoto[photoGallery]">
                        	<figure class="figure-hover">
                            	<img src="images/galleries/thumbnail/4.jpg" alt="Traitor Building" />
                                <div><span class="icon-hover icon-hover-zoom"></span></div>
							</figure>
						</a>
					</figure>
                    <h5>Traitor Building</h5>
                    <p>Paris, France</p>
				</div>
                
                ....
                
			</div> <!-- End col-sm-4 -->
            
		</div> <!-- End row -->
	</div> <!-- End main-gallery -->
    

Note: You can upload your best images in /images/galleries/ folder.


Main Tabs

In this section contain some pages like overview, features and contact form:

    <div class="main-tabs" id="tabs">
        <div class="header">
            <h2>Get the best features to get your destination</h2>
            <p>....</p>
        </div> <!-- End header -->
        
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab-overview" data-toggle="tab">Overview</a></li>
            ....
        </ul> <!-- End nav-tabs -->
        
        <div class="tab-content">
        
            <div class="tab-pane fade active in" id="tab-overview">
                <div class="row">
                    <div class="col-sm-4 column column-img-left">
                        <figure>
                            <img src="images/tabs/1.png" alt="Image" />
                        </figure>
                    </div> <!-- End column -->
                    
                    <div class="col-sm-8 column column-text">
                        <h4>Get to the right place, every time with CheckIn</h4>
                        <p>....</p>
                        <div class="btn-section">
                            <a href="#" class="btn-custom btn-default">See The Apps</a>
                        </div>
                    </div> <!-- End column -->
                </div> <!-- End row -->
            </div> <!-- End tab-pane -->
            
            <div class="tab-pane fade column column-features" id="tab-features">
                <div class="row">
                    <div class="col-sm-4 item"> <!-- 1 -->
                        <i class="icon-gears"></i>
                        <h5>The Feature List 1</h5>
                        <p>....</p>
                    </div>
                    
                    ....
                </div> <!-- End row -->
                
                ....
            </div> <!-- End tab-pane -->
            
            <div class="tab-pane fade" id="tab-contact">
                <div class="row">
                    <div class="col-sm-8 column column-form">
                        <h4>Keep In Touch with Us</h4>
                        <form id="contact-form" method="post" action="#">
                            <div class="row">
                                <div class="col-sm-4">
                                    <input type="text" name="name" maxlength="255" placeholder="Name (optional)" />
                                </div>
                                ....
                            </div>
                        </form>
                        <h4 class="margin-top60">Direction Information</h4>
                        <p>....</p>
                    </div> <!-- End column -->
                    
                    <div class="col-sm-4 column column-img-right">
                        <figure>
                            <img src="images/tabs/2.png" alt="Image" />
                        </figure>
                    </div> <!-- End column -->
                </div> <!-- End row -->
            </div> <!-- End tab-pane -->
            
        </div> <!-- End tab-content -->
    </div> <!-- End main-tabs -->
    

Screenshots

In this section you can change the app screenshots image:

    <div class="screenshots" id="screenshots">
        <div class="header">
            <h2>Our latest screenshots gallery</h2>
            <p>....</p>
        </div> <!-- End header -->
                    
        <div class="slider">
            <div class="flexslider loading">
                <ul class="slides">
                    <li><img src="images/screenshots/1.png" alt="Image" /></li>
                    ....
                </ul>
            </div> <!-- End flexslider -->
        </div> <!-- End slider -->
    </div> <!-- End screenshots -->
    

Note: You can upload your best images in /images/screenshots/ folder.


Site Copyright

In this section you can change the site copyright text, and you can choose the social media which you like:

    <footer id="footer">
    	<div class="container">
        	<p>© 2013 by <a href="http://dotstheme.com">Dots Theme</a>. All Rights Reserved.</p> <!-- site copyright text -->
		</div> <!-- End container -->
	</footer> <!-- End footer -->
    

FontAwesome Icon Packs

You can also use built in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


CSS Structure


I'm using one main CSS file (css/layout.css), in this template which you are free to modify depending on the customization you require. There are also two additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder. The six additional style sheets are:

  • layout.css - The main stylesheet you are encouraged to modify.
  • bootstrap.min.css - This is a main stylesheet that required for basic template styling like form, input, div, list element and etc.
  • font-awesome.min.css - CSS stylesheets for font icon.
  • font-awesome-ie7.min.css - CSS stylesheets for font icon (with IE7 support).
  • flexslider.css - This stylesheet used for main slider.
  • nivoslider.css - This stylesheet used for secondary slider.
  • prettyPhoto.css - This stylesheet used for styling the image gallery popup.
  • no-js.css - This stylesheet will be activated if your browser don't support javascript.
  • old-browser.css - This stylesheet will be activated if you use Internet Explorer browser with version lower than 8.0.
  • color.css - The stylesheet can modify easily to change your site base color.

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

     /* ========================= Site Styles ========================= */
    
     Main CSS styles are here
    
     /* ========================= Header ========================= */
 
     CSS styles for the header section like logo, navigation
     
     /* ========================= Top ========================= */
 
     CSS styles for the top section
    
     /* ========================= Main ========================= */
    
     CSS styles for the main section like gallery, tabs, subscribe form etc
     
     
     ....
     
     /* ========================= Footer ========================= */
    
     CSS styles for the footer section
     
     /* ========================= CSS Hacks ========================= */
    
     CSS hack styles for cross browser support
    
     /* ========================= Media Queries ========================= */
    
     CSS styles for the support off all device screen size are here
    

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.


Scripts


This theme uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.


PHP Integration


This template also use the PHP engine for activate the subcribe proses. This subscribe form support with MailChimp integration. To activate this integration you must make some adjusment to several php files.

Required: You has already signed in mailchimp.com and was familiar with the features provided by the MailChimp.

To adjust the MailChimp integration, follow this instruction:

  • 1. Open the /mailchimp/config.inc.php file.
  • 2. Change $apikey variable with your MailChimp API Key, you can see in http://admin.mailchimp.com/account/api
  • 3. Also write your MailChimp List ID in $listId variable. To get MailChimp List ID you must login to MC account, go to List, then List Tools, and look for the List ID entry
  • 4. For 2 other variables only an optional if you want to used Campaign and xml-rpc features.

For contact section, the message will direct send to your email address, so you can edit your email address in process-contact.php file.

    $my_email = 'dotstheme@gmail.com'; // Your email address
    

PSD Files


The following Photoshop file are included with the download package place in /psd/ folder with the name of iphone5-black.psd, iphone5-white.psd, main.psd, top-iphone5-white.psd .


Credits



Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. Please contact me via email or social media. I'll do my best to assist!