1. Start
  2. Folder Structure
  3. Html Structure
  4. CSS Files structure
  5. Javascript Files
  6. Customization
  7. Sliders
  8. Pages
  9. Elements
  10. Responsive
  11. FAQ
  12. Fonts
  13. PSD Files
  14. Source & Credits
  15. What else

Spotless

Multi Purpose HTML5 Template


Thank you for purchasing my 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

Thank you so much!

Folder Structure


Folder Structure

Html Structure


    
        <!-- *.Wrapper.* -->
        <div id="wrapper">
            <!-- *.Inner Wrapper.* -->
            <div class="inner-wrapper">
            
                <!-- *.Header.* -->
                <header id="header">
                    <!-- *.Header Container.* -->
                    <div class="container">
                        *   *   *   *   *
                    </div><!-- *.Header Container End.* -->
                </header><!-- *.Header End.* -->
                
                <!-- *.Main Menu.* -->
                <nav id="main-menu">	
                    <!-- *.Main Menu Container.* -->
                    <div class="container">    	
                        *   *   *   *   *
                    </div><!-- *.Main Menu Container End.* -->
                </nav><!-- *.Main Menu End.* -->
                
                <!-- *.Slideshow Container.* -->
                <section id="slideshow-container">                
                    *   *   *   *   *                           
                </section><!-- *.Slideshow Container End.* -->
                
                <!-- *.Main.* -->
                <section id="main">
                    <!-- *.Main Container.* -->
                    <div class="container">            
                        <!-- *.Content.* -->
                        <div class="content content-full-width">                
                            *   *   *   *   *                
                        </div><!-- *.Content End.* -->            
                    </div><!-- *.Main Container End.* -->            
                </section><!-- *.Main End.* -->
                
                <!-- *.Clients Slider Holder.* -->
                <section class="clients-slider-holder">
                    <!-- *.Clients Slider Container.* -->
                    <div class="container">            
                        *   *   *   *   *                
                    </div><!-- *.Clients Slider Container End.* -->
                </section><!-- *.Clients Slider Holder End.* -->
                
                <!-- *.Footer.* -->
                <footer id="footer">
                    <!-- *.Footer Container.* -->
                    <div class="container">            
                       *   *   *   *   *        
                    </div><!-- *.Footer Container End.* -->
                </footer><!-- *.Footer End.* -->
                
                <footer class="footer-copyright">
                    *   *   *   *   *
                </footer>
            
            </div><!-- *.Inner Wrapper End.* -->
        </div><!-- *.Wrapper End.* -->
        
    

CSS Files structure


We are using several CSS files in this template:

- style.css - this is the main css file, it contains all the styles of the website

- responsive.css - this stylesheet contains responsive rules for adapting the template to any resolution.

- css/reset.css - these are generic styles, resets & normalization;

- css/font-awesome.min.css , css/font-awesome-ie7.min.css - These are Font Awesome icons styles

- css/superfish.css - This is the superfish menu css file

- css/prettyPhoto.css - This is the prettyPhoto lightbox css file

- css/camera.css , css/ei-slider.css , css/fliexslider.css , css/iview.css , css/iview-skin.css , css/nivo-slider.css , css/sequence.css , css/slit-slider.css , css/slit-slider-no-js.css - These are the slider css files.

PHP File: Inside the css folder you will see a php file called "skins.php" . This php file contains all the highlighted (blue) color of the template. You can use unlimited colors by placing the color code

<link id="css-color" href="css/skins.php?color=ff26a0" rel="stylesheet" media="all" />

- skins/light/style.css - it contains the styles of light colors and images

- skins/dark/style.css - it contains the styles of dark colors and images

Here is the structure of main CSS file.

@charset "utf-8";
/* CSS Document */

@import "css/reset.css";

/* #General
================================================== */	
	body style comes here
	
	/* #Fonts
	================================================== */
	Fonts style comes here
	
	/* #Headings
	================================================== */	
	Headings style comes here	
	
	/* #Text Elements
	================================================== */	
	Text Elements style comes here	
	
	/* #Tables
	================================================== */	
	Tables style comes here	
	
	/* #Definition Lists
	================================================== */	
	Definition Lists style comes here	
		
	/* #Butttons
	================================================== */
	Butttons style comes here	

	/* #Forms
	================================================== */	
	Forms style comes here	
	
	/* #Images
	================================================== */	
	Images style comes here	
	
	/* #Columns
	================================================== */	
	Columns style comes here	
	
	/* #Lists
	================================================== */	
	Lists style comes here	
	
	
	/* #Widgets
	================================================== */	
	Widgets style comes here	
	
	
