“Adorable - Business, Services, Portfolio HTML Template” Documentation by “OTWthemes” v1.0


“Adorable - Business, Services, Portfolio HTML Template”

Created: 17/06/2013
By: OTWthemes
Email: use my ThemeForest profile page

Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please contact us via the contact form on our profile page - here.
Thanks so much!


Table of Contents

  1. Layout - Grid, Responsive, Boxed
  2. HTML Structure
  3. Skins
  4. Pages
  5. Widgets
  6. Sliders
  7. Icons
  8. CSS, Javascript, PSD Files
  9. Sources and Credits
  10. Additional Information

A) Layout - top

This template is based on a very powerful and still very flexible grid system. The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.

Grid - desktop, mobile, block

Two grid systems are available - one for large screens, one for mobile devices. The desktop grid is 24 columns to give maximum flexibility - allows division by 2, 3, 4, 6, 8, etc. The mobile grid is based on 6 columns - allows division by 2, 3.

The grid. Here is an example of 3 columns:

<div class="otw-row">
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
</div>

The mobile grid
For mobiles by default the grid will make everything in one column. If you want to have more control we have made available a mobile grid too. It is based on 6 columns - allows division by 2, 3. The mobile grid has similar classes structure

.mobile-one
.mobile-two
.mobile-three
.mobile-four
.mobile-five
.mobile-six

Block grids
These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly. Block grids are made from a ul.block-grid with #-up styles chained to it.
By default, these blocks will stay in their N-up configuration on mobile devices, but you can add a class of "mobile" to have them reshuffle on smart phones into one element per line, just like the grid. If you want to use a different layout for mobile, say .five-up for large screens and .three-up for small devices, you can simply use classes like, .mobile-three-up.

Example Six-up / Two-up Mobile. This will display in 6 columns and in mobiles it will be in two columns:

<ul class="block-grid six-up mobile-two-up">
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
</ul>

Responsive

Site width

By default the theme is 960px. You can change that easily by using some custom CSS. All you need to do is set both of the following to whatever width you like:
.otw-row { width: 960px }
.fixed-width { width: 960px; }
All content is pretty flexible and should shrink or stretch normally. Just have in mind not to use too small or too big values.


B) HTML Structure - top



C) Skins - top

The template comes in 12 easy to set up skins.

Black, Blue and Green
The three main color skins are Black, Blue and Green. Each skin has its own folder with CSS and specific images used in the design:

By default the template will load the black skin.
To change to Blue or Green you need to change this line it he header of your templates: <link rel="stylesheet" href="stylesheets/black/adorable-all.css">

Black boxed, Blue boxed, Green boxed
To make any of the 3 color skins boxed, on the "page-wrapper" wrapper which is right after the body you need to add the following:
- add class simple-boxed
- add id boxed-layout.
Example: <div class="page-wrapper simple-boxed" id="boxed-layout">

Add some padding-top and padding-bottom in #boxed-layout if you want your site to have some space on top and bottom.
Background color or image can be applied here: #boxed-layout.simple-boxed { background: whitesmoke; }
If you want to add some space on the left and the right of your content before the box, you need to change the value of max-width: on #boxed-layout #page-content. The width set here minus the width set for the site width will give some space (equally divided) on the left and the right between the box and the content.

Here is something we add to make the big titles for the slider fit a bit better:
#boxed-layout .big_white { color: #666 !important; }

Black boxed out, Blue boxed out, Green boxed out
Start on top of the 3 default skins Black, Blue and Green, here is what you need to do. On the "page-wrapper" wrapper which is right after the body you need to add the following:
- add class boxed-out
- add id boxed-layout.
Example: <div class="page-wrapper boxed-out" id="boxed-layout">

We've also added some CSS for the boxed out skins:
#boxed-layout.boxed-out {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

#boxed-layout.boxed-out #top {
background: #fff;
padding-top: 0;
}

#boxed-layout.boxed-out #primary .otw-primary-menu > li > a,
#boxed-layout.boxed-out #otw-site-slogan,
#boxed-layout.boxed-out #language-menu ul li a {
color: #6c6c6c;
}

#boxed-layout.boxed-out #otw-site-title img {
display: none;
}

#boxed-layout.boxed-out #otw-site-title a {
background-image: url(../images/adorable-logo-black.png);
display: block;
margin-top: 11px;
width: 104px;
height: 29px;
}

Black header out, Blue header out, Green header out
Start on top of the 3 default skins Black, Blue and Green, here is what you need to do. On the "page-wrapper" wrapper which is right after the body you need to add the following:
- add class header-out
- add id boxed-layout.
Example: <div class="page-wrapper header-out" id="boxed-layout">

We've also added some CSS for the Header out skins:
#boxed-layout.header-out #page-content {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

D) Pages - top

Lots of ready to use pages and examples:


E) Widgets - top

