1. Chromatique's Documentation
By Ernesto Méndez
Thank you for purchasing Chromatique. This document will cover all the details regarding the
configuration and implementation of the theme.
The template uses a Tableless design, and has been hand coded from scratch using XHTML 1.0 Strict
and CSS 2.1. All the pages and stylesheets validate according to W3C Standards. Also, the design
degrades gracefully when javascript is disabled. A fully working PHP/Ajax Contact Form is included,
which also degrades gracefully if AJAX Features are not present.
One of the biggest strengths of Chromatique, is its flexibility and customization options. Javascript
variables are used to allow easy customization without the need to edit the core files. A lot of effort
was put to keep things simple.
Chromatique has 3 avaliable color themes: Dark (default), Light and Blue. All The PSD files used to
create the template are included with the the product.
If you have any questions that are not covered in this document, please feel free to email via my
contact page at http://themeforest.net/user/der.
Chromatique Documentation - 1

2. Table of Contents
• Chromatique's Features
• Technologies Used
• File Structure
• Files in core/images
• The CSS
• The JavaScript
• Configuration Options
• Setting up the PHP Contact Form
• HTML Structure
Chromatique's Features
• 5 Pages: Home | Portfolio | About | Blog | Contact
• 100% CSS Dropdown Menu, with Animations provided by jQuery
• Extremely configurable and flexible (no need to edit core files)
• Valid XHTML 1.0 Strict and CSS 2.1
• Tableless Design
• Cross Browser Compatible
• Includes IE6 PNG Fix
• Subpage Navigation
• 3 Color Themes to choose from: Dark / Light / Blue
• Fully Working PHP/Ajax Contact Form with Fields Validation
• Lightbox with support for Images, Flash, Video & more!
• Fading Image Slider
• Gracefully Degrading Design when JavaScript is disabled
• All PSD Files included
Technologies Used
The template makes use of the following Open Source Technologies:
• jQuery
• PrettyPhoto
• jQuery Easing Plugin
• jQuery dataForAjax Plugin
• DD_BelatedPNG
Chromatique Documentation - 2

3. File Structure
The template has 3 main directories:
core: Contains all the Sliced Images, Stylesheets and Javascript files.
function: The Contact Form PHP code is included here.
pages: All the HTML files are located here.
Files in core/
core/images:
The Images are located on different directories for easy referencing:
• All the images used on multiple pages are located in images/common.
• The images that are part of the template's content are located in images/content.
• All t he icons are located in images/icons.
• The user interface elements are located in images/interface.
• The images for the different themes are located in images/themes/<themename>
The CSS
The template's CSS has been structured in a modular way, which allows the ease of customization,
optimization and flexibility.
All the stylesheets, with the exception of the theme stylesheets (located in core/css/themes/), are
included in the HTML documents by the use of <link> tags. The use of @import rules has been
minimal, due to a performance impact against <link>. For more info on this, please refer to this
document.
The template has 5 main stylesheets and 2 conditionals for Internet Explorer 6/7. Here's a description
of each one (in the order in which they are imported):
1. reset.css: Eric Meyer's Reset stylesheet, which resets browser defaults, using consistent styles
across all browsers.
2. basic.css: This is where all the main styles of the page are defined, such as Typography and
Form styles. Have in mind that all the changes done in this stylesheet will affect the entire
template
Chromatique Documentation - 3

4. 3. core.css: This is the core stylesheet, where all the layout and typographic styles (specific to
design elements) are included. The file has a table of contents for easy location of the code
sections. If you need support, the sections defined on the stylesheet will aid in the location of
a specific part of the code.
4. theme.css: This stylesheet is in charge of selecting the color variant in which Chromatique
will be used. The themes are selected using CSS @import rules. The Instructions on how to
change the theme are included in the file.
5. prettyphoto.css: This is a required include of the PrettyPhoto jQuery Plugin.
The JavaScript
The JavaScript code and files for Chromatique have been separated into 3 Stages:
• Required Imports: All the required libraries are imported, such as jQuery and its plugins.
• Function Definitions: These are included within the functions.js file.
• Initialization: These are included within the core.js file.
Setting Up IE6's PNGFIX
Since Internet Explorer 6 doesn't have native support for 24-bit PNG files (those ones that have
transparency data in them), we have to enable support for PNG by using JavaScript.
To configure the PNGFIX, all you need to do is open the functions.js file, and at the beginning of the
file, you'll find a variable called pngfix_elements. This variable contains the elements that will be
scanned and added support for PNG Transparency. You can use CSS Selectors to specify the elements,
separated by commas. Some level of CSS is required to complete this task.
Configuring JavaScript Features
Chromatique has lots of customization options, and we'll go through them one by one, explaining their
function. All of those customization options can be found on the core.js file. The configuration
variables are used by the template. If any of these are removed, JavaScript errors may arise. Make
sure you don't remove any of the variables.
Chromatique Documentation - 4

