Template Documentation Template

### “Foxuhost” Documentation by “Codelayers” v1.0

# “Foxuhost”

Created: 25/10/2014
By: Codelayers
Email: Codelayers

Hi! Thank you for purchasing my template.
If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This file will teach you how to set up and use the “Foxuhost” Theme.
Best regards,
Codelayers

## Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. JavaScript
4. PHP Code
5. PSD Files
6. Sources and Credits

### A) HTML Structure - top

This theme is a Responsive HTML5 / CSS3 for Desktop, tablet, mobile phone… All of the information within the main content area is nested within a div with an class of "container". The sidebar's content is within a div with an class of "content-right-sidebar". The general template structure is the same throughout the template.
The html are commented well so you can easily make an update.

<!-- HEADER -->
Top area, display logo, navigation and slideshow. This navigation improves the css dropdown menu with animation. The navigation is nested within a div with an class of "menu_main", you can change the navigation by change the <li> url and text. This is similar for all pages.
NAVIGATION MENU

    <ul>
    <li><a href="index.html" title="Home">Home</a><li>
    	<li><a href="#">Sliders</a>
    		<ul>
                <li><a href="index.html">Slider Type One</a></li>
                <li><a href="index-1.html">Slider Type Two</a></li>
                <li><a href="index-2.html">Static Image Page</a></li>
                <li><a href="index-3.html">Video Page</a></li>
    		</ul>
    		</li>
    		<li><a href="#">Features</a>
                <ul>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="elements.html">Elements</a></li>
                <li><a href="pricing-tables.html">Pricing Tables</a></li>
                <li><a href="columns.html">Page Columns</a></li>
                <li><a href="testimonials.html">Testimonials</a></li>
                <li><a href="faqs.html">FAQs</a></li>
                <li><a href="tabs.html">Tabs</a></li>
     </ul>

SLIDES CONTAINER
This is the jquery slider and only used in the main page. The slider content is nested within a div with an class of "tp-banner-container". You can change and update the slider images and text in this section. <!-- BEGIN CONTENT -->
All information of all pages content area is nested within a div with an id of "container" and the sidebar content is within a div with an id of "sidebar".

    <div class = 'item item1'>
      <div class = 'inner'>
         <div class = 'text1'><span>Welcome to <b>Foxuhost</b></span></div>
         <div class = 'text2'><span>Foxuhost Provides Smart and Flexible Design Unique Pages,<br />Awesome Slideshows, Unique Color Variations.<br />Easy-to-customize and fully Featured design.<br />Create Outstanding Website  in Minutes!</span>
         <div class="morebut"><a href="#">know more features</a></div>
       </div>
    </div>
    </div>

<!-- END OF CONTENT -->
<!-- BEGIN FOOTER -->
Footer content here.
<!-- END OF FOOTER -->

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

    	#container a {
    		color: #someColor;
    	}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

### B) CSS Files and Structure - top

This "Foxuhost" theme uses 5 main CSS files:

- bootstrap.min.css (boostrap)
- menu.css (menu)
- reset.css (reset.css)
- style.css (theme style.css)
- responsive-leyouts.css
- simple-line-icons.css
- font-awesome.min.css - We used for this Theme. You can use all icons of Font-Awesome here: http://fortawesome.github.io/Font-Awesome/icons/

I'm using three CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using:

How to Use Diffrent Colors Themes
We are Providing 10 Predefined Colors for this Theme. If you want to use Diffrent Colors for this theme... Go to Header Section of "index.html" page. There you can find the Commented code of the colors. You can just remove the comments witch color skin you want to use. (like this you can do rest of the pages as well).