/* #Layout
================================================== */

	/* #Container
	================================================== */
	Container style comes here	
	
	/* #Header
	================================================== */	
	Header style comes here	
	
	/* #Menu
	================================================== */
	Menu style comes here	
	
	/* #Home Slideshow
	================================================== */	
	Home Slideshow style comes here	
	
	/* #Main
	================================================== */	
	Main style comes here	

	
		/* #Content
		================================================== */
		
			/* #Home
			================================================== */			
			Home style comes here			
			
			/* #Testimonial Slider
			================================================== */				
			Testimonial Slider style comes here	
			
			/* #Clients Slider
			================================================== */				
			Clients Slider style comes here	
			
			/* #Main Title
			================================================== */			
			Main Title style comes here	
			
			/* #Breadcrumb
			================================================== */				
			Breadcrumb style comes here	

			
		/* #Sidebar
		================================================== */			
			Sidebar style comes here	
			
			/* #Portfolio
			================================================== */			
			Portfolio style comes here	

			/* #Blog
			================================================== */			
			Blog style comes here	
			
			/* #Typography
			================================================== */			
			Typography style comes here	
			
			
	/* #404
	================================================== */		
	404 style comes here	
	
	/* #Contact Us
	================================================== */		
	Contact Us style comes here	
	
	/* #About
	================================================== */
	About style comes here	
	
	
	/* #Shortcodes
	================================================== */		
		/* Horizontal Tabs */
		Horizontal Tabs style comes here	
		
		/* Vertical Tabs */
		Vertical Tabs style comes here	
		
		/* Toggle & Accordions */
		Toggle & Accordions style comes here				
			
		/* Pricing Table */
		Pricing Table style comes here			
		
		/* Alert Boxes */			
		Alert Boxes style comes here		
		
		/* Progress Bar */		
		Progress Bar style comes here	
			
			
		/* #Footer
		================================================== */		
		Footer style comes here	

Javascript Files


This template imports several JS files.

The JS files used in this template are located at /js/ folder:

Customization


Changing Color / Skin

Inside the css folder you will see a php file called "skins.php" . This php file contains all the highlighted (blue) color of the template. You can use unlimited colors by placing the color code as below example.

    <link id="css-color" href="css/skins.php?color=ff26a0" rel="stylesheet" media="all" />
    

Changing Font

We have used Google Fonts in our template. You can use any google font by doing the following changes :

1. To change the embedded font, please take a look in the head part of the website and you should find the below tag:

    <!-- *.Google Fonts.* -->
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700,200' rel='stylesheet' type='text/css'>
    

To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.

2. Find the following lines in style.css and replace with your new font family.

 
    
    /* #General
    ================================================== */    
        body { font:normal 12px Tahoma, Geneva, sans-serif; }
    
	/* #Fonts
	================================================== */
	h1, h2, h3, h4, h5, h6, th, #main-menu ul li a, .slideshow-desc a.slideshow-btn, .date-comment-wrapper .date, .date-comment-wrapper .comment a, 
    #footer input[type="submit"], #contact-form input[type="submit"], ul.tabs-frame li a, ul.tabs-vertical-frame li a, ul.commentlist li cite.author-name, 
    .respond input[type="submit"], .button, .progress .bar-text, #iview .caption1, #iview .caption4, .mobile-menu { font-family:'Yanone Kaffeesatz', sans-serif; font-weight:400; }
    

Changing Logo

Either just edit the logo.png from the folder images/ , or open each page and you should see the tag there:

 
			    <!-- Logo -->
                <div id="logo">
                    <a href="index.html" title=""> <img src="images/logo.png" alt="" title="" /> </a> 
                </div><!-- Logo End -->

Changing Header Style

As you saw in the demo there are 4 simple types of headers. To change the types of the header you will have to make some changes in every single page:

     <header id="header" class="header2">
     .	.	.	.	.
     </header>
     

Change header2 with style3, style4. For default header no need to give type class here.

in demo we have changed the menu style in header 4 style. You have to call the "menu2" class in nav tag to get the menu style as in demo.

        <!-- *.Main Menu.* -->
        <nav id="main-menu" class="menu2">	
         .	.	.	.	.
        </nav>
    

Changing Theme ( Dark / Light Version)

There are 2 themes, dark and light. To change the theme please add the appropriate styles below the skins.php tag

For Light Version

    <link id="css-skin" href="skins/light/style.css" rel="stylesheet" media="all" />
    

For Dark Version

    <link id="css-skin" href="skins/dark/style.css" rel="stylesheet" media="all" />
    

Changing Layout( Boxed / Full Width)

By default the there will be stretched layout. To change the layot from being streched, just add the class boxed to body tag, for example

    <body class="boxed">

Sliders


Camera Slider

The page in which we are using this slider are

Markup

	        <!-- *.Camera Slider Wrap.* -->
            <div class="camera_wrap camera_ash_skin" id="camera_wrap_1">
                <div data-thumb="images/post-images/banner-thumb.jpg" data-src="images/post-images/banner.jpg">
                    <div class="camera_caption fadeFromBottom">
                        <div class="slideshow-content"></div>
                        <div class="slideshow-desc"></div>
                    </div>
                </div>
            
                <div data-thumb="images/post-images/banner2-thumb.jpg" data-src="images/post-images/banner2.jpg">
                    <div class="camera_caption moveFromLeft">
                        <div class="slideshow-content"></div>
                        <div class="slideshow-desc"></div>
                    </div>
                </div>
            </div>            
            <!-- *.Camera Slider Wrap End.* -->   
        

