OneStudio Documentation

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 project.

Markup Structure

This theme has a responsive layout with 12 columns. You can customize the content, sidebar, navbar to be as width as you want. The general inner page template structure is the same throughout the template. Here it is:

<div class="container">
	<header id="logo" class="col grid2">
		<h1 class="shadow"><a href="index.html"><img src="images/logo.png" alt="OneStudio" /></a></h1>
		<a href="#" id="menu-switch" class="button"></a>
	</header>
	<div class="col grid4">
		<nav id="menu" class="clearfix">
			<ul>
				...
			</ul>
		</nav>
	</div>
	<div id="heading" class="col grid4">
		<a class="thumb">
			<img src="heading.jpg" alt="" />
		</a>
	</div>
	<div class="clear"></div>
	<section id="content" class="col grid4 push2">
		<h2>Page title</h2>
		...
	</section>
	<footer id="footer" class="col grid4 push2">
		...
	</footer>
</div>

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

If you prefer a text version instead of a logo, please see the following code for the logo markup:

<header id="logo" class="col grid2 text-version">
	<h1 class="shadow"><a href="index.html">OneStudio</a></h1>
	<a href="#" id="menu-switch" class="button"></a>
</header>

SEO Settings

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

<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" />
<link rel="apple-touch-icon" href="images/touch-icon.png" />
<link rel="image_src" href="images/touch-icon.png" />

CSS Styling

I'm using 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.

Note: to switch to the dark theme just include the style-dark.css file after style.css in the header of each page.

Widgets

This theme imports three mandatory Javascript files: jQuery, jquery.common.min.js 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: window smartresize, easing effects, fancyBox 2, RefineSlide, nicescroll, etc (some of them are placed in a common script file and the rest 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 some widget behaviour (each external/additional plugin is configured inline - in each page).

Here are the default setting of some plugins common to all pages:

jQuery("html").niceScroll({
	cursoropacitymax   : 1,
	cursorcolor        : '#428aa1',
	cursorwidth        : '10px',
	cursorborder       : '0',
	cursorborderradius : '0',
	cursorminheight    : 50,
	hidecursordelay    : 400,
	mousescrollstep    : 50,
	grabcursorenabled  : false,
	dblclickzoom       : false
});

jQuery('ul.rs-slider').refineSlide({
	transition         : 'cubeH',
	fallback3d         : 'slideH',
	autoPlay           : true,
	delay              : 5000,
	transitionDuration : 800,
});

jQuery(".thumb .lightbox").fancybox({
	padding    : 5,
	margin     : [50, 20, 20, 20],
	maxHeight  : '95%',
	loop       : true,
	fitToView  : true,
	mouseWheel : false,
	closeClick : false,
	helpers    : {
		media : { } ,
		title : { type : 'outside'},
		overlay : { showEarly  : true, locked : false }
	},
	beforeLoad : function() {
		this.href = this.element.data('fancybox-href');
		this.title = this.element.data('fancybox-title');
	},
});

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

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);
create submenu: add a arrow class to the parent menu element (see markup for details);
add a tooltip to an element: add tooltip class to the element and specify a title attribute: <a href="#" class="tooltip" title="Tooltip example">link</a>

create a thumbnail with link, fullsize or video icons: wrap your image in a link with the thumb class and add extra information to it like this:

<a href="single.html" class="thumb">
	<img src="thumb.jpg" alt="" />
	<span class="mask">
		<strong class="link half"><em></em></strong>
		<strong class="expand half lightbox" data-fancybox-href="full-image" data-fancybox-title="Title for lightbox" data-fancybox-group="group-name"><em></em></strong>
	</span>
</a>

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

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

there are multiple options when it comes to buttons: small, normal, big , default color, gray, black. It's easy to add a .button class to any element (anchors for example) ad set a color preference and size option. Here is a big gray button: <a href="#" class="button big gray">Big Gray</a>. Please see more details in the forms-buttons.html file;
alerts are a good way to capture attention: <div class="alert">Information box</div>. Please see the alerts-widgets.html file for different options;
accordions: add a accordion 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 alerts-widgets.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 alerts-widgets.html for the markup.

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.

OneStudio Template