“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
- HTML Structure
- Sliders
- CSS Files
- Shortcodes
- JavaScript
- Change map location
- Creat Own Color Skin
- Portfolio
- MailChimp Integration
- Disqus Integration
- Zopim Integration
- Google Analytics Integration
- PHP Contact Form send_mail.php
- PSD Files
- 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
- WOW Slider
- Slider Revolution Responsive jQuery Plugin
- LayerSlider Responsive jQuery Slider Plugin
Free Sliders
- PieceMaker2
- Camera Slider
- Elastic Slider
- Refine Slider
- skitter-slider
- Flex Slider
- Nivo Slider
- Circular Content Carousel
All premium and free sliders documentaion is included in Documentation folder.
C) CSS Files - top
- Style.css
Contain the all Important styles of theme
- mobile.css
Contain the all Important styles For Responsive
- Css/Skins / *all css Files
This direcotry Contain All theme Color Skins Css files
- 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
- align-left
To align a div or anything to left
- align-right
To align a div or element to right
- center
Top-align a div elements to center
- .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
- jquery-1.8.2.min.js : jquery.js
World famous javascript Library
- jquery.tools.min.js: jquery tool files
Another famous javascript Library Check out More Detail Here
- My custom scripts : custom.js
Some functions created by me and calls of Plugin come under this file
- Js / Sliders / *.js
This Directory Contain all slider js Files For Sliders Go to Sliders
- Portfolio scripts: quicksand.js
This is for filerts the portfolio with anmation Documentaion is Here
- Tinynav.js : a small menu Plugin
for Responsive Menu
- 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
- First Open Contact.html in your text editor
- From the line number 443 to 445 You see there latitude and logtitude apply on three location with the icons You also change the icon with your icon by change the location of icons or just replace images
- Find your address longtitude and latitude by this link
- And Put the location in the code
- To change the zoom level and location see below:
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
- Open any css file from Skins folder in /css/skins for example green.css
- Copy everything from green.css and paste it in the blank css file called new-color.css in the same folder.
- You will find that only one main color code is applied to 100% of the elements of that css file.
- Use your favorite html editor to find and replace all #85A552 to new color example orange #ff9500 and save.
- Rename your new-color.css to new-orange.css or what ever you like.
- 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.
- 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
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.
-
If you don't have a Mailchimp Account, please Sign up here
-
Follow these steps to get the api of Your mailchimp Account
- Get your List id by Following these Steps of your mailchimp Account
NOTE : API Keys provide full access to your MailChimp account, so always keep them secure.
- Go to the js/php folder and open store-address.php in you text Editor
-
Enter Your Key on line 24
$api = new MCAPI('Your Api Key');
-
Enter Your List ID On line 28
$list_id = "621a6941fc";
-
Thats all Your Mailchimp Account is attached to Newletter Form Now
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
- Create a an account on http://zopim.com
- Go to settings > widgets > embed widget
- Copy just the code shown below, then find and replace it with
?1CHThwwgpaDcwGmUunRibdoKmnYVNBpd
in all files
L)Google Analytics Integration - top
- Create a an account on www.google.com/analytics, more info can be found here
- You just need to find your unique id which looks like
UA-XXXXX-Y
- Copy just the code shown below, then find and replace it with
UA-3929641-35
in all files
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
- Open send_email.php in your html editor
- On line number 4 add your email address
If you are not Receiving any email Please Make Use
- Ensure your server can run php scripts ( Ask your Host)
- Update send_mail.php by following these steps
- Try setting the FROM and TO addresses to the same address, some servers mark your message as spam if it appears to be coming from a fake location
If contact form functionality still fails, please feel free to create a support ticket via our support center
N) PSD Files - top
- I've included 18 psds of theme layouts due to the very large size of the psd I limited to the important once.
- Included iPhone and iPad mockups that are also available for free on pixeden.com
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