“UNOLUTION” Documentation by “fahim saqib” v1.0


“UNOLUTION v1.0 Template”

Date: 28/02/2013
Developer: Fahim Saqib
Producer: DesignMonstr

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please first refer to FAQ page of the theme and for further assistance feel free to create a support ticket via our support center. Thanks so much!


Table of Contents

  1. HTML Structure
  2. Sliders
  3. CSS Files
  4. Shortcodes
  5. JavaScript
  6. Change map location
  7. Creat Own Color Skin
  8. Portfolio
  9. MailChimp Integration
  10. Disqus Integration
  11. Zopim Integration
  12. Google Analytics Integration
  13. PHP Contact Form send_mail.php
  14. PSD Files
  15. Sources and Credits

We recommend following tools and extension to be downloaded and installed in order to expedite theme editing process

HTML editor software Firefox extensions

If you are completely new to web design and development then you will need to learn HTML/CSS basics. visit CODE ACADEMY to basics.

A) HTML - top

UNOLUTION use the Bootstrap Framework system , theme use the 12 columns classes like that

<div class="container"> 
<div class="row">
<div class="span12"> full width div </div>
<div class="span6"> half width div and so on.. </div>
</div>
Get more info about Bootstrap



B) Sliders - top

In UNOLUTION v1.0 we included total 11 Sliders.

Premium Sliders

  1. WOW Slider
  2. Slider Revolution Responsive jQuery Plugin
  3. LayerSlider Responsive jQuery Slider Plugin


Free Sliders

  1. PieceMaker2
  2. Camera Slider
  3. Elastic Slider
  4. Refine Slider
  5. skitter-slider
  6. Flex Slider
  7. Nivo Slider
  8. Circular Content Carousel


All premium and free sliders documentaion is included in Documentation folder.

C) CSS Files - top

  1. Style.css Contain the all Important styles of theme
  2. mobile.css Contain the all Important styles For Responsive
  3. Css/Skins / *all css Files This direcotry Contain All theme Color Skins Css files
  4. Css/ Sliders / * folders of Sliders Css This direcotry Contain All Slider Css files


Not Every css file is Important to Explain , Only Few are important listed above.

Basic styles editing Method 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.



Some Global Css classes

  1. align-left To align a div or anything to left
  2. align-right To align a div or element to right
  3. center Top-align a div elements to center
  4. .dropFor Drop cap



Important Note Global styling and basic elements are define in the starting of style.css, So please check it Properly for any customization


To make You own Custom Color skins Check Here


D) Shortcodes - top

If there is no space between two shortcodes Please use <br class="clear"/> to make space.


Shortcode Pages


There are several shortcodes that comes with Unolution theme, here are few examples.

Promo box


Buttons






Accordion





Most of the shortcodes are self-explanatory, so check out all our shorcodes.



E) JavaScript - top

This theme uses these Javascript files which can be found in js folder . *Not ALL scripts are imported on ALL pages
  1. jquery-1.8.2.min.js : jquery.js World famous javascript Library
  2. jquery.tools.min.js: jquery tool files Another famous javascript Library Check out More Detail Here
  3. My custom scripts : custom.js Some functions created by me and calls of Plugin come under this file
  4. Js / Sliders / *.js This Directory Contain all slider js Files For Sliders Go to Sliders
  5. Portfolio scripts: quicksand.js This is for filerts the portfolio with anmation Documentaion is Here
  6. Tinynav.js : a small menu Plugin for Responsive Menu
  7. superfish.js : Juqery dropdown menu plugin More info is Here



F) Change Map location - top

This theme use a jquery Plguin for Man is Jquery Map Marker Plugin visit its homepage for More Info

To change the location of map Do the following steps




G) Create Own Color Skins - top

Unolution come with bunch of Predifined Color skins but your can try different color using our theme controller and create Your own by Following These Steps

  1. Open any css file from Skins folder in /css/skins for example green.css
  2. Copy everything from green.css and paste it in the blank css file called new-color.css in the same folder.
  3. You will find that only one main color code is applied to 100% of the elements of that css file.

  4. Use your favorite html editor to find and replace all #85A552 to new color example orange #ff9500 and save.
  5. Rename your new-color.css to new-orange.css or what ever you like.
  6. In order to link your new css file with every page simply do a Find and Replace for all pages with Find "new-color.css" and Replace "new-orange.css" and save. If you are using notepad++, dreamweaver or komodo edit this should be just a 2 click process.
  7. Last you will have to change the default color of the menu drop down. So open plugins.css located /css/ folder. The default color in the plugin.css is #00A0DB so you will find and replace it with your new orange color code #ff9500 and save, and thats all.



H) Portfolios - top

In UNOLUTION theme there are 6 portfolios designs, In which Four Portfolio Use Two Premium Plugins, I am Here Explaing the Two Portfolio Which are not a Part of Premium Plugin One is 4 Column Portfolio another is Full Width Portfolio

All Premium Portfolio plugins documentaion is included in Documentation folder.
Total SIX Portfolio Pages
Below you will find the documentation for the portfolio pages built upon Quicksand plugin

Code structure of Portfolio grid

portfolio

Important point :- In <li> classes dont forget to apply category class in which category you want that <li> item to display and Please apply a unique id to a <li> also , which play a big role in animation of quicksand Plugin




I) MailChimp Integration - top

Unolution comes with fully Integrated Mail Chimp functionality, here are the steps to connect the footer Newsletter Form to your Mailchimp account.

  1. If you don't have a Mailchimp Account, please Sign up here
  2. Follow these steps to get the api of Your mailchimp Account
  3. Get your List id by Following these Steps of your mailchimp Account

  4. NOTE : API Keys provide full access to your MailChimp account, so always keep them secure.
  5. Go to the js/php folder and open store-address.php in you text Editor
  6. Enter Your Key on line 24
    $api = new MCAPI('Your Api Key');
  7. Enter Your List ID On line 28
    $list_id = "621a6941fc";
  8. Thats all Your Mailchimp Account is attached to Newletter Form Now



J) Disqus Integration - top

Unolution also comes integrated with Disqus Comment System. To activate Disqus Functionality Just Sign up here and then get the shortname. In this theme disqus is used on blog full post page where you can simply replace the shortname ex. gfxtheme below with your new shortname.
var disqus_shortname = 'gfxtheme';

Technically you drop the complete code from disqus anywhere in the template to allow visitors leave comments.





K) Zopim Integration - top


L)Google Analytics Integration - top


M) PHP Contact Form - top

For Contact Form this theme use the send_mail.php file which included in js/php folder, When a user hit send so a jquery funtion in custom.js validate the form and if all thing are right it submit the form

Note: send_email.php must be updated before use!

Update send_mail.php by following these steps

If you are not Receiving any email Please Make Use


If contact form functionality still fails, please feel free to create a support ticket via our support center


N) PSD Files - top

I hope these Files is Self explantory to You


O) Sources and Credits - top

I've used the following images, 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..Contact me by email or by my profile themeforest

DesignMonstr.com

Go To Table of Contents