Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 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 Chromatique Documentation - 1
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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 img.featured : Featured Post Image … content … : The post content a.readmore : The “read more” link Chromatique Documentation - 10
  11. 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