5. Configuration Options
Some of the template's sections, have configuration options, we'll go through them one by one.
Configuring the Featured Items on the Homepage
• enable_featured_cycle: If set to true, the image slider will loop every X amount of seconds,
specified by the featured_cycle_interval configuration variable.
• stop_featured_cycle_on_hover: If set to true, the image slider will stop when the mouse
cursor is positioned on top of the featured image, or in any of the featured contents.
• featured_cycle_interval: Specifies the amount of seconds the featured image will wait before
changing to the next image/featured item. You can specify the value in Miliseconds also. If the
value provided is less or equal than 60, then the value will be interpreted in seconds. Any value
specified greater than 60, will be interpreted as miliseconds.
• disable_text_fade_on_ie: If set to true, this will enable the text to be faded when changing
from one featured item/image to another. This option has been disabled by default since
Internet Explorer renders non-antialiased fonts when using this feature.
Dropdown Menu Configuration
• menu_show_delay: This value specifies the amount of miliseconds to wait before showing the
dropdown menu.
• menu_dropdown_duration: This value specifies the amount of miliseconds the menu
animation will last when opening a menu/submenu.
• menu_ease_equation: This value specifies Easing Equation to be used when opening the
menu. To see the available list of Equations, please refer to the example on this page, or open
the core/js/jquery.easing.1.3.js file.
Lightbox Configuration (PrettyPhoto)
• enable_lightbox: If set to true, the Lightbox will be enabled on all the links that you specify
the following attribute: rel=”lightbox”. If you want to have many links being part of a gallery,
then the following syntax must be used: rel=”lightbox[gallery]”.
• lightbox_theme: This will set the theme that the lightbox will use. Please specify one of the
following: light rounded / dark rounded / light square / dark square.
Chromatique Documentation - 5

6. • lightbox_animation_speed: The speed in which the lightbox will open. You can specify a value
in miliseconds or one of the following: fast / slow / normal.
• lightbox_padding: This will set the padding of the lightbox window. Specify an integer value
in pixels.
• lightbox_opacity: This will set the opacity of the lightbox window. Specify a decimal value
from 0 to 1.
• lightbox_showtitle: If set to true, the lightbox will show the title of all the links that have
specified the title tag.
• lightbox_allowresize: If set to true, the lightbox window will be resizable.
• lightbox_hideflash: If set to true, this will hide flash content from the lightbox.
• lightbox_modal_state: If set to true, only the close button will close the lightbox window.
AJAX Contact Form Options
• forms_notification_delay: When sending a message using the contact form, a small
notification will be displayed. This will specify the amount of seconds for the fading animation.
Setting up The PHP Contact Form
Chromatique comes with a full blown contact form with validation. The contact form is extremely
easy to set up.
By default, if JavaScript is enabled, the Contact Form will have validation enabled and all the AJAX
Features will also be enabled. If JavaScript is turned off, validation will not be possible, and when the
user submits the contact form he/she will be redirected to a page you specify in the Contact Form
configuration.
PHP Files
The files that handle the contact form, are located in the core/function directory. The file
mailer.php contains a function defintion, in charge of sending the email, and the contact.php, which
is in charge of handling the POST data, sent by the form. The contact.php file, also handles the
request if they are sent via a normal POST request, or via AJAX. It acts accordingly.
Chromatique Documentation - 6

7. Configuring contact.php
The contact.php file contains all the configuration that is needed to make the contact form work.
Open the core/function/contact.php file, and on the top of the file, you will see some PHP
definitions:
• MAILER_EMAIL: This is the email address the server will use to send the message.
• RECIPIENT_EMAIL: This is the email address which will receive the information.
• REDIRECT_URL: If AJAX features are not available, then the user will be redirected to this URL
after submitting the form.
By default, the contact.php file doesn't send any email (for preview purposes). When deploying the
site to a live server, make sure to remove the comments from the following line :
//mailer($from, $to, $subject, $message);
HTML Structure
In this section, we'll cover everything related to using the template and its classes and elements. For
better understanding and clearance, the structured is presented in pseudo code, with the elements
that begin with a # are ID's and the ones beginning with a dot '.' Classes.
Base HTML Layout
The Homepage/Portfolio layouts consists on 3 main divs:
#header
#cache
#content
#footer
The #cache div doesn't display by default and it's used by javascript to retrieve information that will
be displayed dynamically. The #content block will contain the main page's content.
On the pages that have a sidebar (blog/about/contact), the structure is the following:
#header
#cache
#content
#main
#left
.sidebar
#footer
Chromatique Documentation - 7

