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
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>
SLIDES CONTAINER
<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>
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.
<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>
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.
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:
}
This theme imports three Javascript files.
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();
$to = 'gsrthemes9@gmail.com'; // Replace with your email
I've included 5 psds with this theme:
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.
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