Template Help

Version 1.2

Cross Browser, High Quality and Responsive Multipurpose HTML Template.

Thank you very much for purchasing our template. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions.

Getting Started

Requirements

For installing this template you need to make sure that you have the following extensions on your webserver. You will need to contact your webhost if the following requirements are missing.

Installation

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be contents and folder with documentation. Copy all contents, except from folder with documentation, to your server via FTP client.

In this archive will not images, that you can see in demo pages, every images have absolute path from out server except for icons.

Preloader

Before the main contents of the website are loaded, there is an opportunity to show the preloader of the site. It can be any image, a gif-animated icon. You can change the path to the image.

            612 : .preloader {
             background: url(../images/preloader.gif);
            }
        

If you don’t need the preloader, you can delete div with class preloader in each html files.

            <!-- Preloader -->
            <div class="preloader"></div>
        

Favicon

To change the favicon image of your site, you need to load a new image in a site root or to point out a new address of the image.

            <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
        

Color Skins

There have already been created 2 color skins:

            <body class="skin-dark">
             …
            </body>
        

The chosen theme changes header background, menu colors, borders, some text elements, navigation bars. In the style.css file in a [ SKINS ] section there are settings for dark theme.

You can change current theme or create your own by analogy, using new skin-class.

Modular grid

Denver is built on the system by using a 12-column markup. With the help of the given system you can create almost any modular grid and insert a necessary content into created modules. Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Twitter Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. All features and opportuntes you can use in this project. If you need create new table or add accordion or use navbar menu, just go to the appropriate section in Bootstraps documentation copy and paste example.

           <div class="row">
             <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            </div>
             
            <div class="row">
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            </div>
        

Of course, there are many other features you do not look for in twitter bootstrap this project has. A great amount of different sliders, counters, bars, chars, pricing table and so on.

Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Create lighter, secondary text in any heading with a generic <cite> or <q> tags.

Highlights

To highlight one of the blocks with another background color it’s necessary to add class:

            <div class="alert alert-success fade in">
                 <button class="fa fa-close" type="button" data-dismiss="alert"></button>
                 Success message
            </div>
        

Alignments

To adjust the content inside a structural element it’s necessary to add the classes text-left, text-center or text-right. To align by vertical you should use like-table structure with divtable and divcell classes:

            <div class="divtable">
             <div class="divcell">
              <p>Vertical aligned Text with any height</p>
             </div>
            </div>
        

Quotes

Under this template quotes may be as a slider and can be text. Slider markup you find in a Slider section. Text quote has blockquote tag and paragraph inside. You may add a footer for identifying the source.

            <blockquote>
                 <p>Gregor becomes annoyed at how his boss never accepts excuses or explanations from any of his employees no matter how hard-working they are, displaying an apparent lack of trusting abilities.</p>
                 <footer>— Sam Robertson</footer>
            </blockquote>
        

Font Settings

To change the font-family you will have to edit the file css/style.css. If the font is a standard one, built the system by default, you can just write it here.

                1861 : body { font-family: 'Helvetica', 'Arial', sans-serif;  } // or whatever you want (e.g. "Helvetica")
            

Also you can use Google Font and connect it to your website.

  1. Go to http://www.google.com/fonts.
  2. Choose the appropriate font.
  3. Click the Quick-use button ().
  4. Choose the styles that you want.
  5. Choose the character sets that you want.
  6. Below that choice standard tab and copy this line.
  7. Paste this line to the all html pages into the head tag.
  8. At last, copy font-family name from Google Fonts website and paste on css/style.css: body { font-family: "Raleway", sans-serif; }.

Blog

Our template contains all needed pages to create fully-worked and oriented for blog pages. Over 10 pages for blog were html-coded and represented for using. Blog list presented in several forms: masonry, fullwidth, with left/right sidebar. Also we considered 8 types of posts, standard blog.

  1. Single Post Image;
  2. Single Post Audio;
  3. Single Post Gallery;
  4. Single Post Link;
  5. Single Post Quote;
  6. Single Post Video;
  7. Single Post with left/right sidebar.

Inside blog pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.

Each post has class post and additional contextual class.

Post Sidebar

To add sidebar for post pages with widgets you have to look at the blog/post-sidebar-right.html page. In example we added a few standard wordpress markup for widgets:

Post Audio

For posts with audio we use powerfull MediaElement plugin. HTML5 audio players in pure HTML and CSS.

            <audio src="http://demo.aisconverse.com/AirReview-Landmarks-02-ChasingCorporate.mp3" controls="controls"></audio>
        

