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.

The exception is the contact and subcribe process which functions based on the PHP coding language and requires a server to send messages.

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 then choose the site template layout that you want. After you choose, 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, .php, .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 '#top' element has a class of 'span12'. The total columns equals 12 columns.

	 <div id="top" class="span12">
   
 	  <!-- Top element styles here -->
   
     </div> <!-- End Top -->
    

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 :

     .logo {
         width:135px;
		 height:162px;
		 text-align:center;
		 padding-top:15px;
		 position:absolute;
     }
    

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.

     #top .logo {
		 width:135px;
		 height:162px;
		 text-align:center;
		 padding-top:15px;
		 position:absolute;
	 }
    

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:


Logo

You can change the main site logo with change this code:

     <!-- Logo -->
     <div class="span2 pull-left logo">
      <img src="images/logo.png" alt="Fantastico" style="width:80px;" />
      <h3>Fantastico</h3>
     </div>
    

Menu Navigation

You can change the main site navigation with change this code:

     <!-- Menu Navigation -->
     <ul class="pull-right nav nav-list">
     <li><a href="#features">Features<i>we will give the best</i></a></li>
      ....
     </ul>
    

Introduction Section

In this section you can change the main base top image and introduction text:

     <div id="intro">
      <div class="container">
 
       <img src="...." alt="Base" /> <!-- Intro Base Image -->
  
  	   <!-- Intro Text -->
       <div class="text">
        <h1>....</h1>
        <h4>....</h4>
        <div class="intro-btn">
         ....
        </div>
       </div>
  
      </div> <!-- End Container -->
     </div> <!-- End Intro -->
    

Note: If you want to change the "Intro Base Image", your image must be .png type with black edge in the left and right side. And must be sized of 1280x720 pixels.


Features

In this section you can change the features list of your product or service:

     <div class="container">
      <div class="row-fluid" id="features">
 
       <div class="edge"><!-- --></div>
   
       <!-- Header Text -->
       <div class="header">
        <h2>....</h2>
       </div>
       <h5>....</h5>
   
       <!-- Features List -->
       <div class="features-list clearfix">
   
        <div class="span4 margin0">
         <img src="images/features/....png" alt="Feature" />
         <h4>....</h4>
         <p>....</p>
        </div>
   
        ....
   
       </div>
 
      </div> <!-- End Row -->
     </div> <!-- End Container -->
    

Note: You can see complete features icon in images/features/ folder.


Product Screenshoots

In this section you can change the screenshoots of your product or service:

     <div class="container">
      <div id="screenshoots">
   
       <!-- Header Text -->
       <div class="header">
        <h2>....</h2>
       </div>
       <h5>....</h5>
   
       <!-- Screenshoot Galleries -->
       <div class="slider theme-default">
        <div class="nivoSlider">
         <img src="images/screenshoots/....jpg" alt="Screenshoot" title="....">
         ....
        </div>
       </div>
   
      </div> <!-- End Screenshoots -->
     </div> <!-- End Container -->
    

Note: If you want to upload your images to the server, you can upload in "/images/screenshoots/" folder and don't forget to upload the images with a proper size. Here is the image size that you should use:

  • Monitor Layout: 960x550 pixels
  • Notebook Layout: 875x550 pixels
  • Tablet Layout: 725x550 pixels

Site/Company Descriptions

In this section you can change the descriptions about your site or company:

     <div class="row-fluid" id="descriptions">
      <div class="container">
   
       <!-- Image Icon -->
       <div class="span4">
        <figure>
         <img src="images/descriptions.png" alt="Descriptions" />
        </figure>
       </div>
   
       <!-- Descriptions Text -->
       <div class="span8">
        <h2>....</h2>
        <h5>....</h5>
   
        <div class="span6 margin0">
         <h4><i class="icon-edit"></i>....</h4>
         <p>....</p>
     
         ....
     
        </div>
    
        <div class="span6">
         <h4><i class="icon-th-large"></i>....</h4>
         <p>....</p>
    
         ....
     
        </div>
    
       </div>
   
      </div> <!-- End Container -->
     </div> <!-- End Descriptions -->
    

Note: You can see complete glyphs icon here....


Teams Work