Lots of widgets and customization options. Check the Widgets page under Features on the demo site.

The logos in clients widget use svg filter for Firefox since there is no CSS filter for Forefox. This makes the logos a little blurry when they are not hovered. If you don't like that effect and you'd like to remove it you can remove that svg filter for Firefox only. In .otw-sc-clients img { } you need to remove filter: url("../../images/desaturate.svg#greyscale");


F) Sliders - top

The template comes with two sliders.


Both sliders can be fixed or full width. Both are responsible.

12 sliders examples are included in the download package. Save time and start working on one of them.

The files for both sliders are located in folder named sliders. You will find there two folders for each slider. One with the original name containing the original code for the slider and another one -custom which includes all custom styles. If you want to modify the styles for a slider we recommend you use this second folder so you can keep the original clean of custom code.


G) Icons - top

Two types of icons

Includes classes for both types and a big set of Font Icons.

Font icons are located in a folder named Icons. In there you will find two sets of fonts icons - foundation social set and foundation general set.

For image icons you can use your own image icon sets.


H) CSS, JavaScript, PSD Files - top

CSS

CSS files are located in a folder named stylesheets. All css files are documented.

JavaScript

Most of the javascripts that we have used in this template are located in a folder named javascript.

PSD Files

In the PSD.zip we have included all files necessary to produce the corresponding template styles for all color schemes. All PSD files are layered, organized in groups and properly named.

I) Sources and Credits - top

This template uses popular libraries and scripts. You can refer to any of the libraries documentation for more information and any customization you might like to do.

Foundation framework - http://foundation.zurb.com/
HTML5 Shiv - http://code.google.com/p/html5shiv/
jQuery - http://jquery.com/
jQuery UI - http://jqueryui.com/
Footable - https://github.com/bradvin/FooTable
Flex slider - http://www.woothemes.com/flexslider/
Slider Revolution - http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Tinynav - http://tinynav.viljamis.com/
Jquery animate shadow - http://www.bitstorm.org/jquery/shadow-animation/
Quicksand - http://razorjack.net/quicksand/

Fonts
Open Sans, Open Sans Condensed - http://www.google.com/webfonts

Images
http://creattica.com/creatives/visio/114041
http://creattica.com/creatives/wilsonkhan/229981
http://creattica.com/creatives/rigo-ortiz/28129
http://creattica.com/creatives/timagoofy/229573
http://creattica.com/creatives/matt-edwards/212435
http://creattica.com/creatives/cragi/67741
http://creattica.com/creatives/m-pire/27745
http://creattica.com/creatives/lemongraphic/67495
http://creattica.com/creatives/ladfree/221192
http://creattica.com/creatives/print-grain/22760
http://creattica.com/creatives/sergio-mereces/225071
http://creattica.com/creatives/moey/33095
http://photodune.net/item/business-development-hands-holding-seedling-in-a-group/202925?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Yuri_Arcurs
http://photodune.net/item/office/369552?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Pressmaster
http://photodune.net/item/smiling-cute-business-woman-with-colleagues-at-the-back/202687?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Yuri_Arcurs
http://photodune.net/item/smart-business-man-with-a-laptop-and-colleagues-at-the-back/202599?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Yuri_Arcurs
http://photodune.net/item/city-skyline/1011301?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=magicinfoto
http://photodune.net/item/businesswoman-with-cloud-computing/683504?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=posterized
http://photodune.net/item/nature/2862703?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=VIPDesignUSA
http://photodune.net/item/nature/2908765?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Pakhnyushchyy
http://photodune.net/item/nature/2868525?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Klimov
http://photodune.net/item/nature/2908326?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Pakhnyushchyy
http://photodune.net/item/office-worker/2612846?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Pressmaster
http://photodune.net/item/girl-with-an-attractive-smile/645011?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Yuri_Arcurs
http://photodune.net/item/woman-studying-outdoors/451049?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=andresrphotos
http://photodune.net/item/businessman/2559441?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Phovoir

Logos
http://creattica.com/creatives/mauro-bertolino/124693
http://creattica.com/creatives/peter-duong/69047
envato logos

Icons
http://www.iconsweets2.com/
http://bijou.im/
http://picons.me/
http://www.iconfinder.com/icondetails/17834/128/alert_error_exclamation_mistake_warning_icon
http://www.iconfinder.com/icondetails/58508/32/checkbox_full_tick_icon
http://www.iconfinder.com/icondetails/58596/32/note_pinned_icon


J) Additional Information - top

More information, in-line documentation and examples could be found at the demo site.
If you have any questions, please contact us via the contact form on our profile page - here.


Once again, thank you so much for purchasing this template. If you like it please consider rating it as a way of supporting consistent feature improvements. We'd be glad to help you if you have any questions relating to this template. No guarantees, but we'll do our 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.

OTWthemes

Go To Table of Contents