Chino - Documentation

Version 1.6

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. If you have any questions that aren’t covered in this article, please feel free to email us on our user page, you can find the contact form here.

Don’t forget to rate this template, it helps us improve our products.

We invite you to view our portfolio.

Thanks so much!

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.

  • PHP 5.2+;
  • PHP Mail support;
  • Enabling JavaScript in the web browser.

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.

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.

css/style.css
                    887 : #status {  background-image: url(../images/preloader.gif); }
                

If you don’t need the preloader, you can delete div with id preloader.

                    
                    <div id="preloader">
                     <div id="status">&nbsp;</div>
                    </div>
                

Favicon

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

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

Color themes

There have already been created 2 special classes for the body tag, which stylize a color scheme.

  • skin-dark - a dark color theme;
  • skin-light - a default liht color theme (You may use without class).
                    <body class="skin-dark"> … </body>
                

The chosen theme changes the background, some text elements, navigation bars, pagination. In the style.css file in a [ 24. SKIN-DARK ] section there are settings for color theme. You can change current theme or create your own theme by analogy.

Modular grid

The Template 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 in created modules.

Twitter Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. All features and opportuntes you can use in this project. If you need create new table or add accordeon or use navbar menu, just go to the appropriate section in Bootstraps documentation copy and paste example.

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.

Highlight

To highlight one of the columns with another color it’s necessary to add some of classes:

  • .bg-info;
  • .bg-primary;
  • .bg-default;
  • .bg-warnin;
  • or use another standart bootstrap helper class.
                    <div class="col-md-4 bg-info">
                         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
                    </div>
                

You can add a padding as a one-pixel separator between two vertical blocks. To do it you need to add a <hr/> tag:

                    <div class="col-xs-12">
                         <p>Some text bla-bla…</p>
                         <hr/>
                         <p>Some text bla-bla…</p>
                    </div>
                

By default it has transparent background color and it adds only padding, but you can stylize it.

Alignment

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, here an example (or in the error404 page):

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

Sliders

Sliders allow you to save space, animate and decorate your site. In the template 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 oneslider (for one-image gallery) to the parent block and some additional markup in it. In each of them there can be 12-columns system with various elements. For every sliders 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.

One-image Gallery

A responsive one-image gallery has a markup:

                        
                        
      
  •           
  •   
  •           
  1. We add class oneslider into a div block;
  2. you can add/change 4 data-attribute parameters in this ul:
    • data-fx - the slider flip effect, crossfade slide, directscroll, fade;
    • data-interval - interval beetween animation. You may set different intervals for any sliders;
    • data-auto - autoscroll, true or false;
    • data-circular - circular or not, true or false.
  3. create a familiar Section structure;
  4. ul – an marked list with slides;
  5. Sliders li elements can contain align classes;
  6. There is a content with a 12-column markup and a random set of elements in the slider;
  7. Links .prev and .next needs to slide to next/prev slide;
  8. Nav-pages needs to show slides pagination. Nav-pages may situated are left, right, bottom position, to adding additional class: .right-post, .left-pos, bottom-pos.

Arrows and solid circles 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. This period of time and the speed of switching can be changed.

js/custom.js
                    7 : sliderInterval: 6000,
                    8 : sliderSpeed: 600,
                    8 : sliderFx: 'crossfade,
                

To remove the overlay on the main carousel image just delete one line in style.css file:

                    [class*=bg-sl-]:after{
                        background-color: rgba(83,71,65,0.7); // <= delete this
                    }
                

Ribbon carousel

Restricting the number of visible items to a minimum and maximum amount. You should just add obligatory class ribbon to use this type of slider. Markup and an an example you can see in Start Agency page.

Logotypes carousel

In general we can use slider with logotypes or some another custom blocks. The simpliest way to add this:

                    
  
   
        
  •     
  •     
  •    
  
  
              

Pricing

We have page with prices. There we use also unique slider with obligatory class pricing for slider and some custom markup. Let's look on it:

                    
      
  •    
        

    Personal

        
    $24
        Per Month     
        

    Project Scoping
        

        Free Trial     

    30 DAYS TRIAL

       
      …   

History

Another example of slider is history events. It's similar like ribbon slider, but with a little bit changed structure:

                    
      
  •    
        1958    
       
        
         

    News Begins Publication

         

    Ea nec enim accumsan, ut prima blandit mel, labores nonumes detraxit an sed. Omnis malis propriae an sed, eu mea erat utinam meliore, inciderint philosophia usu ne.

        
       
      
  •   
  •    
        1962         
       
        
              
       
      
  • …  

Service

To show services in a slider view, you may use the next structure:

                    

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

Blog

Our template contains all needed pages to create fully-worked and oriented for blog pages. Over 8 pages for blog were html-coded and represented for using. Were considered 7 types of posts, standart blog.

  1. Single Post Photo;
  2. Single Post Text;
  3. Single Post Audio;
  4. Single Post Gallery;
  5. Single Post Link;
  6. Single Post Quote;
  7. Single Post Video.

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

Post with Sidebar

To add sidebar for post pages for widgets you have to look at the Post Sidebar page. Fixed button, which always visible on screen, when click sidebar will open. Into sidebar you may use and write what you want. In example we added a few standart wordpress markup for widgets.

Audio Player

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

                    
                

To stylize audio player, you can change styles in css/style.css file in appopriate section [ 19. AUDIO PLAYER ].

Video Player

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.

                    
                    

Ecommerce

