“Candenza Template” Documentation by “Ignitethemes”
“Candenza HTML Template”
themelock.com
By: Ignitethemes
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. Thanks so much!
Table of Contents
- HTML Structure
- CSS Files and Structure
- Select a Color Scheme
- Remove Color Selector
- Set Background Images
- JavaScript
- PHP Contact Form with jQuery Validation
- Nivo Slider
- Coda Slider
- Portfolio Galleries
- Sources and Credits
- PSD's
- Support
HTML Structure - top
This theme is a fixed layout based on the 960 Grid System. You can find more information about the 960 Grid System here. The 960 Grid system is a simple and efficient method for streamlining workflow. By setting a particular grid within your div tags you can set 1, 2, 3, 4, 6 columns for displaying your content. Below is an example of the 960 Grid system at its very basic:
When creating your grid layout often you will want your content to lay flush left and right with no margin. To do this just add the alpha and omega class to your grid class like so:
You can find all the css settings for the 960 grid inside the folder "html/css/grid.css". You probably wont have to modify much inside grid.css but you can if you have to.
CSS Files and Structure - top
- reset.css - The first one is a 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.
- menu.css - This file contains the styles for the main navigation.
- styles.css - This file contains most of the styles for things such as headers, fonts etc. To find a section simply search for it, ie "footer".
- grid.css - This is all the settings for the 960 Grid System.
- nivo-slider.css - Nivo Slider settings. You can learn more about the Nivo Slider here.
- coda-slider-2.0.css - Styles for the Coda Slider. You can learn more about the Coda Slider here.
- prettyPhoto.css - This is for the Pretty Photo lightbox. You can learn more about the Pretty Photo lightbox here.
- contact.css - This is for the contact form styles, seperate from the blog form. The contact.css file is contained inside the folder "html/contact/contact.css"
- tabs.css - This is the styling for the tab widget seen in many of the sidebars
- toggle.css - This is the styling for the collapsible widget
Tip: 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.
Select a Color Scheme - top
How to set your color scheme and desired background. Inside the folder "css/colors" you will find each colors css, the default is rust, if you would like to use blue for example, just rename "blue.css" to "default.css". Then to set your background open "styles.css" go to line 500 then set your background image path.
Remove Color Selector - top
You'll notice the color and background selector is still visible on each page, to remove it open each html page, first remove the script in the head section under "Slideout", then scroll to the bottom and remove the block of code under "slide out".
Set Background Images - top
You can set a different background image for each page, just open each html page, just below the body tag you will where to set the path to your image.
JavaScript - top
This theme imports several Javascript files.
- jQuery - jQuery is a Javascript library that greatly reduces the amount of code that you must write.
- My Custom Scripts - Some of the animation in this site is carried out from the custom scripts.
- Plugins - In addition to the custom scripts, I implement a few "tried and true" plugins to create the effects. If you wish to customize any of the scripts you can find them in the folder "html/js"
PHP Contact Form with jQuery Validation - top
Note: You can't test the contact form locally, you must upload it to a webserver to test.
This theme includes a working out of the box Contact form. All the contact form Scripts, CSS and PHP are contained within the folder "html/contact". Just replace the current email address with your email address or multiple email addresses inside "html/contact/contactform.php":
Then upload the entire folder "html/contact" and the file "html/contact.html" to your webserver. Your webserver must support PHP.
Nivo Slider - top
Here is an example of the Nivo Slider HTML. This block represents one slider, you can duplicate this code to create more sliders. For more detailed information about the Nivo Slider Click Here
Coda Slider - top
Here is an example of the Coda Slider HTML. Just add your content within the div panel-wrapper. For more detailed information about the Coda Slider Click Here
Portfolio Galleries - top
This theme includes several Gallery options, a standard, masonry and filterable galleries. All are very customizable and can display both images and video. The filterable galleries utilize the quicksand plugin, and all utilize the Pretty Photo lightbox. See Sources and Credits below.
Sources and Credits - top
- Nivo Slider - Click Here
- Coda Slider - Click Here
- Quicksand for the Galleries - Click Here
- Pretty Photo - Click Here
- Contact Form with jQuery Validation - Click Here
PSD's - top
Included in the package is a psd folder containing many of the elements to make skining a little easier. The folder does not contain the complete layouts, once again only main elements.
Support - top
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. 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