“Olimpia Responsive Fitness Center” Documentation by “Ansonika” v1.0


“Olimpia Responsive Fitness Center”

Created: 21 May 2012
By: Ansonika
Email: info@ansonika.com

Thank you for purchasing my theme. 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. If you are happy with the theme, please TAKE A MOMENT TO RATE IT on the ThemeForest website. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. Customize the template and video content
  4. PHP newsltetter form and sign up form
  5. JavaScript
  6. PSD Files
  7. Sources and Credits
  8. Bonus files

A) HTML Structure - top

This theme has a fixed centered layout 960px. It's based on Skeleton framework grid. It's RESPONSIVE!!


B) CSS Files Structure and basic modfication - top

The css files are inside the css folder.

  1. base.css: Basic styles of Skeleton (reset, heading, button, forms, etc..)
  2. skeleton.css: The grid
  3. layout.css: all layout styles (mediaqueries included)
  4. flexslider.css (Homepage slider)
  5. supersized.css (Fullscreen Gallery)

To modify colors, typografy, button style ecc....find the realtive commen line in base.css. Below how the file is organized:

BASE.CSS STRUCTURE:
#Reset & Basics
#Basic Styles
#Site Styles
#Typography
#Links
#Lists
#Images
#Buttons
#Tabs
#Forms
#Misc */

LAYOUT.CSS STRUCTURE:
1. SITE STRUCTURE
2. PAGES AND CONTENT
3. MISC
4. MEDIA QUERIES

Change the logo
To change the logo, simply edit the text with your company name.
<div class=" four columns" id="logo"><a href="index.html"><span>Olimpia</span> Center</a></div><!-- Your text logo-->

Change the captions and the background images for the fullscreen background gallery: open bg_images.js inside the js folder. Modify the lines of code below as you need.

slides 					:  	[		//Slideshow Images
{image : 'img/1.jpg', title : title : '<h3>Burn calories not cash</h3><br><span>subscription from 60$</span>'},
{image : 'img/2.jpg', title : title : '<h3>Burn calories not cash</h3><br><span>subscription from 60$</span>'}
]

});
});

ATTENTION!!: LAST IMAGE HAS NO COMMA

Change the youtube video
For Vimeo find the line <iframe src="http://www.youtube.com/embed/cw0swisPh-M" width="465" height="270" ></iframe> .....change the code marked in bold.

Change the button labelling
All the buttons are fully editable. Simply replace the text...you can use text long as you need.

<a href="#" class="button">Read more</a>
Change the map location
Use google map to find the proper latitude and longitude , then change the code narked in bold.
<div class="map_canvas add-bottom" data-lat="39.621557" data-lng="0.370233" 
data-address="Palma, Spain" data-zoom="10" data-maptitle="Paradise Hotel" style="height:275px;width:100%;">
</div><!-- end map-->

THE GRID

Change the button labelling
All the buttons are fully editable. Simply replace the text...you can use text long as you need.

<a href="#" class="button">Read more</a>

Add a block container

<article class=" sixteen columns add-top-bottom add-bottom">
<div class="four columns offset-by-one alpha ">
<h4>More about us</h4><p>Aliquip platonem ea pro, </p>
</div>
<div class="nine offset-by-one columns line">
<p> Ex utroque eleifend qui.</p>
<h5>Ex sed inani solet sadipscing</h5>
<p> Ex utroque eleifend qui.</p>
<p> Ex utroque eleifend qui.</p>
</div>
</article><!-- End article-->

Artcile is an html5 tag...dont' worry it's like a simple div. The class add-top-bottom add a padding top and bottom to the container; to the container. To change the background color of the block/article, open layout.css under the section 1. Site structure find this line:
article{ background-color:#000;}

THE GRID

Columns on a Full Width Page (16 Columns)

1/2 Columns (8 cols)
<div class="container">
    <div class="eight columns">Half Width</div>
    <div class="eight columns">Half Width</div>
</div>
1/4 Columns (4 cols)
<div class="container">
    <div class="four columns">Quarter Width</div>
    <div class="four columns">Quarter Width</div>
    <div class="four columns">Quarter Width</div>
    <div class="four columns">Quarter Width</div>
</div>
3/4 Columns (12 & 4 cols)
<div class="container">
    <div class="four columns">Quarter Width</div>
    <div class="twelve columns">3/4 Width</div>
</div>
1/3 & 2/3 Columns

Thirds use a special syntax for full-width

<div class="container">
    <div class="one-third column">1/3 Width</div>
    <div class="two-thirds column">2/3 Width</div>
</div>
Nested Columns

If you nest columns (use columns within columns), you'll need to use the .alpha and .omega classes on your first and last columns, respectively, to account for the margins.

<div class="container">
    <div class="eleven columns">
        <div class="five columns alpha">First</div>
        <div class="six columns omega">Last</div>
    </div>
</div>
Offsets

To leave a column gap between columns, use the .offset-by-X class. Valid values for X are 'one' through 'fifteen'

<div class="container">
    <div class="eleven columns"></div>
    <div class="four columns offset-by-one"></div>
</div>
To Clear Rows

For a full demonstration of the responsive grid, visit the Skeleton Grid Demo



D) PHP files: Newsletter, Join form and Contact form - top

All the files you need are located in asset folder. Below an example taken from newsletter.php; all the files are well commented.

Contact form
It's the same logic and script of check newsletter. If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings
3) If your email has to be managed from the same hosting provider

IMPORTANT: if you have problems with the php files check your folder file permission in your host; the asset folder must have 755 and the files inside 644.


E) JavaScript - top

This theme use These Javascript.




F) PSD Files - top

Inlcuded to layered and grouped psd file with main elements.

 

Editing and exporting

All the psd files have layers clearly grouped, starting from the background and then follow the order of the structure of the page. To edit an element (text or image) browse the layers folder or use the right click mouse option ( with the Move tool active ) over the element, to select it.


G ) Sources and Credits - top

I've used the following images, icons or other files as listed.


G ) Bonusl files - top

Inlcuded with this theme there is an email newsletter layout with psd, ready for Mailchimp. Below a screenshot.




Once again, thank you so much for purchasing this theme. Please take a moment to rate it.

Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name or submit a comment on item page. You will receive an answer within 24-48 hours (working days) GMT +1.

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify:

Ansonika

Go To Table of Contents