Post Video

For posts with video we use responsive embeded from Twitter Bootstrap Framework. Rules are directly applied to iframe elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

            <!-- 16:9 aspect ratio -->
            <div class="embed-responsive embed-responsive-16by9">
                 <iframe class="embed-responsive-item" src=""></iframe>
            </div>

            <!-- 4:3 aspect ratio -->
            <div class="embed-responsive embed-responsive-4by3">
                 <iframe class=embed-responsive-item" src=""></iframe>
            </div>
        

Ecommerce

About 18 pages marked up specifically for the ecommerce catalog. For catalog were created 3 variants:

  1. Catalog Grid (Masonry);
  2. Catalog Grid Sidebar Right;
  3. Catalog Grid Sidebar Left.

All of this pages contain maincontent with products and 2 pages has filtering sidebar with additional settings and widgets. Also project has 3 variants of product page (product normal, product downloadable, product variations) with more detail fully information about single product with rating, comments, description, tables, gallery and filter. When you choose needed product you should order him. For this purposes were created additional 7 pages:

  1. Cart;
  2. Cart Empty;
  3. Checkout;
  4. Order List;
  5. Billing Address;
  6. Shipping Address;
  7. Confirmation.

Inside ecommerce pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.

To login, register and change/lost password were created additional account pages: Account, Login, Register, Change Password, Lost Password.

Rating

In this project we use a great jQuery plugin - jQuery Raty - it's A Star Rating Plugin. Very simple to use, and here you can see an example:

            <div class="raty" data-score="4" data-readonly="true"></div>

            <div class="raty"></div>
        

We use star icons from wonderfull FontAwesome service, and you can change 3 types of statements in js/custom.js file:

            instance.rating.raty({
             half: true, // to add half stars
             starType: 'i', // tag element for star
             starOff: 'fa fa-star-o', // class for empty-star
             starOn: 'fa fa-star', // class for fill-star
             starHalf: 'fa fa-star-half-o' // class for half-star
            });
        

Product Quantity

For counting items in cart, change amount for more/less you may use like this structure:

            <a href="" class="minus disabled">-</a>
            <input type="text" value="1">
            <a href="" class="plus">+</a>
        

Team

Team page contain persons with modal description. Modal window using by Bootstrap Modal plugin. At first, add link for opening modal window. Obligatory data-attribute data-toggle="modal" and data-target where you should write id modal window.

All persons should be wrap in a .team block.

                <div class="col-sm-4 col-xs-6">
                 <img src="…" alt="">
                 <a class="mask" href="#person-1" data-toggle="modal">
                  <h4>
                   Susana Jacobs
                   <cite>Designer</cite>
                  </h4>
                 </a>
                </div>
            

Modal window uses general structure for 12-columns and has close link, for hiding modal, also should be person-modal class:

            <div class="modal person-modal" id="person-1">
                 <a href="" class="close" data-dismiss="modal"></a>
             <div class="divtable">
              <div class="divcell">
               <article class="container">
                …
               </article>
              </div>
             </div>
            </div>
        

Portfolio

You can organize your portfolio according to the preset filters. At first, you create works navigation with category:

                <div class="row categories">
                 <ul class="nav-category">
                  <li class="selected">
                   <a href="#all" class="filter" data-filter="*">All</a>
                  </li>
                  <li>
                   <a href="#modeling" class="filter" data-filter=".modeling">Modeling</a>
                  </li>
                  <li>
                   <a href="#branding" class="filter" data-filter=".branding">Branding</a>
                  </li>
                 </ul>
                </div>
            

Items of this list have obligatory class filter and data-filter attribute, which helps you divide works on needed category. Under this project can be 2 types of portfolio works:

  1. Isotope Layout;
  2. Grid MixItUp Layout.

The main difference between the two types are in different classes of parent block: isotope-list masonry-wrap and mix-list accordingly. The first type makes the portfolio masonry-view, where single work may have different sizes, the second type makes grid system with the same width columns.

            <div class="row isotope-list masonry-wrap">
             <div class="col-sm-4 col-xs-6 mix branding">
              <img src="…" alt="">
              <a href="" class="mask">
               <h4>
                Drinking Bottle
                <cite>Modeling</cite>
               </h4>
              </a>
             </div>
             <div class="col-sm-8 col-xs-6 mix branding">
              <img src="…" alt="">
              <a href="" class="mask">
               <h4>
                Eco Bag
                <cite>Branding</cite>
               </h4>
              </a>
             </div>
            </div>
            …
        

