Table of Contents
- HTML Structure
- CSS files and structure
- JavaScript
- Layered PNG files
- PHP code explanation
- Sources and credits
HTML structure
This theme is a fixed layout with two columns. All of the information within
the main content area is nested within a div with an id of "content".
The sidebar's (column #2) content is within a div with a class name "sidebar".
The general template structure is the same throughout the template.
Here
is the general structure.
If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:
For example, to change header H1 font size:
h1 { font-size: 24px; line-height: 30px; } /* Edit this style with your values */
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.
CSS files and structure
I'm using two CSS files in this theme. The first one is a generic reset file ( reset.css ). Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this.
The second file ( style.css ) contains all of the specific stylings for the page. The file is separated into sections using:
/* HEADER SECTION */
... some code/* HOMEPAGE SECTION */
... some code/* PORTFOLIO SECTION */
... some code/* BLOG SECTION */
... some code/* SIDEBAR SECTION */
... some code/* FOOTER SECTION */
... some code... etc
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.
All color schemes related styles are located in /colors_css folder. All you need for color scheme changing is to attach necessary css file from this folder.
JavaScript
This theme imports some Javascript files. All JavaScripts are located in /scripts folder.
- jQuery is a Javascript library that greatly reduces the amount of code that you must write. ( file: jquery.min.js )
- Rounded corners script ( file: jquery.corner.js )
- Carousel Slider script ( file: infinitecarousel.js )
- "PrettyPhoto" - lightbox alternative script ( folder: /prettyphoto )
- "Notice" - contact form validation notice ( folder: /notice )
- "Nivo Slider" - JQuery slider script ( folder: /nivoslider )
- Newsslider - news rotator script used on homepage ( folder: /newsslider )
- Fade Cycle slider ( folder: /fade )
- DD Smooth navigation menu ( folder: /ddsmoothmenu )
- Cufon - Font replace script ( folder: /cufon )
Layered PNG files
I've included 6 layered PNGs with this theme:
- home.png - homepage layout
- blog.png - blog page layout
- contacts.png - contact page layout
- portfolio.png - portfolio fullpage layout
- portfolio_2column.png - portfolio 2-column layout
- portfolio_3column.png - portfolio 3-column layout
PHP code explanation
PHP version is located in /php folder. First of all you need to edit settings.ini file. Color scheme, homepage slider variant, site title, contact form email are editable in this file. Set up values as you need:
settings.ini file listing:
title = Megapolis template demo // <title> tag content
color_scheme = 1 // use 1,2,3 or 4 (1 - black, 2 - green, 3 - brown, 4 - blue color scheme)
slider = 1 // use 1,2 or 3 (1 - Nivo Slider, 2 - Fade Cycle, 3 - Carousel slider)
contact_email = your@email.com // E-mail for contact form message sending
index.php file contains include() directive depending on $_GET['tp'] variable.
other PHP files list:
- header.php
- home.php
- about.php
- sidebar.php
- blog.php
- portfolio.php
- contacts.php
- sendform.php (contact form validating and processing script)
- footer.php
Sources and credits
I've used the following javascript files, icons or other files as listed:
JavaScripts:
- Rounded corners script
- Carousel Slider script
- "PrettyPhoto" - lightbox alternative script
- "Notice" - contact form validation notice
- "Nivo Slider" - JQuery slider script
- Newsslider - news rotator script used on homepage
- Fade Cycle slider
- DD Smooth navigation menu
- Cufon - Font replace script
Icons:
Crystal icons from everaldo.com
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.
Artur Cosicov