8. Adding Featured Items
The block that contains the featured items, is the #featured div inside of content. The featured
items must be specified in the following order, since the structure is used by JavaScript:
1. heading
2. paragraph
3. link
To add featured items, there are 2 things that need to be done:
1) Add the 1st featured item information into the div with ID of #featured-content. This means:
Heading, Paragraph and Link.
2) Add all the featured items (including) the 1st one into the unordered list with ID of #featured-
items, inside of #cache. Have in mind that the #cache div doesn't display. Please don't forget
to include the first item's information on the #cache div, otherwise the Featured Section won't
work as expected. Each featured item is included inside a <li> element. Please refer to the
code for more information.
Changing the Logo
To change the Logo, replace the logo.png file, located in core/images/.
Adding Menus and Submenus
The Menus are added into the unordered list with ID of #navigation inside #header. To mark an item
as the active link, add class=”active” to the link you want to make active.
The Menu Items are added as <li> elements containing <a> elements inside. To add a submenu, add
class=”dir” to the <li> that will contain the submenu, and then add the <ul> inside. Make sure to add
the class to all the list items containing menus inside.
Homepage Articles
The Homepage articles are located in the #articles div. Each article is contained in a block with a
class of .article. Since the body can allow only 2 articles, everytime 2 articles are included, an empty
div with a class of .clear must be included, to clear the floats, otherwise the layout will not work as
expected.
Chromatique Documentation - 8

9. Each .article has the following structure:
.article
img.article-img: the image that the article will display
h3: The heading for the article
p: One or more paragraphs of content
a: The link the article points to
/.article
Adding a banner on the homepage
The homepage has a section to add a 728x90 banner. Add it to the .ad-wide div, located in the
homepage. You can specify more than 1 banner.
Adding content to the Footer
The footer supports 3 columns. The structure is the following:
#footer
.container
.column #footer-left-column
.column #footer-middle-column
.column #footer-right-column
/.container
/#footer
Using the Sub-Navigation
To add sub-navigation links to a page, locate the #sub-navigation unordered list, and add the links
inside of the list items.
Using the Generic Page
On the template, there's a container with a class of .generic-page, which is used to place custom
contents on the page (useful for static pages). This class is used inside of the #left div. The generic
page has the following structure:
Chromatique Documentation - 9

10. #content
#main
#left
.generic-page
.generic-page-top
.generic-page-contents: This is where the content is defined
.generic-page-bottom
/.generic-page
/#left
/#main
/#content
Using the Sidebar
The sidebar is located on the div with class of .sidebar, and it has the following structure:
.sidebar
.sidebar-top
.wrap : This is where the sidebar widgets are defined
.sidebar-bottom
/.sidebar
Adding Buttons
To add a button, add class=”button” to any link.
Adding Blog Posts
The blog posts are created inside the #left div, and have a class of .post. The structure is the
following:
.post
.post-top
.post-contents
p.info
img.featured : Featured Post Image
… content … : The post content
a.readmore : The “read more” link
Chromatique Documentation - 10

11. ul.tags : An unordered list with the list of tags
/.post-contents
.date-info : Contains the post date
big.month : The month
big : The day
/.date-info
.comments-info : Contains the post comments
a.comments-link : Link to comments
big : Number of comments
/.comments-info
.post-bottom
/.post-contents
Adding Portfolio Items
The Portfolio items need to be located inside of a div with class .portfolio-items. Each portfolio item
has a class of .item. There are 3 portfolio items per row. Have in mind that there must be an empty
div with a class of .clear after every 3 portfolio items, otherwise the layout might not work as
expected. You can have as many portfolio items as you want.
The structure of the portfolio .item is the following:
.item
.frame : this class ads the frame to the portfolio item thumbnails
a : the image the link is pointing to
img : the thumbnail image
/a
/.frame
.wrap
h4 : portfolio item's title
p : portfolio item's description
a : porfolio item's link
/.wrap
/.item
Chromatique Documentation - 11