bloooming.com
boooster - xhtml template
Created: 12/04/2010
By: bloooming.com
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
1) What's in the package - top
- Six different color shemes, blue, green and red on a bright or dark background
- Three different sliders (fixed pictures, sliding picture, pictures only)
- Animated backgrounds (no Flash, iPad ready)
- Shopping cart with Paypal, Paymex or 2Checkout
- Contact form (PHP)
- XML configuration for the shop and the contact form
- Tabs on the front page
- Collapsible navigation on content sites
- Lightbox, fancy mouse over effect
- Customized twitter widget
- Cufon headlines
- A lot of unique custom jQuery plugins
- Nifty little effects
Folder structure:
- Documentation (you found it!)
- Fonts (all specific fonts used in this theme)
- PSD (photoshop files)
- xhtml
- bright-blue
- css
- img (images for layout)
- js
- lib (php and xml scripts needed for the shop and contact form
- content pictures
- bright-green
- bright-red
- dark-blue
- dark-green
- dark-red
- bright-blue
2.1) General Structure - top
The general raw structure of the theme contains three sections:
- Header with logo and navigation
- Content section
- Footer
2.2) Structure front page - top
The content of the front page is divided in a slider and the tabs.
2.2.1) Sliders - top
You can choose between three different sliders
- Slider with headline and picture (preview)
- Slider with headline and fixed picture (preview)
- Slider with pictures only (preview)
Code for slider with a fixed picture
Find further documentation for this slider here: AnythingSlider
Code for slider with sliding picture
Find further documentation for this slider here: AnythingSlider
Code for slider with pictures only
Find further documentation for this slider here: Nivo Slider
2.2.2) Tabs - top
The tabs come by default with 5 predefined sections:
As you can see every section has a headline, a description and a icon.
The content areas for each tab are defined as following:
If you change the IDs make sure they match with the tab links.
For the content itself I have defined a 3 column structure. Here are a few samples how to use this:
- 3 cols
- double col (like in the first tab)
2.2.3) Lightbox - top
To get a lightbox with the fancy zoom effect, add the "zoom" class to a linked picture
If you have multiple pictures and want a gallery with "click through arrows", add the attribute "rel" to your link,
and name your gallery.
Here is a sample code for the "little gallery":
Thumbnails for this are 85x85 pixels.
Add "new" class to your link to get the "NEW" badge.
2.3) Structure content pages - top
On the content pages we have a left and a right col. At the top of every page is a "breadcrumb-menu".
The left col can be divided in two other cols.
2.3.1) Collapsible navigation - top
Collapsible navigation is made with lists, like following. Make sure you don't forget the class "productsmenu", otherwise the menu will not be collapsible
3) Shopping cart - top
The shop works with AJAX, this means there is no page reload when the user hits "add to cart". It is very easy to configure, the products, fees and checkout configuration are administered in the lib/config.xml file.
The screenshot below is the configuration for one product, just copy one of the dummy data blocks and change it for your needs. Don't forget to define a product category, this is needed to display the products on the website.
You just need to write one line of code to display the products on your site. All the markup is done "automagically".
"Sportscars" is the category of products. Of course you can have different pages with different product categories.
Fees
It's possible to define several "fees", e.g. shipping, these were added to the cart during the checkout process.
Checkout
At the moment you can choose between Paypal, Moneybookers, Paymex and 2Checkout, see screenshot below:
If you choose 2Checkout make sure that the currency setting in your 2Checkout Account is the same like in config.xmls
4) Contact form - top
The contact form works also with AJAX, the email sending is handled invisibly over the files in the "lib directory", therefore PHP5 needs to be installed on the webserver.
There are a few necessary adjustments you need to do before the sending will work.
Open the lib/config.xml file and change the variables in the "ContactForm" section.
5) Nifty little features - top
Moving background
This is something you probably won't see every day on the web. It is done with jQuery and without flash, so it will work on the iPad.
The PSD file for this is included in the package, so if you don't like the smoke or the clouds you can change the two moving pictures.
If you don't want a moving background at all, open the js/markup.js and add two slashes in front of the two lines below:
If you do want the smoke or the clouds, but don't want them to move, just add slashed to the second line where "setInterval....."
Then open css/booster.css, find #smoke1 and #smoke2 and remove the "display:none;" attribute.
Some unique features
- The litte screws on the content pages are moving on ajax activity (e.g. when adding a product to the cart)
- The magnifier on hovering a lightbox pictures is also animated
- The products "fly" into the cart when clicking the "add to cart" button
- There is a customized paypal header which appears on checkout at the paypal page. There is a PSD file for this so you can customize it.
- Built in Twitter widget. (To customize it simple change the twitter username on line 103 in blog.html
That's it, you should now be able to adjust this theme for your needs.
If I forgot something, or something appears to be unclear to you, just drop me a line at my profile on themeforest, and I will try to help you.
bloooming