Created: 28/02/2010
By: Andon
Email: andon.design@gmail.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!
To install the Business Success Site Theme all you need to do is unzip the business-success.zip and copy the 'business-success/' folder to your server hosting account public directory. To view the home page point the browser to the location where you copied the theme.
To change the preset styles all you have to do is to change two lines of code in the page's <head> lines 15 and 19:
<link rel="stylesheet" id="text-css" href="styles/style1/css/text.css?ver=1.0" ... ...Where is says style1, change it to one of the seven available preset styles., e.g. style1, style2, ...., style7
<link rel="stylesheet" id="style-css" href="styles/style1/css/style.css?ver=1.0"...
To take advantage of the preset column resize options used on the Home page content area as well as the bottom area with the four columns, you will have to apply a css class to the column div called: either "column_1_of_4", "column_2_of_4", "column_3_of_4", or "column_4_of_4".
For example, if you would like to have only 2 colums, use "column_2_of_4"
for both colums respectively. To see a real example as to how it's implemented view the source of index.html.
The template comes with the jQuery Cycle Plugin image slider for the Home page, the images are EXACTLY 940px by 300px. I have included the PSD files to help you create your own slider images.
The Cycle plugin home page could be explored for more examples. All available 28 transition effects for the slides could be seen here. You could apply these transition effects by editting the scripts/script.js file, look for the following code:
// jQuery Cycle Plugin Slider
jQuery(document).ready(function($){
$('.slideshow').cycle({
fx: 'fade, curtainY, turnDown, wipe, fade, scrollVert, growY, scrollDown',
pause: 1,
randomizeEffects: false,
sync: true,
speedIn: 1000,
speedOut: 500,
timeout: 5000,
delay: -2000
});
});
Edit the line starting with 'fx' to add or remove transition effects. Comma-separate multiple entries. For various other options visit this page.
To setup a Portfolio page, you'll need to have some larger images for the preview and their corresponding thumbnails. Note: the default thumbnail size is 250px by 157px (W x H). For more details look at the portfolio.html source.
To understand how 960 Grid System works please visit their website. If you would like to have your sidebar postitioned on the left-hand side but would like to have the content placed before the sidebar behind the scenes, you would have to use a 960 Grid System feature pull and push. E.g.let's say the content area spans 11 columsn, where the sidebar spans 4 columns, in this case apply the following classes to the content and sidebar divs to have them reversed behind the scene for better SEO:
<div id="page_content" class="grid_11 push_4 lelfPadding20">
...
</div><!-- end page_content -->
<div id="sidebar" class="grid_4 pull_11">
...
</div><!-- end sidebar -->
The contact page has some php variables that you could set at the very top of the contact.php file. For example use the $enable_NA_format variable to enable or disable North American phone number validation in the email form. Refer to the contact.php file to further info. Here's the config area of the contact.php file:
/*---------------SET THE FOLLOWING CUSTOM VARIABLES-----------------*/
$enable_NA_format = true; $email_address_to = "your email address here"; $subject = "Contact Form submission from www.YourDomain.com"; /*----------------------END CUSTOM VARIABLES------------------------*/
The Contact form has been programmed and tested to work even if JavaScript is turned off.
This theme has been implemented as a fixed width layout with the 960 Grid System. The full width of the template is 960px and starts with the #page div; however the visible part is 940px with 10px left and right margins. There are some background elements that span outside the #page id. For more information as to how the 960 Grid works, visit the 960 Grid System website.
All CSS files are located in the styles/ subdirectory.
The directory common-css/ and common-images/ stores all the css that is NOT specific to any one style, but applies to all. Most of the 960 Grid System css files are in that directory.
All the style1, style2/, style3/, ..., style7/ contain the specific css and images to the corresponding theme layout (color scheme).
Typography styles usage and examples refer to the typography.html page included with the template.
PNG transparency fix for IE6: if you would like to enable png transparency for IE6 for a specific image, you just have to add a class "pngfix" to that image, e.g. <div class="pngfix" .... By default I've applied the pngfix class to all "img" elements, so you don't have to do it for a regular <img ... /> tag, you might just have to do it if you had an image as a background to a div for example.
In the PSD_files.zip I've included seven subdirectories containing all the PSDs necessary to produce the corresponding seven theme styles and a slider_psd folder containing the PSD to generate 5 slider images.
All PSD files except the slider_x.psd contain slices of the required images. In Photoshop you just have to go File --> Save for Web & Devices... select the slices you'd like to generate (Shift+click to select multiple slices), hit "Save", at the next "Save Optimized As" dialog box under Slices dropdown select "Selected Slices" and "Save".
If you'd like to change the slider images in the header, open "slider_x.psd" in the slider_psd folder, make the necessary adjustments, and then save the file as "slider_x.jpg" or "slider_x.png", put the corresponding slide number instead of the "x", e.g. "slider_1.jpg".
To have an image open with prettyPhoto anywhere in your content, just insert rel="prettyPhoto"
in the link, e.g.:
<a href="large_image_url" rel="prettyPhoto" title=""> <img src="thumbnail_url" width="60" height="60" alt="" /></a>It is the same for video, just use the video url instead of the large image url:
<a href="your_video_url_goes_here" rel="prettyPhoto" title=""> <img src="thumbnail_url" width="60" height="60" alt="" /></a>To group multiple images into a gallery add the suffix
[galleryName]
to rel="prettyPhoto"
so that it looks like this rel="prettyPhoto[galleryName]"
. Keep the gallery name the same for all the images you'd like grouped:
First image: <a href="large_image1_url" rel="prettyPhoto[portfolio]" title=""> <img src="thumbnail1_url" width="60" height="60" alt="" /></a> Second image: <a href="large_image2_url" rel="prettyPhoto[portfolio]" title=""> <img src="thumbnail2_url" width="60" height="60" alt="" /></a>
To modify the preview size just add the suffix "?width=480&height=200
" to the end of the movei url. The width and height might be different in your case.
For more examples and various formats supported visit the prettyPhoto demo page
I've used the following images, icons or other files as listed.
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.
Andon