Hi, Thanks for purchasing our Theme
Aeolus is a template specially designed based on the Metro design style, high contrast and flat colors are some of its great features. Aeolus is very suitable for portfolio, business, corporate and any kind of websites

The Package

The Aeolus download package contains of 4 folder, the folder is "documentation", "html", "psd", and "screenshoot". The main file of html file is under folder "html", and here the structure of file from of Sirius html.

HTML Files

  • 404.html
    contain information about your 404 error page
  • about.html
    contain information about your site, your corporation, your personal info, etc
  • blog.html
    contain blog page with right sidebar
  • button-list.html
    contain sample of button and list
  • column.html
    contain sample of column
  • contact.html
    contact information and AJAX email form
  • faq.html
    contain sample of frequently and questions page
  • fullwidth.html
    contain sample of fullwidth page
  • index.html
    the homepage of template with "camera" slider
  • index-layout2.html
    the alternate homepage with different layout
  • index-layout3.html
    the alternate homepage with different layout
  • index-layout4.html
    the alternate homepage with different layout
  • portfolio-2col.html
    contain information about your projects with 2 column layout
  • portfolio-3col.html
    contain information about your projects with 3 column layout
  • portfolio-4col.html
    contain information about your projects with 4 column layout
  • portfolio-single.html
    contain detail information of portfolio
  • pricing.html
    contain sample of pricing plan
  • services.html
    information about your services offered to site visitors
  • single.html
    contain sample of single post your blog
  • tables.html
    contain sample of many color tables
  • testimonials.html
    contain of testmonials your clients
  • typography.html
    contain sample of typography

JS Files

  • camera.min.js
    used for mainslideshow in homepage
  • jquery.flexslider-min.js
    used for carousel
  • contact-form.js
    used for contact form
  • ddaccordion.js
    used for faq element
  • superfish.js
    used for dropdown menu
  • faq-functions.js
    used for faq settings
  • isotope.js
    used for filterlable on portfolio
  • jquery.easing.1.3.min.js
    library of easing jquery
  • jquery.fancybox.js
    used for lightbox on portfolio page
  • jquery.googlemaps1.01.js
    used for display google map on contact page
  • jquery.twitter.js
    used for display your latest tweet in bottom content
  • jquery.ui.totop.js
    used for to top effect
  • theme-functions.js
    All setting of jquery used for this theme
  • tinynav.min.js
    used for mini navigation when display on mobile
  • tooltip.js
    used for tooltip

CSS Files

  • base.css
    base styling of this theme
  • framework.css
    responsive framework based on Foundation
  • media.css
    contain styling of responsive design
  • noscript.css
    contain some styling when javascript disable
  • style.css
    contain main styling of this template

HTML Structure

The layout in Aeolus is flexible because this use "grid" system, so you can make any configuration of column (please refer the "column.html" for some sample of column).In this case I give example if you use 2 column, which one column is maincontent and one again is sidebar. All of the information within the maincontent area is nested within a div with an class of "eight columns" and for sidebar is nested within an class of "four columns". Navigation menu is within a div with an id of "mainmenu". The general template structure is the same throughout the template. Here is the general structure :

Site Structure

The page have five main blocks : header, pagetitle, content-wrapper, bottom-wrap, and footer each block consisting of each element present in it.

Logo

To edit the logo you can simply replace the "logo.png" for header logo file into the images folder, if you intend to use a png file. Default size for header logo is 185x48 pixel.

You can change with another big size logo, but it's not recommended and offcourse make the design not good :-)

Menu

Menu at this theme is use horizontal menu style, and it use "li" to make menu and use "li" under "li" if you want make dropdown menu. If you want make active some menu please use class="selected" in active menu that you want. If you want make spacer between logo and menu please useclass="selected"in menu before logo. See the image below to understand how it work.

Portfolio Filter

To undestand how porfolio filter work, first you must create each category on portfolio filter list, on this example I will give name ".print", ".web", and ".motion". If you look on HTML file this will like this.

Now you just need add a class of your "category" on each "li" of your portfolio, see the image below

How to change Map location ?