Each of mix block should has filtering class: branding, modeling and etc. Some words about your work. When you click one of the description, full gallery or new page or modal window will open.

To open gallery in a modal window, you should add array of images to data-gallery attribute for a link and obligatory additional class magnific-gallery:

             <div class="col-sm-4 col-xs-6 mix branding">
              <img src="…" alt="">
              <a href="" data-gallery="image-1.jpg, image-2.jpg, image-3.jpg, image-4.jpg, image-5.jpg"  class="mask magnific-gallery" title="Wooden Chair">
               <h4>…</h4>
              </a>
             </div>
        

Portfolio Video

To open video in a modal, you should add video url (youtube or vimeo) for link and obligatory additional class magnific-video:

             <div class="col-sm-4 col-xs-6 mix branding">
              <img src="…" alt="">
              <a href="https://vimeo.com/45830194" title="Whistle" class="mask magnific-video">
               <h4>…</h4>
              </a>
             </div>
        

Single Project

In addition to isotope/grid layout we have done some types of single project pages. All of this pages have different markup and unique design:

  1. Classic;
  2. Downloadable;
  3. Extended;
  4. Grid;
  5. Sidebar;
  6. Video.

Sliders

Sliders allow you to save space, animate and decorate your site. Under this theme there can be several sliders with different settings, which not depends on bootstrap settings.

The slider occupies the whole section by adding a special class slider or additional oneslider (for one-image gallery) to the parent block and some additional markup into it. In each of them there can be 12-columns system with various elements. For each slider we use carouFredSel slider. jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. And it's responsive too.

Each slider has additional parameters, which can use or not. All of this parameters add to ul list as data-attribute:

For navigate slider uses slider arrows and slider pagination. Previous button should have class prev, next buttons - next. Pagination should have class nav-pages.

Arrows and navigation are not obligatory. If the true definition is set up in the data-auto attribute, it means that slides will switch in a specified period of time without these elements.

By default, arrows do not have background and positioned under slider. To add background and make arrows square you should add class square. To position the arrow at the bottom right or bottom left add class right-bottom or left-bottom.

One-image Gallery

A responsive one-image gallery has a markup:

            <!-- SLIDER -->
            <div class="slider oneslider">
             <ul>
              <li>
               <a href="">
                <img src="…" alt="">
               </a>
              </li>
              <li>
               <a href="">
                <img src="…" alt="">
               </a>
              </li>
             </ul>
             <div class="slider-nav">
              <a href="" class="prev">←</a>
              <nav class="nav-pages"></nav>
              <a href="" class="next">→</a>
             </div>
            </div>
            <!-- /.slider -->
        
  1. Add classes slider oneslider into a parent block;
  2. create a familiar section structure;
  3. ul – an marked list with slides;
  4. Sliders li elements can contain align classes;
  5. There is a content with a 12-column markup and a random set of elements in the slider.

Restricting the number of visible items to a minimum and maximum amount. The main difference between this slider and previous - no class oneslider. Amount of visible items in a page depends on modular grid classes col-sm-#.

Carousel of Logotypes

In general we can use slider with logotypes or some another link images. Only one difference for this slider it's adding additional class logotypes to slider block. All images into this slider have opacity: 0.2 and hover effect opacity: 0.7.

Pricing

Theme has page with prices (pages/pricing.html). There we use also unique slider with obligatory class pricing for slider and some custom markup. Let's look on it:

Each slide has attribute data-period where writes period.

            <!-- SLIDER -->
            <div class="slider oneslider pricing irow">
             <ul>
              <li data-period="Per Month">
               <div class="col-md-3 col-sm-6">
                <h3>Simple</h3>
                <div class="num"><sup>$</sup>0</div>
                <p class="text-muted">Per month</p>
                <hr/>
                <p>Project Scoping
                 Process Planning
                 Project management
                 —
                </p>
                <a href="" class="btn btn-default">Free Trial</a>
               </div>
               …
              </li>
              <li data-period="Per Year">
               …
              </li>
             </ul>
             <nav class="nav-pages"></nav>
            </div>
            <!-- /.slider -->
        

Variations of home pages show us new interest and unique sliders. Some of them has fix height, some has animated absolute-positioned blocks. The last remark of this section is fullscreen slider. Good example you may see on the home/home-onepage.html page. To block with classes slider oneslider you should add class fullscreen.

After all of this slider examples you can use yourself or something new for each types.

Google Maps