In this section you can change the teams work in your company:

     <div class="container">
      <div id="teams">
   
       <!-- Header Text -->
       <div class="header">
        <h2>....</h2>
       </div>
       <h5>....</h5>
   
       <!-- Teams List -->
       <div class="teams-list clearfix">
   
        <div class="span4 margin0">
         <img src="images/profiles/....png" alt="Profile" />
         <ul class="social">
          <li><a href="#" title="Follow on ...."><img src="images/social/....png" alt="..." /></a></li>
	      ....
         </ul>
         <div class="header">
          <h4>....</h4>
         </div>
         <p>....</p>
        </div>
        
        ....
   
       </div>
   
      </div> <!-- End Teams -->
     </div> <!-- End Container -->
    

Note: You can see other social media icon in images/social/ folder.


Testimonials

In this section you can change the testimonials from people that bought your product:

     <div class="row-fluid" id="testimonials">
      <div class="container">
   
       <!-- Testimonials Text -->
       <div class="span8">
        <h2>....</h2>
        <h5>....</h5>
   
        <div class="testimonial testimonial-left clearfix">
         <img src="images/testimonials/....jpg" alt="Testimonial" class="img-circle" />
         <span class="arrow"></span>
         <div>
          <p>....</p>
          <i>....</i>
         </div>
        </div>
    
        <hr />
    
        ....
    
       </div>
   
       <!-- Image Icon -->
       <div class="span4">
        <figure>
         <img src="images/testimonials.png" alt="Testimonials" />
        </figure>
       </div>
   
      </div> <!-- End Container -->
     </div> <!-- End Testimonials -->
    

Main Social Media

You can change the main social media links with change this code:

     <!-- Social Media -->
     <ul class="social">
      <li>....</li>
      <li>....</li>
      <li>....</li>
      ....
     </ul>
    

Note: You can see other social media follow icon in images/follow/ folder.


Clients

In this section you can change the client that bought/used your product or services:

     <div class="container">
      <div class="row-fluid" id="clients">
  
       <!-- Header Text -->
       <div class="header">
        <h2>....</h2>
       </div>
       <h5>....</h5>
  
       <div class="span3 margin0">
        <img src="images/clients/....png" alt="Client" />
        <p>....</p>
       </div>
   
       ....
  
      </div> <!-- End Clients -->
     </div> <!-- End Container -->
    

Company Profile

You can change the details about you company with change this code:

     <!-- Company Details -->
     <div class="span3">
   
      <h4>Our Company Details</h4> 
      <p>....</p>
	 
     </div> <!-- End Span3 -->
    

Contact Details

You can change the details about your contact information with change this code:

     <!-- Contact Information Details -->
     <div class="span3">
   
      <h4>Let's Keep In Touch</h4>
      <p>....</p>
   
     </div> <!-- End Span3 -->
    

Copyright

You can change the copyright with you own company copyright with change this code:

     <footer id="footer">
     
      <div class="container">Copyright © 2012 by ....</div> <!-- Copyright Text -->
     
     </footer> <!-- End Footer -->
    

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons. All icons require an <i> tag with a unique class, prefixed with icon-, like <i class="icon-search"></i>. There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links, like <i class="icon-search icon-white"></i> :

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

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.
  • bootstrap-responsive.min.css - This stylesheet use for responsively the theme for other devices screen size support.
  • nivo-slider.css - The main stylesheet for screenshoots slider area.
  • no-js.css - This stylesheet will be activated if your browser don't support javascript.

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

     /* ========================= 1. Site Styles ========================= */
    
     Main CSS styles are here
    
     /* ========================= 2. Header ========================= */
 
     CSS styles for the header are here
    
     /* ========================= 3. Intro ========================= */
    
     CSS styles for the main slider
    
     /* ========================= 4. Features ========================= */
    
     CSS styles for the features list section
     
     
     ....
     
    
     /* ========================= 11. Bottom ========================= */
    
     CSS styles for the bottom section
     
     /* ========================= 12. Footer ========================= */
    
     CSS styles for the footer section
     
     /* ========================= 13. CSS Hacks ========================= */
    
     CSS hack styles for cross browser support
    
     /* ========================= 14. 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. All data about registered subcribers saved in /html/data. I use XML data format as a substitute for MySQL because I don't use any database. Your localhost or server must support with SimpleXMLElement to run this function.

/data/subcribers.xml
Contains all data about registered subcriber (the data used in XML format).

This template also completed with contact us form. Message from the form will direct send to your email address, so you can edit your email address in contact.php file.

     $my_email   = "youremail@domain.com"; // Your email address
    

Twitter Integration:

To change the twitter username with your own, you can change $twitteruser variable value with your twitter id (in includes/get-tweets.php file):

     $twitteruser		= "envato"; // Change with your twitter username
    

PSD Files


The following Photoshop file are included with the download package place in /psd folder with the name of main.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!