Modelish 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:

<header id="header" class="normal-size clearfix">
	<hgroup id="logo">
		<h1><a href="index.html"><img src="images/logo.png" alt="Site name" /></a></h1>
	</hgroup>
	<nav id="menu">
		...
	</nav>
	<span id="menu-switch" class="button">Menu</span>
	<div class="social-links">
		<a href="#" class="facebook"></a>
		<a href="#" class="twitter"></a>
		<a href="#" class="googleplus"></a>
	</div>
	<div class="sep sep-no-margin"><span></span></div>
</header>

<section id="main">
	<div class="wrapper clearfix">
		<div class="col grid12">
			<h1 class="page-title">Page</h1>
		</div>
		<div class="col grid8 alpha">
			...
		</div>
		<div id="sidebar" class="col grid4">
			...
		</div>
	</div>
</section>

<footer id="footer">
	<div class="wrapper clearfix">
		<div class="col grid4 alpha">
			...
		</div>
		<div class="col grid4">
			...
		</div>
		<div class="col grid4">
			...
		</div>
	</div>
</footer>

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.

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" />

Configuration

The template uses LESS CSS language, which means it can be easily be configured with variables and mixins. If you would like to edit the colors, fonts or style of common elements you should modify the variables.less and common.less files (and recompile if you like to use the standalone CSS file - simpless)

@bodycolor : #fff;
@textcolor : #111;
@basecolor : #a411a9;

@basefont : "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

@linkcolor : @basecolor;
@linkcolorhover : darken(@linkcolor, 10);

You can further customize the look and feel for other elements, please see the files in the less directory (it contains self documented variable names).

Note: If you don't like to use the less.js script you can compile the style.less file with a tool like simpless and use the output .css file only.

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, FlexSlider, iosSlider, Panzer Playlist, Supersized, 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:

$("html").niceScroll({
	cursoropacitymax   : 0.8,
	cursorcolor        : '#000',
	cursorwidth        : "8px",
	cursorborder       : 'none',
	cursorborderradius : '6px',
	cursorminheight    : 50,
	mousescrollstep    : 50,
	grabcursorenabled  : false,
	dblclickzoom       : false
});

$('.tooltip').tipsy({
	fade    : true,
	live    : true,
	opacity : 0.9,
	offset  : 3,
	gravity : $.fn.tipsy.autoNS
});

$('form .help').tipsy({
	trigger  : 'focus',
	opacity  : 0.9,
	offset   : 3,
	gravity  : $.fn.tipsy.autoWE
});

$('.tabs').tabify();

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 and specify a <ul class="sub-menu"> list of elements to be used for the submenu (see markup for details);
the title of each page is a <h1> marked with page-title class; you can also specify a description of the page in a <div class="subtitle"> container, but this is optional;
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>
make an image open in a lightbox: add a lightbox class to the wrapping link and everything should work out well: <a href="full-image.jpg" class="lightbox"> <img src="thumb.jpg" alt="" /></a> (don't forget to include the fancybox plugin script)

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

<div class="thumb">
    <a href="full-image.jpg" class="image-link lightbox"><img src="thumb.jpg" alt="" /><span class="icon-fullsize"></span></a>
</div>

add cool CSS3 animation on any element hover: there are plenty of animations to choose from: shake, flash, bounce, tada, swing, wobble, wiggle, pulse, flip. For example, if you want a submit buttons to shake when hovered specify the “animated” class and the animation type name: <input type="submit" class="animated shake" value="Go" />

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 grey button: <a href="#" class="button big grey">Big Gray</a>. Please see more details in the forms-buttons.html file;
alerts are a good way to capture attention: <div class="alert info">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.

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.