Top Navigation Menu Settings

The Menu Container can be found in the Menu Class - centered_menu

<div class="centered_menu">                      
<!--Edit Navigation Menu here-->
<div class="navbar">
<button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse">
        NAVIGATION <span class="icon-chevron-down icon-white"></span>
</button>
        <div class="nav-collapse collapse">
            <ul class="nav nav-pills ddmenu">
                <li class="dropdown active">
                    <a href="index.html" class="dropdown-toggle">Home <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown">
                                <a href="index-alt.html" class="dropdown-toggle">Home 2</a>                                            
                            </li>                                        
                        </ul>
                </li>								
            <li class="dropdown">
                <a href="about.html" class="dropdown-toggle">About <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown">
                            <a href="about-alt.html" class="dropdown-toggle">About 2</a>                                          
                        </li>                                        
                    </ul>
            </li>
            <li><a href="services.html">Services</a></li>
                <li class="dropdown">
                    <a href="page.html" class="dropdown-toggle">Pages <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle">Dropdown Item  »</a>
                                <ul class="dropdown-menu sub-menu">
                                <li><a href="#">Dropdown Item</a></li>
                                <li><a href="#">Dropdown Item</a></li>
                                <li><a href="#">Dropdown Item</a></li>
                        </ul>
                            </li>
                                <li><a href="wide.html">Full Page</a></li>
                                <li><a href="2-column.html">2 Column</a></li>
                                <li><a href="3-column.html">3 Column</a></li>
                        </ul>
                </li>
                            <li class="dropdown">
                                <a href="gallery.html" class="dropdown-toggle">Gallery <b class="caret"></b></a>                                   <ul class="dropdown-menu">
                                <li><a href="3-portfolio.html">3 Portfolio</a></li>
                                <li><a href="portfolio-item.html">Portfolio Item</a></li>
                                <li><a href="video-page.html">Video Page</a></li>
                                </ul>
                                </li>
                                <li><a href="contact.php">Contact</a></li>
                        </ul>
</div>
</div>                     
</div>    
    

Camera Slider Setup

The Slider can be found in the Container - #camera_wrap

<div class="camera_full_width">
    <div id="camera_wrap" class="shadow">
        <div data-src="slider-images/desert.jpg" >
        <div class="camera_caption fadeFromBottom cap1">This slider can be customized to have multiple slides and          many effects.</div>
        </div>
        <div data-src="slider-images/dancer.jpg" >						
        </div>
    </div>
    <br style="clear:both"/><div style="margin-bottom:40px"></div>
</div>

Edit your images for the slider so that the dimensions are 1090 pixels wide and 420 pixels in height. Place these slider images in the folder named 'slider-images/'. You can have as many slides as you wish.

You can also use your own slider. A fantastic collection of premium sliders can be seen here . We really recommend the 'Strapslide' slider which is based on Bootstrap.

Footer Settings

All the Footer content is enclosed in #divFooter

<div id="divFooter" class="footerArea">
    ...
</div>

Background Settings

The backgrounds for both the page and footer can easily be changed by editing a style in the file named :styles/custom.css

For the page background open the custom.css file in Dreamweaver (code view) or Notepad++. Goto line 265 and change the image for the url. The background images should be in the same folder as your custom.css file i.e. in the 'styles' folder.

body {background-image: url(mirrored_squares.png); background-color: rgb(181, 181, 181); background-position: inherit inherit; background-repeat: repeat repeat;}

For the Footer layout background open the custom.css file in Dreamweaver (code view) or Notepad++. Goto line 319 and change the image for the url. The background images should be in the same folder as your custom.css file i.e. in the 'styles' folder.

#divFooter{font-size: 13px; font-family: 'Maven Pro', sans-serif; background-image: url(bedge_grunge.png); background-repeat: repeat repeat;}

Editing Carousel

To edit the carousel on the 'about-alt.html' page, content should be edited in the div class - #div id="myCarousel".

You can add as many images as you require in the carousal. The carousal is a good place to list your clients or sample work.

The thumbnail sizes are 610 pixels wide by 400 pixels in height. Place your carousel images in the folder named 'carousel-images/'.

Here's the sample code below to edit:

<div class="carousel-inner">               
    <div class="item active">
    <img src="carousel/horizon.jpg" class="img-polaroid" alt="">
    </div>				
    <div class="item">
    <img src="carousel/green.jpg" class="img-polaroid" alt="">
    </div>			
    <div class="item">
    <img src="carousel/reflection2.jpg" class="img-polaroid" alt="">
    </div>                
    <div class="item">
    <img src="carousel/water.jpg" class="img-polaroid" alt="">
    </div>				
</div>
		

Editing circle hovers on the alternative index homepage

The index-alt.html page uses cool circle hover effects courtesy of the Codrops tutorial here.

To edit the gallery thumbnails and hover content should be edited in the ul class - #ch-grid. From line 163 to 197.

The thumbnail sizes are 215 pixels wide by 215 pixels in height. Place your thumbnail images in the folder named 'circlehover/images/'.

Note Ensure that the names of your images that you place in the 'circlehover/images/' folder match the ones in the css file named 'circlehover/css/style2.css. You can change the names of the images in the CSS file but they should match the actual names of your images.

Make sure that the code for the thumbnails and large previews follow the correct path to the 'circlehover/images/' folder. Here's the sample code below to edit.

<li>
    <div class="ch-item ch-img-1">
        <div class="ch-info">
        <h3>About</h3>
        <p>Lorem Ipsum... <a href="about.html">Read More</a></p>
        </div>
    </div>
</li>                                           

Editing 'Gallery' page

The gallery.html page uses a really nice animation direction hover effect courtesy of the Codrops tutorial here.

To edit the gallery thumbnails and hover content should be edited in the div class - #gridArea. From line 142 to 215.

The thumbnail sizes are 220 pixels wide by 165 pixels in height. Place your thumbnail images in the folder named 'directionaware/images/'.

Make sure that the code for the thumbnails and large previews follow the correct path to the 'directionaware/images/' folder. Here's the sample code below to edit.

<li>
    <a href="http://500px.com/photo/27573675">
    <img src="directionaware/images/photo1.jpg" />
    <div><span>Green Umbrella by Dmitry Ryzhkov</span></div>
    </a>
</li>                                           

Editing 'Portfolio' page

To edit the portfolio thumbnails and the large lightbox previews in the '3-portfolio.html' page, content should be edited in the div class - #gridArea. From line 139 to 217.

The thumbnail sizes are 315 pixels wide by 200 pixels in height. Place your thumbnail images in the folder named 'images/'.

The large previews linked to the thumbnails must also be placed in the same 'images/' folder. These larger previews can be any size. Try and match the name similar to the associated thumbnail, e.g, thumbnail name could be 'holiday-paris.jpg' and the large preview for this thumbnail could be named as 'holiday-paris-large.jpg'.

Make sure that the code for the thumbnails and large previews follow the correct path to the 'images/' folder. Here's the sample code below to edit.

<div class="span4 box">    
            
    <a href="images/alone-big.jpg"><img src="images/alone.jpg"  class="img-polaroid" alt="All Alone" title="All Alone" /></a>  
	
</div>                                              

You can use this '3-portfolio.html' portfolio page instead of the gallery.html page. We have included both for your personal preference.

Emphasis Classes

Convey meaning through color with a handful of emphasis utility classes.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Setting up Bootstrap Contact Form page

To configure the Bootstrap contact form on the contact page to send the form query to your specified email address just open the file named 'index.php' located in the folder named 'email/' and edit line 8, by replacing the default email address for your own.

$to="your-email@your-domain.com";

Uploading your files to your remote server

Once you have completed your site. Upload all the files and folders from your main 'site/' folder to the 'public/' directory of your remote server. This 'public/' folder is the your root site folder where your default placeholder index.html file is held. When uploading you will get a prompt to ovewrite the exising default index.html file, click o'kay to overwrite it with the new one.

We recommend using Filezilla to upload your files. It is fast and easy to use.

Do not upload the folder named 'documentation/'.

Using third party scripts

You can use any third party scripts to enhance overall user experience, such as image preloaders, calendars, search scripts, animations, shopping carts, Html5 video players, hover effects etc...

We thoroughly recommend scripts from CodeCanyon.