More details on   Camera Slider Details.  

Elastic Slider

The page in which we are using this slider is index-elastic-slider.html

Markup

        <div id="ei-slider" class="ei-slider">
            <ul class="ei-slider-large">
                <li>
                    <img src="images/post-images/fixed-slider1.jpg" alt="image01" />
                    <div class="ei-title">
                        <h2>Clean and Modern Design</h2>
                        <h3>Lorem ipsum </h3>
                    </div>
                </li>
                <li>...</li>
            </ul>
            <ul class="ei-slider-thumbs">
                <li class="ei-slider-element">Current</li>
                <li>
                    <a href="#">Slide 1</a>
                    <img src="images/post-images/ei-slider-thumb1.jpg" alt="thumb01" />
                </li>
                <li> .	.	.	. </li>
            </ul>
        </div>            
        

More details on   Elastic Slider Details.  

iView Slider

Explaining the view is beyond the scope of this documentation, so please refer the github for documentation about the iView.

The page in which we are using this slider is index-iview-slider.html

Markup

        <div id="iview">
            <div data-iview:image="images/post-images/iview-slider1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
                <div class="iview-caption caption1" data-x="80" data-y="70">Spotless</div>
                <div class="iview-caption" data-x="80" data-y="145" data-transition="wipeRight"> Ultra Modern Multipurpose - Best Suited For Ur Business  </div>
                <div class="iview-caption" data-x="254" data-y="190" data-transition="wipeLeft"><i>Presented by <b>Luvly Themes</b></i></div>
            </div>
        
            <div data-iview:image="images/post-images/iview-slider3.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
                <div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown"> Unlimited Colors - Easily customizable </div>
            </div>
        </div>
    

More details on   iView.  

Slit Slider

The page in which we are using this slider is index-slit-slider.html

Markup

        <div id="slider" class="sl-slider-wrapper">
         
            <div class="sl-slider">
             
                <div class="sl-slide bg-1">
                    <div class="sl-slide-inner">
                        <div class="deco" data-icon="H"></div>
                        <h2>A bene placito</h2>
                        <blockquote>
                            <p>You have just dined...</p>
                            <cite>Ralph Waldo Emerson</cite>
                        </blockquote>
                    </div>
                </div>
                 
                <div class="sl-slide bg-2">
                    <div class="sl-slide-inner">
                        <div class="deco" data-icon="q"></div>
                        <h2>Regula aurea</h2>
                        <blockquote>
                            <p>Until he extends the circle...</p>
                            <cite>Albert Schweitzer</cite>
                        </blockquote>
                    </div>
                </div>
         
                <div class="sl-slide bg-2">
                    <!-- ... -->
                </div>
         
                <!-- ... -->
         
            </div>
         
            <nav id="nav-arrows" class="nav-arrows">
                <span class="nav-arrow-prev">Previous</span>
                <span class="nav-arrow-next">Next</span>
            </nav>
         
            <nav id="nav-dots" class="nav-dots">
                <span class="nav-dot-current"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </nav>
         
        </div>    
    

More details on   slitslider.  

Nivo Slider

More details on http://nivo.dev7studios.com/

Any description i would write wouldn't be as detailed as it is on the Nivo Slider's website here http://nivo.dev7studios.com/support/jquery-plugin-usage/

You can find explanation for everything.

The pages which are using this slider are: index-nivo-slider.html

 

Flex Slider

This is a simple slideshow script but with lots of options. You can find more documentaion here http://www.woothemes.com/flexslider/

The HTML format is located in "index-flex-slider.html" between lines 208 to 224. The script data is located in the same file between lines 675 - 686.

Sequence Slider

We are using sequence silder in this page

Markup:

    <div class="sequence-slider">
        <div class="container">
        <div id="sequence">
            <ul>
                <!-- slide 1 -->
                <li>
                    <h2 class="title"> 100% Fully Responsive </h2>
                    <h3 class="subtitle"> Get it now </h3> 
                    <img class="slide-image" src="images/post-images/sequence-slider1.png" alt="slide_1" /> 
                </li>
                <!-- slide 2 -->
                <li>
                    <h2 class="title"> Light & dark Versions Available </h2>
                    <h3 class="subtitle"> Get it now </h3> 
                    <img class="slide-image" src="images/post-images/sequence-slider2.png" alt="slide_1" /> 
                </li>
                
            </ul>
        </div>
        </div>
        <!--navigation bullets-->
        <ul id="slide-nav">
            <li></li>
            <li></li>
        </ul>
    </div>
    

More details on   sequence slider details.  

Responsive Layerslider

The page in which we are using this slider are

More details on   documentaion .  

Pages


BLOG

The blog page has 5 types of layout