All the CSS is commented and separated in categories so it is really easy to find what you want.

    	/* === HEADER Section === */

            #site-wrapper {
                max-width: 1170px;
                margin: 10px auto auto auto;
                background: #fff;
                -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
                box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            }
            #logo {
                min-width: 230px;
                min-height: 65px;
                margin: 23px 0px 25px 25px;
                background: url(../images/logo.jpg) no-repeat left top;
            }

    	/* === BODY Section === */

            #container {
                margin: 16px 0 0 5px;
                padding: 0 0 27px 0;
            }
            #content .container .five.columns {
                width: 280px;
                margin: 0px 25px 0px 25px;
            }
            ul.home-services-list {
                float: left;
                margin: -12px 0px 0px 0px;
                padding: 0px;
                width: 280px;
            }
            .home-services-list li {
                margin: 0px;
                padding: 11px 0px 0px 0px;
                border-bottom: 1px solid #f0f0f0;
                list-style-type: none;
            }
            .freshworks-gallery {
                margin: 20px 30px 0px 20px;
                height: 260px;
                padding: 10px;
                background-color: #eee;
            }
            .freshworks-content {
                margin: 0px 35px 0px 0px;
                width: 180px;
                height: 225px;
                padding: 15px 20px 20px 20px;
                background-color: #fff;
                float: left;
                -webkit-box-shadow:  0px 0px 0px 0px rgba(0, 0, 0, 0.1);
                box-shadow:  1px 0px 5px 0px rgba(0, 0, 0, 0.1);
            }

    	/* === Sidebar Section === */

            #content .content-right-sidebar {
                float: right;
                width: 280px;
                margin: 10px 30px 0 0;
                padding: 0 0 27px 30px;
                border-left: 1px solid #f9f9f9;
            }
            #content .content-right-sidebar h2 {
                border-left: 3px solid #ff0000;
                padding: 8px 0px 0px 17px;
                margin: 0px 0px 30px 0px;
                color: #3c3c3c;
                font-size: 21px;
                background-color: #f3f3f3;
                min-height: 32px;
            }

    	/* === FOOTER === */

        #page-footer {
            margin: 0px 0px 0px 0px;
            width: 100%;
            background: #636363 url(../images/footer-bg.jpg) repeat-x left top;
            float: left;
            color: #eee;
            min-height: 312px;
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Any images that are placed within the blog section have 5px worth of padding and a light bluish background. If you would like to edit the display of these images, find the following section in the style sheet:

    	#wrapper #blog img {
    		change styles here:
    	}

### C) JavaScript - top

This theme imports three Javascript files.

1. Slider Revolution
2. Main Menu
3. Shortslide
4. Tabs
5. Tipsy
6. Toogles

1. Slideshows: Each slideshow has some unique values you can set, like autorotation, and transition speed.
   [some Javascript goes here... ]
   Main menu Script

           var ddsmoothmenu={

               arrowimages: {down:[], right:[]},
               transition: {overtime:300, outtime:300},
               shadow: {enable:false, offsetx:5, offsety:5},
               showhidedelay: {showdelay: 100, hidedelay: 200},

   Slider Script

       var tpj=jQuery;
       tpj.noConflict();

       tpj(document).ready(function() {

       if (tpj.fn.cssOriginal!=undefined)
       	tpj.fn.css = tpj.fn.cssOriginal;

       	var api = tpj('.banner').revolution(
       		{
       			delay:9000,
       			startheight:510,
       			startwidth:1000,

       			hideThumbs:200,

       			thumbWidth:100,	  // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
       			thumbHeight:50,
       			thumbAmount:5,

       			navigationType:"none",	// bullet, thumb, none
       			navigationArrows:"solo", // nexttobullets, solo (old name verticalcentered), none

       			navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom

       			navigationHAlign:"center",	// Vertical Align top,center,bottom
       			navigationVAlign:"bottom",	// Horizontal Align left,center,right
       			navigationHOffset:0,
       			navigationVOffset:20,

       			soloArrowLeftHalign:"left",
       			soloArrowLeftValign:"center",
       			soloArrowLeftHOffset:20,
       			soloArrowLeftVOffset:0,

       			soloArrowRightHalign:"right",
       			soloArrowRightValign:"center",
       			soloArrowRightHOffset:20,
       			soloArrowRightVOffset:0,

       			touchenabled:"on",	// Enable Swipe Function : on/off
       			onHoverStop:"on",	// Stop Banner Timet at Hover on Slide on/off

       			stopAtSlide:2,	// Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
       			stopAfterLoops:0,	// Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic

       			shadow:1,		 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows  (No Shadow in Fullwidth Version !)
       			fullWidth:"off"	// Turns On or Off the Fullwidth Image Centering in FullWidth Modus
       });

### D) PHP Code - top

Php code used in the "demo-contacts.php" file. You can just change the email address in the line number 4.

        $name_of_your_site = "yourcompanyname.com"
        $email_adress_reciever = "codelayers9@gmail.com"

### E) PSD Files - top

I've included 25 psds with this theme:

If you'd like to change the logo in the header, open "01_home.psd", make the necessary adjustments, and then save the file as "logo.jpg" or "logo.png". Do the same for the buttons.

With these psds you can even create your own unique “Foxuhost” skin.

### F) Sources and Credits - top

You add new fonts by adding them to your Fonts folder in your computers Control Panel or right click font file and "Install".

Resources used:

- Fonts: – Google Fonts (Websafe fonts used)
  http://www.google.com/webfonts (you can find the fonts by the name of the font)
- Icons used:
  http://fortawesome.github.io/Font-Awesome/icons/
  http://graphicburger.com/simple-line-icons-webfont/
- Images Used: (heroturko.me, fotolia.com, http://unsplash.com, www.julianburford.nl and shutterstock.com) All are royalty free images.
  You should replace the images with your own images.

If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

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.

To keep in touch with my latest PSD and HTML templates make sure to check out http://themeforest.net/user/codelayers frequently.

Best regards,

Codelayers

Go To Table of Contents