Updated: November 2019
By: Codelayers
Email: codelayers9@gmail.com
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
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>
SLIDES CONTAINER
<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>
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.
<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>
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.
This "Foxuhost" theme uses 5 main CSS files:
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:
}
This theme imports three Javascript files.
var ddsmoothmenu={
arrowimages: {down:[], right:[]},
transition: {overtime:300, outtime:300},
shadow: {enable:false, offsetx:5, offsety:5},
showhidedelay: {showdelay: 100, hidedelay: 200},
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
});
$name_of_your_site = "yourcompanyname.com"
$email_adress_reciever = "codelayers9@gmail.com"
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.
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:
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 https://1.envato.market/codelayers frequently.
Best regards,