Remember, this is an html template so the blog page is only for styling purposes. Many developers download these html templates to integrate with their own CMS's .

To learn more about how the blog page is built please have a look at appropriate source code of the file

Markup:

FULL VIEW
            <div class="content content-full-width">
            	<article class="blog-item blog-full-view">
                	<!-- Blog Media Wrapper -->
                    <div class="blog-media-wrapper">
                    	<a title="" href=""> <img title="" alt="" src="images/post-images/blog-fullview1.jpg"> </a> 
                    </div><!-- Blog Media Wrapper End --> 
                    
                    <!-- Date - Comment Wrapper -->
                    <div class="date-comment-wrapper">
                        <div class="date">	
                            <span class="arrow"> </span>
                            <span class="day"> 09 </span> <span class="month"> Dec </span>
                        </div>
                        <div class="comment"> <a title="" href=""> 12 <br>	<span> Comments </span> </a> </div>
                    </div><!-- Date - Comment Wrapper End --> 
                    
                    <!-- Blog Content Wrapper -->
                    <div class="blog-content-wrapper">
                    	<h2 class="blog-title"> <a title="" href=""> Suspendisse faucibus luctus sem maecenas non </a> </h2>
                        <p class="blog-categories"> Posted in <a title="" href=""> Design </a> </p>
                        <div class="blog-content">	.	.	.	.	</div>
                    </div><!-- Blog Content Wrapper --> 
                </article>
            </div>
    
ONE COLUMN
            <div class="content content-full-width">
              <article class="blog-item blog-one-column"> 
                
                <!-- Blog Media Wrapper -->
                <div class="blog-media-wrapper">
                    <a title="" href=""> <img title="" alt="" src="images/post-images/blog1.jpg"> </a>
                </div><!-- Blog Media Wrapper End --> 
                
                <!-- Date - Comment Wrapper -->
                <div class="date-comment-wrapper">
                    <div class="date">	
                        <span class="arrow"> </span>
                        <span class="day"> 09 </span> <span class="month"> Dec </span>
                    </div>
                    <div class="comment"> <a title="" href=""> 12 <br>	<span> Comments </span> </a> </div>
                </div><!-- Date - Comment Wrapper End --> 
                
                <!-- Blog Content Wrapper -->
                <div class="blog-content-wrapper">
                  <h2 class="blog-title"> <a title="" href=""> Suspendisse faucibus luctus sem maecenas non </a> </h2>
                  <p class="blog-categories"> Posted in <a title="" href=""> Wordpres </a> </p>
                 <div class="blog-content">	.	.	.	.	</div>
                </div><!-- Blog Content Wrapper --> 
                
              </article>
            </div>            
      
TWO COLUMNS
            <div class="content content-full-width">
              <article class="blog-item blog-two-column"> 
                
                <!-- Blog Media Wrapper -->
                <div class="blog-media-wrapper">
                    <a title="" href=""> <img title="" alt="" src="images/post-images/blog1.jpg"> </a>
                </div><!-- Blog Media Wrapper End --> 
                
                <!-- Date - Comment Wrapper -->
                <div class="date-comment-wrapper">
                    <div class="date">	
                        <span class="arrow"> </span>
                        <span class="day"> 09 </span> <span class="month"> Dec </span>
                    </div>
                    <div class="comment"> <a title="" href=""> 12 <br>	<span> Comments </span> </a> </div>
                </div><!-- Date - Comment Wrapper End --> 
                
                <!-- Blog Content Wrapper -->
                <div class="blog-content-wrapper">
                  <h2 class="blog-title"> <a title="" href=""> Suspendisse faucibus luctus sem maecenas non </a> </h2>
                  <p class="blog-categories"> Posted in <a title="" href=""> Wordpres </a> </p>
                 <div class="blog-content">	.	.	.	.	</div>
                </div><!-- Blog Content Wrapper --> 
                
              </article>
            </div>      
      
WITH LEFT SIDEBAR
            <div class="content with-left-sidebar">
            	<article class="blog-item blog-full-view">
                	<!-- Blog Media Wrapper -->
                    <div class="blog-media-wrapper">
                    	<a title="" href=""> <img title="" alt="" src="images/post-images/blog-fullview1.jpg"> </a> 
                    </div><!-- Blog Media Wrapper End --> 
                    
                    <!-- Date - Comment Wrapper -->
                    <div class="date-comment-wrapper">
                    	<div class="date">	
                        	<span class="arrow"> </span>
                            <span class="day"> 09 </span> <span class="month"> Dec </span>
                        </div>
                        <div class="comment"> <a title="" href=""> 12 <br>	<span> Comments </span> </a> </div>
                    </div><!-- Date - Comment Wrapper End --> 
                    
                    <!-- Blog Content Wrapper -->
                    <div class="blog-content-wrapper">
                    	<h2 class="blog-title"> <a title="" href=""> Suspendisse faucibus luctus sem maecenas non </a> </h2>
                        <p class="blog-categories"> Posted in <a title="" href=""> Design </a> </p>
                        <div class="blog-content">	.	.	.	.	</div>
                    </div><!-- Blog Content Wrapper --> 
                </article>
            </div>
      