to set map location on contact page, first you must have "Google Maps API key" to you can learn about obtaining a valid key here. After you have API key, put your API key on "contact.html" on the line 47 you can see "APIKEY-HERE", change the value with your API key

Next step you must set "latitude" point and "longitude" point, to know your position coordinates or latitude and longitude please visit : http://universimmedia.pagesperso-orange.fr/geo/loc.htm
Change latitude and longitude on the line 53(latitude) and 54(longitude) also don't forget change the latitude and longitude for marker icon with your value.

How to setting Contact Form ?

To setting contact form, please open file "sendmail.php" and change with your email on the line 7, also you can change the email subject on the line 9.

How to make a new Favicon ?

First you must make image on size 32x32 pixel, and save in png format, after that go to this site : http://tools.dynamicdrive.com/favicon/ and create your "favicon.ico" there and replace the old "favicon.ico" in image folder with your new favicon.ico

How to make Tooltip ?

Just add this code title="your message" class="tooltip" on every a href and it will make tooltip automaticly.

How to setting Twitter Feed ?

Twitter widget is build on Twitter API 1.1 because Twitter disabled API 1.0. Unfortunately Twitter is not that easy now to include on your website, you need to have API keys (similar to Facebook). To get the access keys you need to sign in and create an application on the Twitter Developer Site. Once your application is created Twitter will generate your Oauth settings and access tokens.

Step 1 : Sign in to Twitter
Sign in to Twitter. If you don't already have a Twitter account, you can sign up at the Twitter home page to create one.

Step 2: Create your Twitter App
After you sign in, you'll be taken to your application creation page. Be sure to fill in your all fields.

  • Name: This will be displayed on each member's Twitter update.
  • Description: Give a description.
  • WebSite: Enter in the web address of your site, for example, http://yoursite.com
  • Callback URL: Enter in the web address of your site, for example http://yoursite.com

Step 3: Authorize your domain
Go to the @Anywhere domains page and add there your domain without "WWW" or "http" prefix e.g. indonez.com

Step 4: Get Access Tokens
Go back to your Twitter app's detail page and copy following keys:

  • Access Token
  • Access Token Secret
  • Consumer Key
  • Consumer Secret

Step 5: Setting up widget
When you have this keys and authorized your domain, open twiter.php and paste them to the correct fields:

Then in HTML files replace current widget script with script below and change nickname to yours. You can also modify count of visible tweets. Keep in mind that you need to upload your site online to make widget works.

Tab Shortcode

<ul class="tabs">
    <li><a href="#tab-sample1">sample1</a></li>
    <li><a href="#tab-sample2">sample2</a></li>
    <li><a href="#tab-sample3">sample3</a></li>                 
</ul>
<div class="tab_container">
    <div id="tab-sample1" class="tab_content">                            
        <p>Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper</p>                                   
    </div>
                                        
    <div id="tab-sample2" class="tab_content">                            
        <p>Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper</p>                                         
    </div>
                                        
    <div id="tab-sample3" class="tab_content">                            
        <p>Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper</p>                                         
    </div>                                                                  
</div>

Result

Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper

Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper

Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper


* only can use one tab per page

Toogle Shortcode

<!-- begin of FAQ 1 -->
<div class="ask">Sample question 1 ?</div>
<div class="question">
    <p>Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper</p>
</div>
<!-- end of FAQ 1 -->
                                    
<!-- begin of FAQ 2 -->
<div class="ask">Sample question 2 ?</div>
<div class="question">
    <p>Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper</p>
</div>
<!-- end of FAQ 2 -->
                                    
<!-- begin of FAQ 3 -->
<div class="ask">Sample question 3 ?</div>
<div class="question">
    <p>Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper</p>
</div>
<!-- end of FAQ 3 -->

Result

Sample question 1 ?

Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper

Sample question 2 ?

Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper

Sample question 3 ?

Lorem ipsum dolor amet, consectetur adipite scinelit. Vestibulum vel quam sitare amet odio ultricies dapbus acer vitae augue duis nulla nunc, dignissim ullamcorper

Sources & Credits

All image use on this theme are free and from :

All icon use on this theme are free and from :

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. 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.

Thanks,
Indonez