About 13 pages marked up specifically for the ecommerce catalog. For catalog were created 6 variants:

  1. Catalog Grid;
  2. Catalog Grid Sidebar Right;
  3. Catalog Grid Sidebar Left;
  4. Catalog List;
  5. Catalog List Sidebar Right;
  6. Catalog List Sidebar Left.

All of this pages contain maincontent with products and 4 pages has filtering sidebar with additional settings. Also project has product.html page with more detail fully information about single product with rating, comments, description, tables and gallery. When you choose needed product you should order him. For this purposes were created additional 5 pages:

  1. Cart;
  2. Cart Empty;
  3. Checkout;
  4. Confirmation.

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

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:

                    
                    

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

js/custom.js
                    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:

                    -
                    
                    +
                

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 and data-target where you should write id modal window.

                    
MIKE Jhonson Founder

Modal window uses general structure for 12-columns and has close link, for hiding modal:

                    
                    
                    
                

Magnific Gallery

Here we use brilliant plugin Magnific Popup. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. You may put any HTML content in each gallery item and mix content types.

The easiest way to create popup media gallery, is add class magnific-wrap for parent block and add class magnific to every link, which you need to show. Attribute href has url to big image. Have a look an example:

                    
  
            

Becoming

   
  
  
            

Jack Kerouac

   
  

There are many examples in this project you may find inside some pages, like gallery or sliders or blog pages. Popup may contain not only static images, but also youtube or vimeo video, or gallery inside another gallery, have a look:

                   Video LinkGallery
                

As you can see for create single gallery for every independent link you have to use data-gallery attribute, where you write array of images, separate by commas.

Counter

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, use the following structure:

                    
0

For more examples, look at the Services page. Create the div block with the class countup, after add obligatory attributes to it:

  • data-num - the final meaning to the size of which the counter will increase;
  • data-increment - how necessary it is to increase a counter during every iteration;
  • data-fractional - the number of important figures after a comma. If the number is integral, this attribute can be omitted or you can point out 0.
css/style.css
                    1364 : .countup {
                      font-size: 70px;
                      line-height: 1.3;
                      color: #cccaca;
                    }
                

Google Maps

In HTML file you should write the next code:

                    
                    

To get the longitude 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-longtitude and data-latitude attributes. Zoom sets in a data-zoom attribute for each maps separately. Adding additional class to google-map-container you may set needed height and width for container.

In Contact page you may click on Full Screen button, and map will open in full screen.

Portfolio

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

                    
                

Items of this list have obligatory class filter and data-filter attribute. Data-filter helps you divide works on needed category. After navigation create container with class mix-list.

                    
                    
                

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

Error Pages

For special pages, like 404 or 505 use a few another markup. At first, you should add class error404 for HTML tag. This pages do not contain header and footer like in another pages. For more details information look at 404. By analogy of this pages you may create suitable and needed for your purposes pages.

Forms

Feedback

The feedback can contain the following blocks:

  • <input type="text"> - a one line standard text area;
  • <input type="email"> - a text area for an e-mail address;
  • <textarea> - a more than one line area for a message;
  • <input type="submit"> - a sending form button;
  • <h4 class="succs-msg"> - delivery report.

Let’s have a look at the example of creating the countdown on the site.

                    

Contact Form -

  
   
        
   
        
   
        
  
     

Мessage was sent

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

  • action - it shows the path to the php-file which deals with processing the form, it remains the same by default;
  • method - post remains the same by default;
  • id - a unique identifier, send-form remains the same.

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.

If form areas are filled in the right way, after pressing the button there will appear a message with the class succs-msg. This block can be in any place of the page. You can set up an external view in the css/style.css file and it takes styles according to what element the succs-msg class is added to. If areas are filled in the incorrect way or aren’t filled at all, the class has-error is added to the area that hasn’t been validated. The invalid area style can be changed.

css/style.css
                    1534 : .has-error input[type=text],
                        .has-error input[type=email],
                        .has-error input[type=password],
                        .has-error input[type=search],
                        .has-error textarea,
                        input[type=text]:invalid,
                        input[type=email]:invalid,
                        input[type=password]:invalid,
                        input[type=search]:invalid,
                        textarea:invalid{
                          color:#a67c52;
                          box-shadow: none;
                        }

                    1612 : .succs-msg {
                      margin-left: 29px;
                      line-height:49px;
                    }
                

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 Chino'); - the topic of a letter for the administrator template;
  • define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Chino'); - the topic of a letter for the sender;
  • line 32 $letterToAdmin = … - the template of a letter for the administrator;
  • line 44 $letterToClient = … - the template of a letter for the sender;
  • an e-mail on behalf of whom a letter is sent to the sender: line 13: $headers .= "From: feedback@Chino.local\r\n";. \r\n obligatory to save at the end of the line.

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"><i></i></a>
                

To change its external view you need to edit the css/style.css file. You can also change the external view of a cursor by replacing a standard image or creating a path to the new one.

css/style.css
                    2156 : .scrolltop {
                      border-radius: .5rem;
                      width: 60px;
                      height: 60px;
                      left: 65px;
                      bottom: 65px;
                    }

                    932 : .scrolltop:before {
                      background-color: #808080;
                      opacity: .1;
                      border-radius: 3px;
                    }
                

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.

                    6 : html { font-family: '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 click on the @import tab and copy this line.
  7. Paste this line to that css/typography.css file on 3d line instead of the default (e.g.):
                                3 : @import url(http://fonts.googleapis.com/css?family=Open+Sans);
                            
  8. At last, copy font-family name from Google Fonts website and paste on css/style.css:
                                html { font-family: 'Open Sans', sans-serif;  }