WITH RIGHT SIDEBAR
            <div class="content with-right-sidebar">
            	<article class="blog-item blog-full-view">
                	<!-- Blog Media Wrapper -->
                    <div class="blog-media-wrapper">
                    	<a title="" href=""> <img title="" alt="" src="images/post-images/blog-fullview1.jpg"> </a> 
                    </div><!-- Blog Media Wrapper End --> 
                    
                    <!-- Date - Comment Wrapper -->
                    <div class="date-comment-wrapper">
                    	<div class="date">	
                        	<span class="arrow"> </span>
                            <span class="day"> 09 </span> <span class="month"> Dec </span>
                        </div>
                        <div class="comment"> <a title="" href=""> 12 <br>	<span> Comments </span> </a> </div>
                    </div><!-- Date - Comment Wrapper End --> 
                    
                    <!-- Blog Content Wrapper -->
                    <div class="blog-content-wrapper">
                    	<h2 class="blog-title"> <a title="" href=""> Suspendisse faucibus luctus sem maecenas non </a> </h2>
                        <p class="blog-categories"> Posted in <a title="" href=""> Design </a> </p>
                        <div class="blog-content">	.	.	.	.	</div>
                    </div><!-- Blog Content Wrapper --> 
                </article>
            </div>
      

 

PORTFOLIO

The portfolio page has 4 types of layout

To learn more about how the blog page is built please have a look at appropriate source code of the file, Each portfolio columns pages has filterable and without filterable options.

TWO COLUMNS - WITHOUT FILTER
            	<div class="content content-full-width">
                	<!-- *.Portfolio Container.* -->
                    <div class="portfolio-container da-thumbs gallery">
                    	<div class="column one-half">
                        	<div class="portfolio-thumb">
                            	<img src="images/post-images/portfolio2.jpg" alt="" title="" /> <span> </span>
                            </div>
                            <article class="da-animate">
                            	<h2> <a href="" title=""> Cras aliquam pretium </a> </h2>
                                <h5> Vestibulum sollicitudin eros et neque mattis lacinia sit amet sit amet ipsum.
                                Ut dapibus elementum sagittis. </h5>
                                <a href="images/post-images/portfolio2.jpg" data-gal="prettyPhoto[gallery]" title="" class="zoom">
                                	<i class="icon-search"> </i> </a>
                                <a href="http://google.com" target="_blank" title="" class="detail">
                                	<i class="icon-external-link"> </i> </a>
                            </article>
                        </div><!-- one-half column end -->
                    </div> <!-- *.Portfolio Container.* -->
               </div>
      
THREE COLUMNS - WITHOUT FILTER
            	<div class="content content-full-width">
                	<!-- *.Portfolio Container.* -->
                    <div class="portfolio-container da-thumbs gallery">
                    	<div class="column one-third">
                        	<div class="portfolio-thumb">
                            	<img src="images/post-images/portfolio2.jpg" alt="" title="" /> <span> </span>
                            </div>
                            <article class="da-animate">
                            	<h2> <a href="" title=""> Cras aliquam pretium </a> </h2>
                                <h5> Vestibulum sollicitudin eros et neque mattis lacinia sit amet sit amet ipsum.
                                Ut dapibus elementum sagittis. </h5>
                                <a href="images/post-images/portfolio2.jpg" data-gal="prettyPhoto[gallery]" title="" class="zoom">
                                	<i class="icon-search"> </i> </a>
                                <a href="http://google.com" target="_blank" title="" class="detail">
                                	<i class="icon-external-link"> </i> </a>
                            </article>
                        </div><!-- one-third column end -->
                    </div> <!-- *.Portfolio Container.* -->
               </div>
      
FOUR COLUMNS - WITHOUT FILTER
            	<div class="content content-full-width">
                	<!-- *.Portfolio Container.* -->
                    <div class="portfolio-container da-thumbs gallery">
                    	<div class="column one-fourth">
                        	<div class="portfolio-thumb">
                            	<img src="images/post-images/portfolio2.jpg" alt="" title="" /> <span> </span>
                            </div>
                            <article class="da-animate">
                            	<h2> <a href="" title=""> Cras aliquam pretium </a> </h2>
                                <h5> Vestibulum sollicitudin eros et neque mattis lacinia sit amet sit amet ipsum.
                                Ut dapibus elementum sagittis. </h5>
                                <a href="images/post-images/portfolio2.jpg" data-gal="prettyPhoto[gallery]" title="" class="zoom">
                                	<i class="icon-search"> </i> </a>
                                <a href="http://google.com" target="_blank" title="" class="detail">
                                	<i class="icon-external-link"> </i> </a>
                            </article>
                        </div><!-- one-fourth column end -->
                    </div> <!-- *.Portfolio Container.* -->
               </div>
      
