FacePress Documentation by CosmoThemes

### “FacePress” Documentation by “CosmoThemes” v 0.1

# “FacePress”

Created: 01/03/12
By: CosmoThemes
Email: support@cosmothemes.com

Thank you for purchasing this HTML template. If you have any questions that are beyond the scope of this help file, please feel free to address a question on our support forums here. Thank you a lot!

## Table of Contents

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

### A) HTML Structure - top

This theme is a full width layout with two columns (left or right) but can be set also to fixed. The general template structure is the same throughout the template. Here is the general structure.

-     <section class="b_head">

  - Header

-     <section class="b_content">

  - Actual content

-     <section class="b_body_f">

  - Footer

In order to fix and to center your content use:

    <div class="b_body_c">

- without class full-width, it will also stretch the content to 930px

All of the information within the main content area is nested within a div with an id of "primary".
Assign class="w_610" - for sidebar content max-with 74.4% width content if div class="b_body_c full-width" and 610px width without class full-width
Use class="w_930" - for 100% width or 930px width content without sidebar

The sidebar's (column #2) content is within a div with an id of "secondary".

Assign class="w_290 b" - for sidebar content with 23.2% max-width and right-side sidebar, where "b" is margin-left, and 290px width if not full-width. In this case also replace class="w_610 fl" for div id="primary"
Assign class="w_290 fl" - for left-side sidebar. In this case also replace class="w_610 b" for div id="primary"

For post page use the following mark-up:

You can also use comments:

To use meta sidebar in post, assign meta in primary:

When you use fixed layout, add w_130 class for div sidebar and change w_450 single:

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

We are using several CSS files in this theme: style.css and all files from css/ folder. The files containted in css are the following:

- style.css - imports all the other css files
- blocks.css - defines 960 grid and full-width grid
- custom.css - custom styles
- miscellaneous.css - miscellaneous styles
- prettyPhoto.css - styles for the lightbox
- reset.css - 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.
- shortcode.css - shortcodes
- iehacks.css - hacks for IE
- iehacks7.css - hacks for IE7

The primary style.css file contains all of the specific stylings for the page. The file is separated into sections:

/*Body elements*/
/*Fixed/full width settings*/
/*Mosaic overlay*/
/*Gallery icon*/
/*Branding*/
/*Logo*/
/*Profile*/
/*Cosmo icons*/ - menu
/*Search form*/
/*Timeline*/
/*Breadcrumbs*/
/*Post page*/
/*Content title*/
/*Featuring image*/
/*Meta sidebar*/
/*Excerpt*/
/*Additional info*/ /*Related posts*/
/*Comments*/
/*Widgets*/
/*Grid/List Category page*/
/*Pagination*/
/*Registration*/
/*Advertisement*/
/*Front-end submition*/
/*Tour tooltips*/
/*Footer*/

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.

### C) JavaScript - top

This theme imports 15 Javascript files.

1. jQuery (jquery-1.7.1.min.js)
2. jQuery Easing (jquery.easing.min.js)
3. jQuery Mosaic (jquery.mosaic.1.0.1.min.js)
4. jQuery Mousewheel (jquery.mousewheel.js)
5. jQuery PrettyPhoto (jquery.prettyPhoto.js)
6. jQuery PrettyPhoto Settings (prettyPhoto.settings.js)
7. jQuery Superfish (jquery.superfish.js)
8. jQuery Supersubs (jquery.supersubs.js)
9. jQuery Tabs Pack (jquery.tabs.pack.js)
10. jQuery Slides (slides.min.jquery.js)
11. jQuery Masonry (jquery.masonry.min.js)
12. jQuery Autoresize(autoresize.jquery.js)
13. jQuery Cookie (jquery.cookie.js)
14. Functions (functions.js)

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. jQuery Easing gives advanced easing options and is responsible for some annimation effects, mainly for the "floating" header
3. jQuery Mosaic generates sliding boxes & captions is used for mouse over effects and hidden content display for article items
4. jQuery Mousewheel is an optional file that adds mouse-wheel support for ScrollPane objects
5. jQuery PrettyPhoto is used to open images inside a lightbox. It supports images, videos, flash, YouTube, iframes and ajax
6. jQuery PrettyPhoto Settings sets some values for the PrettyPhoto images
7. jQuery Superfish is an enhanced Suckerfish-style drop-down menu
8. jQuery Supersubs makes the sub-menu widths variable. The fixed width set in the CSS is overridden and all menu items within a sub-menu are altered to match the width of their widest sibling
9. jQuery Tabs Pack
10. jQuery Slides is a slideshow plugin used for dynamic Twitter annimation
11. jQuery Masonry is a dynamic grid layout plugin for jQuery
12. jQuery Autoresize is a plugin used for resize form in timeline
13. jQuery Cookie is a plugin used for cookies
14. Functions loads necessary javascript functions on document ready

### D) PSD Files - top

I've included 6 psds with this theme:

1. The main layout
   1. White style
   2. Dark style
2. The archives layout
3. The post layout
   1. White style
   2. Dark style
4. Author page

For your convenience, most of graphics are already sliced and included in a separate folder: helpers/. There are 26 sprites in this folder.

If you'd like to change these graphics, open the desired file, make the necessary adjustments, and then save the file in ".png" format. Overwrite the file if already exists.

### E) Sources and Credits - top

I've used the followingfiles as listed.

- jQuery Mosaic http://buildinternet.com/project/mosaic/
- jQuery PrettyPhoto - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
- Superfish.js and Supersubs.js - http://users.tpg.com.au/j_birch/plugins/superfish/
- jQuery Masonry http://masonry.desandro.com/
- jQuery Cookie http://plugins.jquery.com
- jQuery Autoresize http://james.padolsey.com/javascript/jquery-plugin-autoresize/

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.

CosmoThemes

Go To Table of Contents