In html file you should write really simple code, with main class google-map:

            <div class="google-map">
                 <div class="google-map-container" data-markers="51.513447,-0.1159143; 51.543447,-0.1359143" data-center="51.513447,-0.1159143" data-zoom="11"></div>
             <a href="#google-map-popup" class="a-map fa fa-search" data-toggle="modal"></a>
            </div>
        

In html structure you may set all needed settings. Map may have single marker or many. To get the longtitude and latitude you can use the following service. Click a map and replace a marker into the place you need after switching to a link. Then insert the received coordinates into the data-markers separated by commas. Next one, data-center - write coordinates to the center map and the last data-zoom - the value of the map zoom.

Under the google map container goes link, which open modal map in a fullscreen. The position of this link may be changed to another corner. The modal window code is trivial only wrap and map container with close link into it.

Contact.html file has an example with google map and modal.

Google map, by default, has 100% width and fixed height. This sizes may be changed in css/style.css file. On page may have more than one map, it does not matter how many, copy and paste the same structure, change coordinates and add/remove markers.

Countdown

Coming soon page has countdown. To set the date for the countdown edit js/custom.js:

            11: countdownTo: '2015/06/01'
        

To customize countdown view, you have to edit css/style.css. Also do not forget to change code in responsive section.

            2820 : .countdown > div {
             font-size: 90px;
             color: #1A1A1A;
             text-align: left;
            }
             
            2843 : .countdown i {
             font-style: normal;
             font-size: 45px;
             color: #A6A6A6;
            }
             
            2855 : .countdown ins {
             font-size: 17px;
             color: #808080;
             text-align: center;
            }
        

Shortcodes

Over a dozen reusable components built to provide dropdowns, boxes, dividers, accordions, charts, alerts, headings, lists, tabs and more.

Accordions

Extend the default collapse behavior to create an accordion with the panel component. More details and examples look at the bootstrap page.

            <div class="panel-group">
                 <div class="panel">
              <div class="panel-heading">
               <a data-toggle="collapse" href="#clps-21">
                <i class="fa fa-minus fa-fw"></i>
                Accountabilities
               </a>
              </div>
              <div id="clps-21" class="panel-collapse collapse in">
               <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetuer leo, vel purus, nonummy dolor auctor quam.</p>
               </div>
              </div>
             </div>
            </div>
        

For more attractive your panels to panel-heading added toggle icon. More examplaes you may see in elements/elements-accordions.html page. There are a few types of icon you may use by default:

Alerts

Alert it's a div block with class alert + additional contextual class: info, warning, danger or success. Inside alerts may be different code without limitations. The simplest example it's cautionary text with icon:

            <div class="alert alert-warning fade in">
                 <button class="fa fa-close" data-dismiss="alert" type="button"></button>
             <i class="fa fa-exclamation-triangle"></i>
             Alert icon message
            </div>
        

Buttons

There are many types of button this project has. Small, normal big buttons; link, primary, default, warning, icon buttons. All of this types are customized. For icon used fontawesome service. More details you may find in elements/elements-buttons.html page. The simplest example:

            <a class="btn btn-default btn-thn" href="example.html">
             <i class="fa fa-cloud-download"></i>
             Icon Button
            </a>
        

Charts & Counters

In the role of charts are the counters. Counters allow you to see the process of increasing any meaning to the required one when the counter area is in the visible browser screen. There can be several counters. To add a counter to the site create the div block with the class countup, after add obligatory attributes to it. If you add additional class progress-up the increasing border line will appear.

            <div class="countup" data-increment="70" data-num="3640"></div>
            — — —
            <div class="countup progress-up" data-increment="1" data-num="76" data-sign="%"></div>
        

Icons

Under this project in images/icons folder you may find many beautiful image-icons. All of this use inside template. To show icon on the page add new image with obligatory class img-icon. There are many types of examples and their structure you find in elements/elements-text-icons.html page.

In addition image-icons we you use excellent Fontawesome service. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Over 500 new icons.

Lists

A few different types of lists presented in a Denver template. Lists may be marked, unmarked, numeric, multilevel, with bagdes. All of this types may combined. To use clear list without any markers add flat class to ol or ul element. To use category list with badges write down next structure:

            <ol class="category-list">
             <li><a href="">General <span class="pull-right">13</span></a></li>
             <li><a href="">Requirements <span class="pull-right">6</span></a></li>
             <li><a href="">Installation <span class="pull-right">3</span></a></li>
            </ol>
        

Tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Of course, we use general Bootstrap markup for this purpose. Many types of example you find in elements/elements-tabs.html page. You can activate a tab navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. Tabs may be:

  1. with vertical navigation;
  2. with horizontal navigation.

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content. Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

            <ul class="nav nav-tabs tabs-vertical">
                 <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
             <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
            </ul>
            <div class="tab-content">
             <div class="tab-pane fade in active" id="tab1">
              <h4>Tab 1</h4>
             </div>
             <div class="tab-pane fade" id="tab2">
              <h4>Tab 2</h4>
             </div>
            </div>
        

Animation

Each block may have animate effect when this block is in the visible browser screen. It adds interactivity and mobility project. For animation uses CSS3 transitions and brilliant tablesheet from Animate.css comunity. Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

            <div class="animate" data-animate="fadeInLeft">
                …
            </div>
        

Add the class animate to the element you want to animate and obligatory data-animate attribute with the name of css effect. You may also want to include the class infinite for an infinite loop. In this project many sliders on home pages have animate effects. List the names of effects:

Forms

There are many different types of forms on this template. Each of them stylized, have suitable types, helper classes and placeholder text.

Feedback

Feedback forms may contain the following blocks:

All the areas must be in the form tag. The tag must have obligatory attributes:

Each area in the form must contain unique forms id, the name attribute and a not obligatory placeholder attribute. Id and name attributes must remain the same as shown above for the proper work and its further processing. The placeholder is a text which is shown to the user before inputting the main text in the area.

The sending button can be stylized by the code in the style sheet or by adding/changing the existing class. The text on the button is set up with the help of the value attribute.

If form areas are filled in the right way, after pressing the button there will appear a message. It fixed positioned in a left bottom corner of the page. Structure of this message looks like:

            <div class="noty-success">
             <div class="close fa fa-times"></div>
             <i class="fa fa-check-circle-o"></i>
             <span>Message was sent</span>
            </div<
        

If areas are filled in the incorrect way or aren’t filled required fields, the class has-error is added to the parent block that hasn’t been validated. The invalid area style can be changed.

            2960 : .has-error input[type=text],
              .has-error input[type=email],
              .has-error input[type=number],
              .has-error input[type=url],
              .has-error input[type=password],
              .has-error input[type=search],
              .has-error textarea {
              color: #E84646;
            }
        

In the php/email.php file you can change the address of message receiving, a message topic, also the whole text that will deliver to the administrator of the site.

  • define('EMAIL_ADMIN_SENT_TO', 'admin@gmail.com'); - an e-mail address to which a letter will be sent for the administrator template;
  • define('EMAIL_ADMIN_SUBJECT', 'Feedback letter from contacts form on Denver'); - the topic of a letter for the administrator template;
  • define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Denver'); - the topic of a letter for the sender;
  • $letterToAdmin = … - the template of a letter for the administrator;
  • $letterToClient = … - the template of a letter for the sender;
  • an e-mail on behalf of whom a letter is sent to the sender: $headers .= "From: feedback@Denver.local\r\n";. \r\n obligatory to save at the end of the line.

MailChimp Subscription Form

You need to change the Mailchimp's List URL in your html file for the Newsletter form. Check this link How can I add my signup form on my website and try to insert correct URL from code in Step 5.

            <form action="http://aisconverse.us8.list-manage.com/subscribe/post?u=86ec31fd6b7533ccaa2435111&id=a1293dd461" method="post">
             <input type="email" required="" placeholder="Enter email" name="EMAIL">
             <button class="btn btn-primary btn-icon" type="submit">
              <i class="fa fa-envelope-o"></i>
             </button>
            </form>
        

To change the succcess or error text, you will have to edit js/custom.js:

            13 : successText: 'Thanks. You have successfully subscribed. Please check email to confirm.',
            14 : errorText: 'Please, enter a valid email'
        

Scrolltop Button

To scroll the template up, to its beginning, there is a special button that appears by scrolling the page down. Its code is:

            
            <a href="#" class="scrolltop">↑</a>
        

To change its style you need to edit the css/style.css file.

            1197 : .scrolltop {
             width: 60px;
             height: 60px;
             background-color: rgba(51,51,51,.1);
             color: rgba(255,255,255,.8);
            }
             
            1216 : .scrolltop:hover {
             background-color: #333;
             color: #FFF;
            }
        

Also, to change offset position, when this button show, you have to edt js/custom.js file scrollTopButtonOffset global variable:

           12 : scrollTopButtonOffset: 500
        

Error Page

For special pages, like 404, 505 or under construction use a few another markup. At first, you should add class error404 for body tag. This pages do not contain header and footer like in another pages. Under this theme is a simplified version of the 404 page with heading, paragraph and home button. By analogy of this pages you may create suitable and needed for your purposes pages.