SORTABLE COLUMNS
            	<div class="content content-full-width">
                
                    <!-- *.Sorting Container.* -->
                    <div class="sorting-container">
                        <a href="" title="" class="active-sort" data-filter=".all-sort"> All <span> </span> </a>
                        <a href="" title="" data-filter=".blog-sort"> Blog <span> </span> </a> 
                        <a href="" title="" data-filter=".design-sort"> Design <span> </span> </a> 
                    </div><!-- *.Sorting Container End.* -->

                	<!-- *.Portfolio Container.* -->
                    <div class="portfolio-container da-thumbs gallery">
                    
                    	<div class="column one-fourth all-sort blog-sort">
                        	.	.	.	.	.
                            .	.	.	.	.
                        </div><!-- one-fourth column end -->

                    	<div class="column one-fourth all-sort design-sort">
                        	.	.	.	.	.
                            .	.	.	.	.
                        </div><!-- one-fourth column end -->

                    	<div class="column one-fourth all-sort blog-sort design-sort">
                        	.	.	.	.	.
                            .	.	.	.	.
                        </div><!-- one-fourth column end -->

                    </div> <!-- *.Portfolio Container.* -->
               </div>
      

 

CONTACT PAGE

Spotless's contact us page comes with four different layouts

Please refer "/php/sendmail.php to know about the mail() function used in above pages

404 TEMPLATE

The 404 page is added as a feature in this template. However this doesn't mean that in case of a 404 error this page will be shown.

To achieve this, please read these tutorials how you can add custom error pages:

http://www.javascriptkit.com/howto/htaccess2.shtml
http://www.besthostratings.com/articles/change-error-documents.html

Elements


Horizontal & Vertical Tabs

Here is the HTML structure for horizontal Tabs

   
    <div class="tabs-container">
        <ul class="tabs-frame">
            <li><a href="#"> Tab1 Title </a></li>
            <li><a href="#"> Tab2 Title </a></li>
            <li><a href="#"> Tab3 Title </a></li>
        </ul>
        <div class="tabs-frame-content">
            Tab1 Content   
        </div>
        <div class="tabs-frame-content">
            Tab2 Content   
        </div>
        <div class="tabs-frame-content">
            Tab3 Content   
        </div>
    </div>   
   

Here is the HTML structure for Vertical Tabs

   
    <div class="tabs-vertical-container">
        <ul class="tabs-vertical-frame">
            <li><a href="#">Tab1 Title<span></span></a></li>
            <li><a href="#">Tab2 Title<span></span></a></li>
            <li><a href="#">Tab3 Title<span></span></a></li>
        </ul>
        <div class="tabs-vertical-frame-content">
            Tab1 Content   
        </div>
        <div class="tabs-vertical-frame-content">
            Tab2 Content   
        </div>
        <div class="tabs-vertical-frame-content">
            Tab3 Content   
        </div>
    </div>                
   

Toggles and Accordions

Standard Toggle Style

Here is the HTML structure for Standard Toggle Style

            <h5 class="toggle"><a href="#">Toggle Title 1</a></h5>
            <div class="toggle-content" style="display: none;">
                <p> Toggle Content 1# </p>
            </div>
            
            <h5 class="toggle"><a href="#">Toggle Title 2</a></h5>
            <div class="toggle-content" style="display: none;">
                <p> Toggle Content 2# </p>
            </div>
            
            <h5 class="toggle"><a href="#">Toggle Title 3</a></h5>
            <div class="toggle-content" style="display: none;">
                <p> Toggle Content 3# </p>
            </div>
            
            <h5 class="toggle"><a href="#">Toggle Title 4</a></h5>
            <div class="toggle-content" style="display: none;">
                <p> Toggle Content 4# </p>
            </div> 
        

Framed Toggle Style

Here is the HTML structure for Framed Toggle Style

            <div class="toggle-frame">
                <h5 class="toggle"><a href="#">Toggle Title 1</a></h5>
                <div class="toggle-content" style="display: none;">
                    <p> Toggle Content 1# </p>
                </div>
            </div>
            
            <div class="toggle-frame">
                <h5 class="toggle"><a href="#">Toggle Title 2</a></h5>
                <div class="toggle-content" style="display: none;">
                    <p> Toggle Content 2# </p>
                </div>
            </div>
            
            <div class="toggle-frame">
                <h5 class="toggle"><a href="#">Toggle Title 3</a></h5>
                <div class="toggle-content" style="display: none;">
                    <p> Toggle Content 3# </p>
                </div>
            </div> 
        

Standard Accordion Style

