Documentation — Cross Template

Thank you for your purchase

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. Thanks so much!

Installation

Copy the files and folders in the HTML folder to your web hosting location. This will get you started and you'll be able to modify the theme based on your specific needs.

Style Settings

The main.css file is the base stylesheet and must be included (mandatory). There are other stylesheets specific to some components, but those are optional and can be included only in certain pages. If you need to add extra style to the template then include the new .css file like this:

<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/my_personal_style.css" />

Note: This is the best way to add personal style without modifying the core files. If the template updates, you'll be able to keep your changes and not worry about loosing work.

Markup Structure

This theme has a responsive layout with 12 columns. You can customize the content sections or add sidebars as width as you want. The general inner page template structure is the same throughout the template. Here it is:

<header id="header" class="container">
	<div class="wrapper">
		<div class="cell cell-left textleft">
			<div id="menu">
				<nav>
					<ul>
						...
					</ul>
				</nav>
				<span id="menu-toggle"><em></em></span>
			</div>
			<div id="search-panel">
				...
			</div>
		</div>
		<div class="cell cell-middle textcenter">
			<div id="logo">
				<h1><a href="index.html"><img src="logo.png" width="104" alt="Project name"></a></h1>
			</div>
		</div>
		<div class="cell cell-right textright">
			<div id="shopping-bag-panel">
				...
			</div>
		</div>
	</div>
</header>
<section id="content" class="container">
	...
</section>
<footer id="footer">
	<div class="container">
		<div class="col grid12">
			...
		</div>
	</div>
</footer>

You can change the logo image by placing/uploading an image file and setting it in the <h1> element in the header section.

If you prefer a text version instead of a logo just replace the img tag with the desired text string:

<h1><a href="index.html">Project Name</a></h1>

SEO Settings

The template contains <head> information that you would probably want to edit: title, description (SEO relevant), keywords (SEO relevant) and favicon:

<title>Title goes here</title>
<meta name="description" content="Description entered for SEO" />
<meta name="keywords" content="list of keywords" />
<link rel="shortcut icon" href="favicon.png" />

CSS Styling

Template uses only one highly optimized CSS file that uses mobile first approach. That means all the style is applied for mobile devices first and if the screen is bigger the template has more rich, bandwidth consuming features. The stylesheet contains a general reset CSS file so all browsers behave almost the same way. This stylesheet also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden at any time.

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. Almost every widget in the template can be customized easily this way. Make sure you check out the HTML markup first and then modify its style in the CSS file.

Widgets

This theme imports two mandatory Javascript files: jQuery and site.js. jQuery is a Javascript library that greatly reduces the amount of code that you must write. The template includes a rich set of plugins in order to enhace the user experience: intoViewport, tabify, magnific popup, audiojs, owlcarousel, supersized, quicksand, zoom, forms, etc (each of them have their own separate file). The site.js script is used to initialize all the plugins and add events to certain objects. Here is the place where you can modify widget behaviour - make sure you study its comments for more information.

Make sure you check out thre documentation of each plugin for its complete set of options. Each page may include a different set of plugins at the end of the file (recommanded above the closing body tag) and initialized inline on the spot or at the bottom of the plugin file.

Tips and Tricks

Here are a couple of neat tricks used in this theme and how to use them:

set active menu item: add a current_page_item class to the active menu element (add it to the <li> element);

make videos and embeds responsive: wrap the video or embed in the following markup structure:

<div class="responsive-container">
    <div class="responsive-wrapper">
        <iframe src="..."></iframe>
    </div>
</div>

there are multiple options when it comes to buttons: small, normal, big , default color, grey, black. It's easy to add a .button class to any element (anchors for example) and set a color preference and size option. Here is a big grey button:
```
<a href="#" class="button big grey">Big Grey</a>
```
alerts are a good way to capture attention: <div class="alert">Information box</div>. Please see the features.html file for different options;
accordions: add a collapse class to any <ul> list and it will be transformed automatically into an accordion widget; additionally you can specify which accordion box is opened initally with an active class on each list's <li>. Please see the features.html file for different options;
tab container: wrap the content in a tab-container element with a <ul class"tabs"> list followed by .tab_content elements; please see the features.html for the markup.

Credits

Final thought

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 plugin. No guarantees, but I'll do my best to assist.