HTML Structure

I am using 26 HTML files in this theme. This Theme is a responsive layout built on Bootstrap grid system. The general template structure is the same throughout the template. Here is the general structure.

/* Topbar */
<div id="topbar"></div>

/* Header */
<header id="header"></header>

/* Slider */
<div class="tp-banner-container"></div>

/* Contents */
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

/* Footer */
<footer id="footer"></footer>

/* Copyright */
<div id="copyright"></div>

Flickr PhotoStream - How to change Flickr ID

1. Open "js/custom.js."
2. Change to your own Flickr ID as shown in the screenshot below. (You can check your Flickr ID at http://idgettr.com/)

How to change Google Maps

1. Open "contact.html."
2. Change to your Address as shown in the screenshot below.

How to change Predefined Color (and Boxed layout)

Add a single line to "all html files" as shown in the screenshot below. (colors1.css--colors14.css)

<link rel="stylesheet" href="css/colors/color1.css" />

If you would like to change to boxed layout, please add a single line to "all html files" as shown in the screenshot below. (box1.css--box10.css)

<link rel="stylesheet" href="css/colors/box1.css" />

If you would like to change to Arch footer background image, please add a single line to "all html files" as shown in the screenshot below. (footer1.css--footer14.css)

<link rel="stylesheet" href="css/colors/footer1.css" />

color1.css -- color14.css

• color1.css
• color2.css
• color3.css
• color4.css
• color5.css
• color6.css
• color7.css
• color8.css
• color9.css
• color10.css
• color11.css
• color12.css
• color13.css
• color14.css

box1.css -- box10.css

• box1.css
• box2.css
• box3.css
• box4.css
• box5.css
• box6.css
• box7.css
• box8.css
• box9.css
• box10.css

footer1.css -- footer14.css

• footer1.css
• footer2.css
• footer3.css
• footer4.css
• footer5.css
• footer6.css
• footer7.css
• footer8.css
• footer9.css
• footer10.css
• footer11.css
• footer12.css
• footer13.css
• footer14.css

Revolution Slider

Note

How to change the email address

1. Open "contact.php."
2. Change the 2nd line from the top to your own email address as shown in the screenshot below.

If you'd like to change the security answer

1. Open "contact.php."
2. Change the 12rd line and 18rd line from the top to the answer for your captcha as shown in the screenshot below.
3. Set your question in "contact.html" page.

If you'd like to add the new fields

Example: Phone field and Select field.

1. Open "contact.php" and "contact.html."
2. Add the codes as shown in the screenshot below.

    $phone = $_POST['phone'];
    $color = $_POST['color'];

    $body = " Name: $name\n E-Mail: $email\n Phone: $phone\n Color: $color\n Subject: $subject\n Comment: $comment\n";

            <label for="phone"><span><i class="fa fa-asterisk"></i></span>Phone</label>
            <input id="phone" name="phone" type="number" required>

            <label for="agree">Favorite Color</label>
            <select id="color" name="color">
            	<option></option>
            	<option>Red</option>
            	<option>Blue</option>
            	<option>Yellow</option>
            </select>

How to change the validation message to your language

1. Check the "js/localization" folder.
2. Add a single line to the contact.html.

<script src="js/plugins.js"></script>
<script src="js/custom.js"></script> 

<script src="js/localization/messages_fr.js"></script>  // This Line

If you'd like to use Google Custom Search (Overlay Layout)

1. Create a Google account.
2. Log in to Google Custom Search Engine.
3. Create a "New search engine" as shown in the screenshot below.

4. Select "Overlay" layout.

5. Copy the following code, and paste it into a HTML file, where you want search box to render.

I have used the following javascript, images, icons or other files as listed.

JavaScript

• jquery-1.11.2.min.js
• jquery-migrate-1.2.1.min.js
• bootstrap.min.js
• bootstrap-hover-dropdown.min.js
• jquery.themepunch.tools.min.js - Extended Licence
• jquery.themepunch.revolution.min.js - Extended Licence
• jquery.validate.min.js
• jquery.form.js
• modernizr.custom.js
• jquery.hoverdir.js
• jquery.sticky.js
• nivo-lightbox.min.js
• isotope.pkgd.min.js - Commercial Developer License
• owl.carousel.js
• jflickrfeed.js
• jquery.mb.YTPlayer.js
• Simple Placeholder
• jquery.hashchange.js
• jquery.easytabs.js
• wow.min.js
• jQuery gMap 2

CSS

• bootstrap
• yamm3
• animate
• hover
• Simple Icon Hover Effects

Font

• Google Web Fonts
• Font Awesome

PHP

• Contact form spam prevention - Tutorial (Permission from author)

Image

• Pixabay
• Photodune - Regular Licence
• pixeden
• Hand with Iphone 5 Ipad PSD Mockup

Not Included:

• Photos and Style Switcher in the demo is not included in the download package.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

ColorsThemes

colorsthemes.com