Here is the HTML structure for Standard Accordion Style

        <!-- **Toggle Frame Set** -->         
        <div class="toggle-frame-set">
            <h5 class="toggle-accordion active"><a href="#">Accordion Title 1</a></h5>
            <div class="toggle-content" style="display:block;">
                <p> Accordion Content 1# </p>
            </div>
            
            <h5 class="toggle-accordion"><a href="#">Accordion Title 2</a></h5>
            <div class="toggle-content" style="display: none;">
                <p> Accordion Content 2# </p>
            </div>
            
            <h5 class="toggle-accordion"><a href="#">Accordion Title 3</a></h5>
            <div class="toggle-content" style="display: none;">
                <p> Accordion Content 3# </p>
            </div>
            
            <h5 class="toggle-accordion"><a href="#">Accordion Title 4</a></h5>
            <div class="toggle-content" style="display: none;">
                <p> Accordion Content 4# </p>
            </div>
        </div> <!-- **Toggle Frame Set - End** -->  
        

Framed Accordion Style

Here is the HTML structure for Framed Accordion Style

        <!-- **Toggle Frame Set** -->  
        <div class="toggle-frame-set">
            <div class="toggle-frame">
                <h5 class="toggle-accordion active"><a href="#">Accordion Title 1</a></h5>
                <div class="toggle-content" style="display: block;">
                    <p> Accordion Content 1# </p>
                </div>
            </div>
            
            <div class="toggle-frame">
                <h5 class="toggle-accordion"><a href="#">Accordion Title 2</a></h5>
                <div class="toggle-content" style="display: none;">
                    <p> Accordion Content 2# </p>
                </div>
            </div>
            
            <div class="toggle-frame">
                <h5 class="toggle-accordion"><a href="#">Accordion Title 3</a></h5>
                <div class="toggle-content" style="display: none;">
                    <p> Accordion Content 3# </p>
                </div>
            </div>
        </div> <!-- **Toggle Frame Set - End** -->                         
        

 

Progress Bars

Here is the HTML structure for Progress Bars

    <div class="progress progress-striped">
        <div data-value="75" class="bar">
            <div class="bar-text"> HTML5/CSS3 <span>75%</span></div>
        </div>
    </div>
    

Custom Color : The default background color is blue. It will change based on the skin. You can give custom color by inserting a element style as shown in the below example. Use active class for stripe animation.

    <div class="progress progress-striped active">
        <div data-value="90" style="background-color:#ff26a0;" class="bar">
            <div class="bar-text"> WebDesign <span>90%</span></div>
        </div>
    </div>
    

 

Blockquotes

There are two types of Blockquotes. Quotres With image and without image.

Here is the HTML structure for Blockquotes with author image

    <div class="testimonial-content">
        <blockquote> <p> Quote </p> <span> </span> </blockquote>
        <div class="testimonial-author">
            <img src="images/post-images/quote-image.jpg" alt="" title="" />
            <p> Vestibulum sed est <br /> <span> Sed lorem </span>  </p>
        </div>
    </div>    
    

To dispaly the image in right just add with-right-image class in testimonial-content div

For Ex :

    <div class="testimonial-content with-right-image">
 	

Here is the HTML structure for Blockquotes without image

    <blockquote> <p> Quote </p> <span> </span> </blockquote>
    

 

Alert Boxes

Here is the HTML structure for Alert Boxes

        <div class="error-box"> Your Text Goes Here </div>
        <div class="warning-box"> Your Text Goes Here </div>
        <div class="success-box"> Your Text Goes Here </div>
        <div class="info-box"> Your Text Goes Here </div>
    

 

Buttons

Here is the sample code for button. Replace button-size with the appropriate class(small, medium. large) and replace button-color with the predefined colors (black, grey....)

    <a href="" class="button button-size button-color"> Large Buton </a>
    
    	Predefined Colors :		Button Sizes :
        black				small
        grey				medium
        orange 				large
        green
        pink
        blue
        red
        purple

 

Lists

Here is the HTML structure for lists. Please replace "list-type" with the available list icons.

        <ul class="fancy-list list-type">
            <li> Duis quis arcu quis urna </li>
            <li> Cras faucibus aliquet ligula </li>
            <li> Quisque auctor elit sed  </li>
        </ul>
    

Available List icons

    arrow
    rounded-arrow
    double-arrow
    heart
    trash
    star
    star-empty
    tick
    rounded-tick
    cross
    rounded-cross
    rounded-question
    rounded-info
    delete
    warning
    rss
    twitter
    facebook
    linkedin
    google-plus
    comment
    edit
    share
    plus
    rounded-plus
    minus
    rounded-minus
    mobile
    reply
    
    time
    globe
    pushpin
    map-marker
    link
    paper-clip
    download
    asterisk
    cart
    folder
    folder-open
    desktop
    tablet
    key
    search
    file
    quote
    mail
    external-link
    adjust
    pencil
    print
    tag
    thumbs-up
    thumbs-down
    book
    gift
    cloud-download  
    

 

Pricing tables

Here is the HTML structure for Pricing tables. Use selected class to highlight the particular column.

