“Aaika” Documentation by “GSRThemes9” v1.0


“Aaika”

Created: 18/12/2014
By: GSRThemes9
Email: GSRThemes9





Hi! Thank you for purchasing my template.
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 here. Thanks so much!

This file will teach you how to set up and use the “Aaika” Theme.

Best regards,
GSRThemes9


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PHP Code
  5. PSD Files
  6. Sources and Credits

A) HTML Structure - top

This theme is a Responsive HTML5 / CSS3 for Desktop, tablet, mobile phone… All of the information within the main content area is nested within a div with an class of "container". The sidebar's content is within a div with an class of "content-right-sidebar". The general template structure is the same throughout the template.

The html are commented well so you can easily make an update.

<!-- HEADER -->

Top area, display logo, navigation and slideshow. This navigation improves the css dropdown menu with animation. The navigation is nested within a div with an class of "menu", you can change the navigation by change the <li> url and text. This is similar for all pages.

NAVIGATION MENU

<ul>
<li><a href="index.html" title="Home">Home</a><li>
<li><a href="#">Sliders</a>
<ul>
<li><a href="index.html">Slider Type One</a></li>
<li><a href="index-1.html">Slider Type Two</a></li>
<li><a href="index-2.html">Static Image Page</a></li>
<li><a href="index-3.html">Video Page</a></li>
</ul>
</li>
<li><a href="#">Features</a>
<ul>
<li><a href="typography.html">Typography</a></li>
<li><a href="elements.html">Elements</a></li>
<li><a href="pricing-tables.html">Pricing Tables</a></li>
<li><a href="columns.html">Page Columns</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="tabs.html">Tabs</a></li>
</ul>
SLIDES CONTAINER

This is the jquery slider and only used in the main page. The slider content is nested within a div with an class of "sliderContainer". You can change and update the slider images and text in this section.

<!-- BEGIN CONTENT -->

All information of all pages content area is nested within a div with an id of "content_area" and the sidebar content is within a div with an id of "sidebar".
<div class = 'item item1'>
<div class = 'inner'>
<div class = 'text1'><span>Welcome to <b>Aaika</b></span></div>
<div class = 'text2'><span>Aaika Provides Smart and Flexible Design Unique Pages,<br />Awesome Slideshows, Unique Color Variations.<br />Easy-to-customize and fully Featured design.<br />Create Outstanding Website in Minutes!</span>
<div class="morebut"><a href="#">know more features</a></div>
</div>
</div>
</div>

<!-- END OF CONTENT -->


<!-- BEGIN FOOTER -->

Footer content here.

<!-- END OF FOOTER -->

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

	#container a {
		color: #someColor;
	} 

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.


B) CSS Files and Structure - top

This "Aaika" theme uses 2 main CSS files:

I'm using three CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using:

How to Use Diffrent Colors Themes
We are Providing 10 Predefined Colors for this Theme. If you want to use Diffrent Colors for this theme... Go to Header Section of "index.html" page. There you can find (form line number 36) the Commented code of the colors. You can just remove the comments witch color skin you want to use. (like this you can do rest of the pages as well).

All the CSS is commented and separated in categories so it is really easy to find what you want.

	/* === HEADER Section === */
        
        
        #site-wrapper {
            max-width: 1000px;
            margin: 10px auto auto auto;
            background: #fff;
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
        #logo {
            min-width: 230px;
            min-height: 65px;
            margin: 23px 0px 25px 25px;
            background: url(../images/logo.jpg) no-repeat left top;
        }


	/* === BODY Section === */
	
        #content {
            margin: 16px 0 0 5px;
            padding: 0 0 27px 0;
        }
        #content .container .five.columns {
            width: 280px;
            margin: 0px 25px 0px 25px;
        }
        ul.home-services-list {
            float: left;
            margin: -12px 0px 0px 0px;
            padding: 0px;
            width: 280px;
        }
        .home-services-list li {
            margin: 0px;
            padding: 11px 0px 0px 0px;
            border-bottom: 1px solid #f0f0f0;
            list-style-type: none;
        }
        .freshworks-gallery {
            margin: 20px 30px 0px 20px;
            height: 260px;
            padding: 10px;
            background-color: #eee;
        }
        .freshworks-content {
            margin: 0px 35px 0px 0px;
            width: 180px;
            height: 225px;
            padding: 15px 20px 20px 20px;
            background-color: #fff;
            float: left;
            -webkit-box-shadow:  0px 0px 0px 0px rgba(0, 0, 0, 0.1);
            box-shadow:  1px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
	
	/* === Sidebar Section === */
	
        #content .content-right-sidebar {
            float: right;
            width: 280px;
            margin: 10px 30px 0 0;
            padding: 0 0 27px 30px;
            border-left: 1px solid #f9f9f9;
        }
        #content .content-right-sidebar h2 {
            border-left: 3px solid #ff0000;
            padding: 8px 0px 0px 17px;
            margin: 0px 0px 30px 0px;
            color: #3c3c3c;
            font-size: 21px;
            background-color: #f3f3f3;
            min-height: 32px;
        }
		
	/* === FOOTER === */
	
    #page-footer {
        margin: 0px 0px 0px 0px;
        width: 100%;
        background: #636363 url(../images/footer-bg.jpg) repeat-x left top;
        float: left;
        color: #eee;
        min-height: 312px;
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }

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.

Any images that are placed within the blog section have 5px worth of padding and a light bluish background. If you would like to edit the display of these images, find the following section in the style sheet:

	#wrapper #blog img {
		change styles here:
	}

C) JavaScript - top

This theme imports three Javascript files.

  1. Master Slider
  2. Mega Menu
  3. Animations
  4. Tabs
  5. Tipsy
  6. Toogles
  7. Slide panel
  8. Jcarousel
  9. Accordion
  10. Cubeportfolio
  11. Lightbox
  1. Slideshows: Each slideshow has some unique values you can set, like autorotation, and transition speed.

    [some Javascript goes here... ]

    Slider Script
    var slider = new MasterSlider();
     slider.setup('masterslider' , {
         width: 1400,    // slider standard width
         height:580,   // slider standard height
         space:0,
    	 speed:45,
         fullwidth:true,
         loop:true,
         preload:0,
         autoplay:true,
    	 view:"basic"
    });
    // adds Arrows navigation control to the slider.
    slider.control('arrows');
    slider.control('bullets');
    
    SyntaxHighlighter.all();
    



D) PHP Code - top

Php code used in the "demo-contacts.php" file. You just replace the top code with your contact details and Reseve E-mails.
    
    $to = 'gsrthemes9@gmail.com'; // Replace with your email
    
    

E) PSD Files - top

I've included 5 psds with this theme:

  1. index1.psd
  2. index2.psd
  3. index3.psd
  4. index4.psd
  5. index5.psd
  6. logo-1.psd
  7. logo-2.psd

If you'd like to change the logo in the header, open "logo.psd", make the necessary adjustments, and then save the file as "logo.jpg" or "logo.png". Do the same for the buttons.

With these psds you can even create your own unique “Aaika” skin.


F) Sources and Credits - top

You add new fonts by adding them to your Fonts folder in your computers Control Panel or right click font file and "Install".

Resources used:


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.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist.

To keep in touch with my latest PSD templates make sure to check out http://themeforest.net/user/GSRThemes9 frequently.

Best regards,

GSRThemes9

Go To Table of Contents