Sonoran Template Help

Version 1.0

Cross Browser, High Quality and Full Responsive HTML5 Coming Soon 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 Sonoran file to the local disk on your computer. Inside the extracted folder there will be 2 folders labeled docs and html. Using an FTP client (e.g. Filezilla or Total Commander), you need to copy all the contents of the html folder to your server.

Slideshow

Slider Images

To change the image background you will need to edit the file index.html. You have to add more images after this code to add images to the slideshow or remove current images. Download these images into the /slides folder. Resolution and image size can be of your choice. However, it is recommended not to exceed the images file size beyond 1MB. Filename can be anything and must be the same as previously written in the index.html code. The order of the slides is one by one as specified in index.html. If you have a single image, the slider navigation arrows will hide. In obligatory image attributes alt can be written with the name of the image or anything according to your choice.

                    96 : <img src="slides/001.jpg" alt="Image Name">
                    97 : <img src="slides/002.jpg" alt="Image Name">
                    98 : <img src="slides/003.jpg" alt="Image Name">
                    99 : <img src="slides/004.jpg" alt="Image Name">
                

But if you don’t specify any image, you will have a solid background color, and you can change that color choice in css/layout.css.

                    7 : body            { background-color: #343434; }
                

Slideshow settings

To change the slideshow settings you have to edit the file js/custom.js.

                    6: sliderFx: 'slide',       // Slider effect. Can be 'slide' or 'fade'
                    7: sliderInterval: 9000,   // Interval between image change. Set 0 to disable auto slideshow
                    8: sliderSpeed: 1500       // Speed of the slider effect in milliseconds
                

If you want to change a color overlay that covers the background slideshow, you will have to edit the css/slider.css background-color. To change the opacity, you will have to edit the opacity in 2 places. Firstly, edit opacity: 0.8. The value should be between 0 and 1. Now secondly you will have to edit the filter: alpha(opacity=80);. The value should be between 0 and 100. It should be equivalent to the previous values. The syntax of the code is mentioned below as an example:

                    7 : #slides .slides-container > div:after   { background-color: #6D5333; opacity: 0.8; filter: alpha(opacity=80); }
                

If you want to change a dot-textured overlay that covers the background slideshow you will have to edit css/slider.css. His name can be anything of your choice. By default, pattern.png. Pattern can be located in a folder /images.

                    6 : #slides .slides-container > div:before  { background: url(../images/pattern.png) 0 0 repeat; }
                

YouTube movies as background

To enable YouTube video as background you have to remove class none in index.html file:

                    106 : <div id="ytvideo" class=""> /* add/remove class none to disable/enable video as background */
                

During loading video file from YouTube, you can change background image. That means, before the video is loaded you can manipulate slideshow.

YouTube video settings

To change the video settings you have to edit the file js/custom.js.

                    21 : loop: true,  // True or false loops the movie once ended.
                    22 : startAt: 0,  // Set the seconds the video should start at.
                    23 : autoPlay: true,  // True or false play the video once ready.
                    24 : showControls: false, // Show or hide the controls bar at the bottom of the page.
                    25 : addRaster: false, // Show or hide the background pattern image
                    26 : videoURL: 'youtu.be/EDir9-UoPjo', // background video URL
                    27 : mute: true // video sound
                

If you want to change a color overlay that covers the background video, you will have to edit the css/YTPlayer.css background-color. To change the opacity, you will have to edit the opacity. The syntax of the code is mentioned below as an example:

                    230 : .YTPOverlay{ background-color: #6D5333; opacity: 0; }
                

If you want to change a dot-textured overlay that covers the background video you will have to edit css/YTPlayer.css. His name can be anything of your choice. By default, pattern.png. Pattern can be located in a folder /images.

                    231 : .YTPOverlay.raster{ background: url("../images/pattern.png"); opacity: 0; }
                

Countdown

If you do not want to display the countdown block, you can remove it from the HTML page index.html.

                    39 : <div id="countdown"></div>
                

Countdown settings

You can set the date in the js/custom.js for the countdown.

                    9: countdownTo: '2014/01/01', // Change this in the format: 'YYYY/MM/DD'
                

Visualization settings

To change the color and font size, you have to edit css/countdown.css.

                    9 : #countdown span   { font-size: 100px; color:#ffd565; }
                

To customize word days and countdown, you have to edit css/countdown.css too.

                    12 : #countdown ins  {  font-size: 21px; color:#ffd565; }
                

Logo Settings

To change main logo you have to reload new logo image in a /images folder. If you have another name for your logo, you will have to edit index.html.

                    24 :  // change "src" and "alt" attribute (not required)
                

If you want to add some slogan or any kind of text together/instead of the logo, you have to edit index.html (here you should add/remove none class).

                    24 : <img src="images/logo.png" alt="" class="none"> // to hide logo
                    25 : <span id="logo-text" class="">Sitename</span> // to show slogan
                

Visualization settings

To change the font size or color of your slogan, you will have to edit css/logo.css.

                    7 : #logo-text  { color:#F2DCA1; font-size: 40px; }
                

Text Block Settings

To change the text of the headline, you will have to edit index.html.

                    31 : <h1>We are working on<br>something awesome</h1> // The <br> tag inserts a single line break.
                

To change the font size, color and the font weight of main headline, you will have to edit css/typography.css.

                    25 : font-size: 55px;
                    26 : color: #fff;
                    27 : font-weight: 400;
                

To change the text under headline, you will have to edit index.html.

                    32 : 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

To change the font size, color and font weight of that text, you will have to edit css/layout.css.

                    28 : #maincontent > p    { font-size: 17px; font-weight: 300; color:#fff; }
                

Copyrights

To change the text of copyrights, you just have to edit index.html.

                    60 : <p class="copyrights">Made in <a href="http://aisconverse.com/" target="_blank">Aisconverse</a></p>
                

Replace href="http://aisconverse.com/" of link to your actual website.

Visualization settings

For changing the font size and the color, you will have to edit css/footer_line.css.

                    3 : .copyrights             { font-size: 14px; color:#baad8b; }
                    4 : .copyrights > a         { color:#baad8b; } /* links color */
                    5 : .copyrights > a:hover   { color:#fff; } /* change links color after hovering */
                

MailChimp Subscription Form

If you do not want to display the Newsletter block, you can just add class none to the page index.html.

                    68 : <section id="newsletter" class="none"> …
                

Newsletter settings

You need to change the Mailchimp's List URL in your index.html for the Newsletter form.

                    
                    
         

To change the validation messages, you will have to edit js/custom.js.

                    19 : successText: 'Thanks. You have successfully subscribed. Please check email to confirm.', // text after successful subscribing
                    20 : errorText: 'Please, enter a valid email' // text, if email is invalid
                

Visualization form settings

To change the font size, color, background color and font weight of subscription form, you will have to edit css/newsletter.css.

                    19 : #feed-form input[type="email"]  { background-color: #fff;  font-size: 20px; color:#5e4931; font-weight: 300;  }
                    21 : #feed-form input[type="submit"] { background-color: #ffd565; }
                    22 : #feed-form input[type="submit"]:hover { background-color: #fabf20; } /* changing background color after hovering */
                

Visualization text settings for Newsletter

To change the font size, color and font weight of Newsletter headline, you will have to edit css/typography.css.

                    33 : font-size: 35px;
                    34 : line-height: 40px;
                    35 : color: #fff;
                

To change the text under Newsletter headline, you have to edit index.html.

                    72 : 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

To change the font size, color and font weight of that text, you just have to edit css/newsletter.css.

                    6 : #newsletter > article > aside > p   { font-size: 17px; font-weight: 300;  color:#fff; }
                

Google Maps

Settings

If you do not want to display the google maps block, you can always add class none to the page index.html.

                    86 : <div id="map_canvas" class="none"></div>
                

Edit thejs/custom.js file to configure the google map. At first, you can get the latitude and the longitude of a place from here. Now click on the map and move the marker or enter an address on the latitude and the longitude coordinates in "Get the Latitude and Longitude of a Point" block. Then you can insert your coordinates to custom.js code:

                    4 : locations: [-34.397, 150.644]	    // latitude and longitude coordinates to center the map on
                

After determined the coordinates start changing InfoBox.

                    11 : infoBoxName: 'Aisconverse',      // write the actual name in InfoBox
                    12 : infoBoxImg: 'images⁄map-label.png', // path for changing logo in map infoBox
                    13 : infoBoxDescription: 'J. Savickio str. 4 Vilnius, LT-01108 Lithuania',   // write the actual address in Infobox.
                    16 : infoBoxUrl: 'http:⁄⁄aisconverse.com'      // write the actual url in InfoBox
                    17 : infoBoxUrlText: 'Aisconverse.com'      // write the url text
                    18 : mapMarker: 'images⁄map-marker.png' // path for changing map marker
                

In the 13 line you may use <br> tag to enter the line breaks, do not separate paragraphs.

To change InfoBox background color, you will have to edit css/map.css.

                    9 : .ib-inner  { background-color: #232323; }
                

ScrollTop Button Settings

To change the background color, border radius along width and height, you will have to edit css/layout.css.

                    33 : #scrolltop          { background-color: #3e3e3e; border-radius: 5px; width: 50px; height: 50px; }
                    34 : #scrolltop:hover    { background-color: #161311; } /* changing background color after hovering */
                

Favicon Settings

To change the favicon you will have to reload a new favicon.ico in a site root. If you have another name for your favicon, you just have to edit index.html.

                    8 : <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> // replace favicon.ico to file name
                

Font Settings

Typography

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

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

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

  1. Just 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 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 24th line (e.g.):
                                24 : body { font-family: 'Open Sans', sans-serif;  }