<!-- **Pricing Table** -->
<div class="pricing-table no-space">

    <div class="column one-fourth">
        <!-- Column 1 -->
        <div class="pr-tb-col">
            <div class="tb-header">
                <h2> Basic </h2>
            </div>
            <div class="tb-price">
                <sup> $ </sup> 9 <sub> 99 <br /> <span> /month </span> </sub> 
            </div>
            <ul class="tb-content">
                <li> Feature1 </li>
                <li class="cross"> Feature2 </li>
            </ul>
            <div class="signup-now">
                <a href="" title="" class="button small"> Sign Up Now </a>
            </div>
        </div><!-- Column 1 End -->                        
    </div>
    <div class="column one-fourth">
        <!-- Column 1 -->
        <div class="pr-tb-col">
            <div class="tb-header">
                <h2> Professional </h2>
            </div>
            <div class="tb-price">
                <sup> $ </sup> 19 <sub> 99 <br /> <span> /month </span> </sub> 
            </div>
            <ul class="tb-content">
                <li> Feature1 </li>
                <li class="cross"> Feature2 </li>
            </ul>
            <div class="signup-now">
                <a href="" title="" class="button small"> Sign Up Now </a>
            </div>
        </div><!-- Column 1 End -->                        
    </div>
    <div class="column one-fourth">
        <!-- Column 1 -->
        <div class="pr-tb-col selected">
            <div class="tb-header">
                <h2> Premium </h2>
            </div>
            <div class="tb-price">
                <sup> $ </sup> 29 <sub> 99 <br /> <span> /month </span> </sub> 
            </div>
            <ul class="tb-content">
                <li> Feature1 </li>
                <li class="cross"> Feature2 </li>
            </ul>
            <div class="signup-now">
                <a href="" title="" class="button small"> Sign Up Now </a>
            </div>
        </div><!-- Column 1 End -->                        
    </div>
    <div class="column one-fourth last">
        <!-- Column 1 -->
        <div class="pr-tb-col">
            <div class="tb-header">
                <h2> Extra </h2>
            </div>
            <div class="tb-price">
                <sup> $ </sup> 39 <sub> 99 <br /> <span> /month </span> </sub> 
            </div>
            <ul class="tb-content">
                <li> Feature1 </li>
                <li class="cross"> Feature2 </li>
            </ul>
            <div class="signup-now">
                <a href="" title="" class="button small"> Sign Up Now </a>
            </div>
        </div><!-- Column 1 End -->                        
    </div>
    
</div><!-- **Pricing Table - End** -->  

Responsive


Spotless is completely responsive template. It means that spotless completely adapt to the user's viewing environment (mobile, tablet, laptop etc.).

You can find the responsive media queries in responsive.css located at root folder of the template.

you can check the spotless with various viewing environment at here

FAQ


HOW TO SHOW TWITTER FEEDS ?

Markup:

<div class="tweets" data-twitter-username="*****" data-twitter-count="4"> </div>
        Attributes
        	1. data-twitter-uesrname 	= This will display the tweets that are associated with an acount you specify
        	2. data-twitter-count 	= This will be used to specify the number of tweets to be shown for the specifed account 
        

HOW TO SHOW GOOGLE MAP ?

Markup:

<div class="map" data-address="No: 60 B, East West St New York, SD USA" data-zoom="16"> </div>
        	Attributes
            	1. data-address	=	Specify in which place you want to show marker in map
                2. data-zoom	=	The initial map zoom level
    

HOW TO SHOW FLICKR PHOTO STREAM ?

Markup:

        <ul class="flickr-widget" data-id="52617155@N08" data-count="9" data-image-size="s">
        </ul>
    
        	Attributes
            	1. data-id	=	A single user ID. This specifies a user to fetch for.
                2. data-count	= 	Set how many items you want to loop through. ( maximum : 20 )
                3. data-image-size = 	Image size
                	s = small square (75*75)
	                q = large square 150x150
	                t = thumbnail, 100 on longest side
	                m = small, 240 on longest side
	                n = small, 320 on longest side
	                z = medium 640, 640 on longest side
	                b = large, 1024 on longest side
	                c = medium 800, 800 on longest side
        

PRETTYPHOTO LIGHTBOX

Markup:

        	<a href="..." rel="prettyPhoto"> ... </a>
            <a href="..." data-gal="prettyPhoto"> ... </a>
    

To add prettyphoto to a link, make sure you add one of the above attributes to the link itself.

HOW DO I CHANGE THE LAYOUT TO BOXED ?

To change the layot from being streched, just add the class boxed to body tag

Markup:

    	<body class="boxed" >
    

HOW TO ENABLE / DISABLE STYLE SWITCHER ?

To enable or disable the Style Switcher , you have to modify the spotless.common.js

	    $('body').spotless_style_picker({enablePicker: true});
        
        enablePicker :
        	 true - To enable it
             false - To disable it
    

Fonts


We have used following fonts in our template

PSD Files


We have included 20 PSD files in this template

Source & Credits


What else


I spent a lot of time on this thing. Nevertheless it's still not finished. I like to improve it wherever I can and appreciate your feedback.

Best wishes

LuvlyThemes
always deliver more than expected