“BestMedia” Documentation by “olegnax” v1.0

“BestMedia”

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!

Package structure
HTML Structure
CSS Files and Structure
JavaScript
PSD Files
Sources and Credits

A) Package structure - top

best_media - html template files.
- blue - html files for blue skin
- green - html files for blue skin
- orange - html files for blue skin
documentation - documentation files for current package.
sources - all design layered sources
- PNG - layered .PNG files from Adobe Fireworks
- PSD - layered .PSD files from Adobe Photoshop

B) HTML Structure - top

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

and contain list of items which can contain sub lists. All of the information within the main content area is nested within a tag <section> with an id of "content". The footer content is within a tag <footer>. The general template structure is very similar throughout the template, you can find other examples (different from the "index.html") in "blog.html" with sidebar. Here is the general structure.

HTML Structure

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

C) CSS Files and Structure - top

This theme using 52Framework.

List of CSS files with short description:

color.css - containing all styling information for skin color.
grid.css - grid system from 52framework.
prettyPhoto.css - containing all styling information for lightbox clone "prettyPhoto".
reset.css - reset styling for all html elements.
style.css - main CSS file containing page elements.
superfish.css - containing styling information for main navigation jQuery plugin

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

D) JavaScript - top

This theme imports 10 Javascript files.

jQuery
Cufon
Hover Images
HTML5
jCycle
jQuery Easing
prettyPhoto
jQuery validation
Sprites
Superfish

Please see some help info below regarding scripts listed above:

jQuery is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com/.
Cufon replaces some text in the template for graphics. link
This is a hover fancy images jQuery plugin. This simple plugin allows fade in/out hover on image gallery.
It's added HTML5 tags support to old browsers.
Image slider jQuery plugin. Documentation and examples can be found at the jCycle Homepage.
This is animation library for jQuery.
This is a jQuery lightbox clone. It is very easy to setup, yet very flexible if you want to customize it a bit.
This jQuery plugin makes simple client side form validation trivial, while offering lots of option for customization.
This is for ease work with sprite images.
Enjoy simple dropdown menus with superfish.
If you want to know how to use it better, see that link

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

E) PSD Files - top

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.

To change the color of a shape, double-click the shape layer's thumbnail in the Layers palette, and choose a different color using the color picker.
To modify the outline of a shape, click the shape layer's vector mask thumbnail in the Layers palette or Paths palette. Then change the shape using the shape and pen tools (Direct Selection tool A).
To move a shape without changing its size or proportions, hold down the spacebar while you drag the shape.

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."

F) Sources and Credits - top

52Framework - HTML5 and CSS3 framework that supports all browsers used today.
prettyPhoto - jQuery based lightbox clone.
jQuery Cycle - slideshow plugin that supports many different types of transition effects.
Cufon - font replacement.
Droid Sans - used font with Cufon.
Superfish - jQuery menu plugin
HoverIntent - by Brian Cherne
jQuery Validation - jQuery plugin makes simple client side form validation trivial, while offering lots of option for customization.

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

Go To Table of Contents