Created: 07/11/2010
By: olegnax
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!
This theme is a fixed layout with two columns. We have a header with a tag of <header> that contains a clickable logo and search form. Menu section wrapped with tag
Main menu structure
You need use class="sf-menu" and id="navigation" for your menu list to support Superfish jCycle plugin. You menu can be multilevel dropdown. Each submenu you need to insert at parent LI container.
Below you can see sample code for menu with one sub menu list:
jCycle slideshow setup
You need use id="s4" and class="slider" for slideshow wrapper div. Template have a two background for slides, it can be switch by class for each slide - class="slide", class="slide2"
Below a sample structure for jCycle slideshow:
Setup contact form
You need to edit contacts.html , search for next line:
<input class="" type="hidden" name="to" value="mail@mail.mail" />
and change mail@mail.mail to you address.
Also you need PHP support on your hosting for this contact form.
Insert Google Map sharing code.
Visit the http://maps.google.com/ , find your place and use share link at right top corner of map frame
Copy and paste code from "Paste HTML to embed in website" field to your contacts.html , search for next line:
<iframe width="390" height="350" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&q=New+York&sll=37.0625,-95.677068&sspn=43.393645,107.138672&ie=UTF8&cd=1&geocode=FR1AbQIdK8KW-w&split=0&hq=&hnear=New+York&z=11&ll=40.714269,-74.005973&output=embed"></iframe>
Using lightbox plugin
You just need add to each link attribute rel="prettyPhoto". Template contain two types of image rollover for gallery lightbox. To use video rollover image you need add class="video" to A tag. More information you can find on prettyPhoto homepage
All HTML files well commented, so you can find what part of code you need to edit without any problem
This theme using 52Framework.
List of CSS files with short description:
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.
Change font
You can change font properties at top of style.css
/* Global properties ======================================================== */
body {
background:#f7f7f7 url(../images/all_bg.gif) repeat-y 50% 0%;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:22px;
}
And global color for text at top of color.css
body { color:#454545; }
Change link color
You can change link color at top of the color.css
a {color:#458cd3;}
All CSS files well commented, so you can find what part of code you need to edit without any problem
This theme imports 10 Javascript files.
Please see some help info below regarding scripts listed above:
jCycle slideshow
If you want to change effect of the slider you can follow this link and choose an effect that you like http://malsup.com/jquery/cycle/browser.html
After that open js/script.js and change fx values of codes:
fx: 'scrollHorz',
speed: 1000,
timeout: 5000,
next: '#next2',
prev: '#prev2'
Use your own fonts
If you want to use your own font for the headings you need
generate a js file using the Cufonts font generator; http://cufon.shoqolate.com/generate/.
After generated your fonts for Cufon, just add a line into header area to call your file.
Disabling Cufon
If you would like to disable Cufon you need to remove cufon-replace.js
This template was drawn at Adobe Fireworks. You can find native layered PNG files and layered PSD files at folder "sources".
All graphic sources separated by color skins. Each color skin contain 10 layered PNG and PSD files.
You can simply edit well organized layered PNG/PSD files to modify your template.
Some Photoshop basics
Scale (size change)
To change size of the buttons, price boxes, etc. Select layer that you want to change, then press ctrl+t and holding left mouse button pressed drag the transformation handles. To change the whole button or pricing plan sizes choose folders. You can change size to all of the buttons and pland at a time if you link them together.
Text change
You can click on top of the text with the Type tool (T). You know your cursor is in the right place when the Type tool's cursor changes to an "I-beam." However, if you click in the wrong place, Photoshop will create a new type layer; in this case, press the Escape key to cancel the new layer. You can change text parameters such as size, kerning etc. in "Character" window, Main menu: Window / Character.
Shape change
Shape is a fill layer linked to a vector mask. You can easily change the fill to a different color, a gradient, or a pattern by editing the shape's fill layer. You can also edit the shape's vector mask to modify the shape outline, and apply a style to the layer.
Visible invisible layers
To hide/unhide layer click on eye icon left to layer name in layers window. To open layers window go main menu at the top of interface Window/Layers.
Add
/ hide effect
Below the layer name can be effects. If there is arrow right to the layer name that means that this layer has effects. Click on arrow to show/hide effects list.
To hide or show effects on layers click on eye icon left to effect name in layers window.
Link layers
Linking allow you move and change size of all linked layer at a time. Some layers are linked together. To break link choose layer and then press on chain icon between the eye icon and layer name. Do this to all the layers you want to link or unlink.
Duplicate layer
Go to your "Layers" palette, and click on the layer that you want to duplicate.
Go to "Layer" and select duplicate layer. In the pop-up window that opens, give the new layer a name. If the layer you are copying is called "My Layer," call the duplicate something that will make it easily identifiable, such as "My Layer Copy." Click "OK."
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.
olegnax