Hosting | All in one Multi-Purpose Responsive Template” Documentation by “OwlTemplates.com” v1.0


“Hosting | All in one Multi-Purpose Responsive Template ”

Created:18-September-2015
By: OwlTemplates.com
Email: OwlTemplates.com@gmail.com

Thank you for purchasing my theme. 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!


Table of Contents

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

A) HTML Structure - top

This theme is a fixed layout with multiple arrangements of columns and items in different rows and columns.

The general template structure is the same throughout the template. Here is the general structure.

<!-- ======= Image Style ======= --> Click Here for the HTML Page

<!-- ======= Carousel ======= --> Click Here for the HTML Page

<!-- ======= Testimonial Carousel 1 ======= --> Click Here for the HTML Page

<!-- ======= Testimonial Carousel 2 ======= --> Click Here for the HTML Page

<!-- ======= Progress Bar ======= --> Click Here for the HTML Page

<!-- ======= Circular Progress Bar ======= --> Click Here for the HTML Page

<!-- ======= Tabs ======= --> Click Here for the HTML Page

<!-- ======= Accordion ======= --> Click Here for the HTML Page

<!-- ======= Icon with animation ======= --> Click Here for the HTML Page

<!-- ======= Flat Icons ======= --> Click Here for the HTML Page

<!-- ======= Basic Icons ======= --> Click Here for the HTML Page

<!-- ======= Buttons Style ======= --> Click Here for the HTML Page

<!-- ======= Price Table Flip ======= --> Click Here for the HTML Page

<!-- ======= Price Table ======= --> Click Here for the HTML Page

<!-- ======= Price Table 2 ======= --> Click Here for the HTML Page

<!-- ======= Price Circular ======= --> Click Here for the HTML Page

<!-- ======= Price Drop Down ======= --> Click Here for the HTML Page

<!-- ======= Price Order ======= --> Click Here for the HTML Page

<!-- ======= List ======= --> Click Here for the HTML Page

<!-- ======= Alert Boxes ======= --> Click Here for the HTML Page

<!-- ======= Column Layouts ======= --> Click Here for the HTML Page

<!-- ======= Headings ======= --> Click Here for the HTML Page

<!-- ======= Pagination ======= --> Click Here for the HTML Page

Under this label you will have main footer, which has company name in center, it has copyright info

If you would like to edit the color, font, or style of any elements, you would do the following in the css file "style.css". The styles.css has main style variation IDs, which you can change in the body tag to see the color effect:

a, a:visited
{
color:#Some color;
text-decoration:none;
font-weight:normal;
}

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.

I.E.

	.someclass a {
		color: #someColor;
	} 
        

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

I'm using four CSS files in this theme. The first one is a main css file style.css. This file contains main 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 reset.css,to make preset values for common items.

Third file is nivo-slider.css This file contains header styling.

The main file is separated into sections using:

/*======= Global elements =======*/

	some code
/*======= Footer  elements =======*/	

	some code
/*======= clear, left and right alignments =======*/
	some code
	
/*======= margin, padding, border =======*/

	some code
	
	
/*======= typography =======*/

	some code

	
	etc, etc. 

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.


C) JavaScript - top

This theme imports 11 Javascript files.

  1. bootstrap.js
  2. custom.js
  3. forms.js
  4. jquery.js
  5. jquery-ui.js
  6. masonry.js
  7. owl.carousel.js
  8. owl-include.js
  9. owlmenu.js
  10. plugins.js
  11. slider.js

Please see some help info below regarding scripts listed above: jQuery is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com/.


D) PSD Files - top

No PSD File.

If you'd like to change the elements for pages, just open psd file in Photoshop, make the adjustments, and then save slices in their format (i.e. .gif, .jpg, .png) into folder with images.(only chose 'File'->'Save For Web' option in Photoshop)

Include any more specific information about your psds.


E) Sources and Credits - top

I've used the following images, icons or other files as listed.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. 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.

OwlTemplates.com

Go To Table of Contents