Created: 10th February 2010
By: Mondre Contact : http://themeforest.net/user/imaginem
Studiobox Wordpress Premium Theme By: Mondre blog.yoursite.com
Themeforest Portfolio: http://yoursite.com


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 at http://yoursite.com

Thank you!

 

1. About the StudioBox Wordpress theme

This theme is a fixed layout with two columns, except the mainpage and portfolio page which uses the whole page to display contents.

1. The header is within “header” div
2. Menu is within smoothmenu1div
3. All of the information within the main content area is nested within a div with an id of "contents".
4. The sidebar's (column #2) content is within a div with an id of "sidebar".
5. Footer is within “footer” div

 

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

#contents { color: #someColor; }

 

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E. #contents .posttitle { color: #someColor; }

 

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

 

2. Fonts, icons and plug-ins in use

Font in use for LOGO (FREE) FONTIN
Fontin

Titillium font used for Cufon
http://www.fontsquirrel.com/fonts/TitilliumText14L

jQuery Loopslider for Featured slides (included)
http://nathansearles.com/loopedslider/

Galleria (included)
http://monc.se/kitchen

Accordion Slider (included)
http://www.dynamicdrive.com/dynamicindex17/haccordion.htm

ColorBox (included)
http://colorpowered.com/colorbox/

 

3. Cufon Fonts

Cufon font replacements is called in the header.php
The Font configurations are in a JS file with font classes to replace. You'll find the file in the JS directory fontconfig.js
Make changes to it as you prefer. Its straightforward with the class or ID style that need to be replaced with the cufon font.

---

General Setup

4. Customize Logo

Method 1: The Logo can be customized by entering your Logo image path to the theme options found in Wordpress Admin.

Method 2: The Logo image is in the 'images' folder. Other than the default logo, the skin logo images can be found in the images/skins/<skin name> folder. If you rename it you should make the change in the header.php

 

---

5. Setup Core Categories

Setup Portfolio, Gallery and Blog Categories

Login to Wordpress ADMIN panel

The categories can be most easily made while publishing a ADD NEW Post. You’ll find the Category section on the right hand side of the ADD NEW post page.

1. Portfolio
2. Gallery
3. Blog

Once the categories are created you can link them to the theme through Theme options.

Login to your WP-admin and

Goto StudioBox Options and click of Categories and Page IDs tab

 

If you require more information do contact me.

 

 

---

6. Top Navigation Menu

Setup Featured Category

Login to Wordpress ADMIN panel

Login to your WP-admin and

Goto StudioBox Options and click 'Top Menu Navigation' tab

 

7. Setting up Menu arrows

If arrows don't appear where subcategories exist then

a. Edit ddsmoothmenu.js in the JS Directory
b. Line 19
c. Specify the URL to the arrows in the images directory. (right.gif / down.gif)
d. What you have to change there most likely would be the theme name if it has changed.

 

//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'images/down.gif', 23], right:['rightarrowclass', 'images/right.gif']},

 

---

8. Setup cache folder

Timthumb (For Dynamic resizing of images)

http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

 

Some important things to note:

1. TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed.
2. Make sure the folder in the themes root called "cache" is set to either 775 or 777

 

---

Setting up Main Page

9. Post Options Explained

The theme uses the custom fields to display the images in the Post Head, Portfolio gallery, Featured images and embed codes.

 

 

1. HIGHLIGHT TEXT

   1. Enter Text to Appear under the Post Title.
   2. This text is also used for the Portfolio most recent image description.

 

2. IMAGE URL

   1. Paste the FILE URL ( image path )
      eg:
      ABSOLUTE URL
      http://www.yourdomain.com/wp-content/upload/image.jpg
      
      If you encounter any ERRORS supply with a RELATIVE URL
      eg:
      RELATIVE URL
      /wp-content/upload/image.jpg

 

3. Video link for Lightbox.

   (Here are the structures for the link)
   1. Youtube eg: https://www.youtube.com/v/4xkXRer6rYw
   2. Vimeo eg: http://vimeo.com/moogaloop.swf?clip_id=9842293
   3. Flash eg: http://www.domain.com/folder/flashfile.swf

 

4. Video/Media embed Code.

   1. Embed code for videos to appear on Post details head.

 

5. Post Style ( Gives Fullwidth Images or Video, Big or Mini Gallery )

   1. Default ( Displays Post image )
   2. Big Image ( Displays Post image * fullwidth )
   3. Mini Gallery ( Pulls image attatchments from Post with titles )
   4. Big Gallery ( Pulls image attatchments from Post with titles * fullwidth )
   5. Video Embed ( Displays Post video using embed link )
   6. Big Video Embed ( Displays Post video using embed link * fullwidth )

 

---

10. Creating Featured Posts

(Wordpress ADMIN panel)

1. Goto WP ADMIN > POST > ADD NEW
2. Fill the TITLE and CONTENTS
3. Upload your IMAGE
4. Copy the url in the FILE URL bar.
5. Paste it in the Image URL field in the StudioBox post options in the Post page
6. Tick the Featured Category.
7. PUBLISH!

---

11. Displaying the Featured Slides

Setup Featured Category

Login to your WP-admin and

Goto StudioBox Options and click 'Featured Categories' tab

 

---

12. MAIN PAGE Image Boxes and Column Texts

Image Boxes

Login to Wordpress ADMIN panel

Goto StudioBox Options and click 'Mainpage Setup' tab

There are three input for each image block. Marked in groups of A , B and C

1. Block Category Select a Catgory to represent it
2. Block Category image Input a path for photo. Dimensions 300px × 138px
3. Block Optional Title Overrides Category titles and uses the optional Title

---

Column Texts

Goto StudioBox Options and click 'Mainpage Setup' tab

There are three input for each text block. D , E and F

1. Enter Page ID to populate texts from

 

---

Image, Slideshow and Video Posts

 

13. Creating a Blog/Image Post

(Wordpress ADMIN panel)

1. Goto WP ADMIN > POST > ADD NEW
2. Fill the TITLE and CONTENTS
3. Upload your IMAGE
4. Copy the url in the FILE URL bar.
5. Paste it in the Image URL field in the StudioBox post options in the Post page
6. Select Default or Big Image from the Post Style.
7. Tick Category. ( make sure the category is a subcategory of BLOG category )
8. PUBLISH!

 

14. Creating Post Slideshow Gallery

(Wordpress ADMIN panel)

1. Goto WP ADMIN > POST > ADD NEW
2. Fill the TITLE (important for Gallery setup) and CONTENTS
3. Upload your IMAGES
4. Press save all
5. Once the Gallery Appears you setup the order of how it'll appear. Fill the title text for the Images in the Gallery.
6. No need to Insert the Gallery to the Post
7. Select Mini Gallery or Big Gallery from the Post Style.
8. Tick a Post Category.
9. PUBLISH!

Figure 4

 

15. Creating a Video Post

(Wordpress ADMIN panel)

1. Goto WP ADMIN > POST > ADD NEW
2. Fill the TITLE and CONTENTS
3. Get the Video Embed code for your media. ( From Youtube , Vimeo , etc )
4. Paste the code to the Video Embed Input field
5. Select Video Embed or Big Video Embed from the Post Style.
6. Tick Category.
7. PUBLISH!

 

---

Populating Portfolio

16. Creating Portfolio gallery

(Wordpress ADMIN panel)

1. Goto WP ADMIN > POST > ADD NEW
2. Fill the TITLE and CONTENTS
3. Upload your IMAGE
4. Copy the url in the FILE URL bar.
5. Paste it in the Image URL field in the Studiobox post options in the Post page ( Refer Figure 3 )
6. Tick Category. ( make sure the category is a subcategory of PORTFOLIO category )
7. PUBLISH!

 

---

Populating Gallery

17. Creating a Gallery slideshow

(Wordpress ADMIN panel)

1. Goto WP ADMIN > POST > ADD NEW
2. Fill the TITLE and CONTENTS
3. Upload your IMAGE
4. Copy the url in the FILE URL bar.
5. Paste it in the Image URL field in the Studiobox post options in the Post page ( Refer Figure 3 )
6. Tick Category. ( make sure the category is a subcategory of PORTFOLIO category )
7. PUBLISH!

 

---

Contact Page

18. Contact Page Template

(Wordpress ADMIN panel)

1. Goto WP ADMIN > PAGE > ADD NEW
2. Fill the TITLE and CONTENTS
3. Select Contact Form from Template list
4. Make sure you've entered your email address in the Theme options 'Studiobox General Settings'
5. PUBLISH!

 

---

AD Boxes

19. Placing Advertisements

1. Goto WP ADMIN > Appearance > Studiobox Options
2. Fill Ad Box 1 , Ad Box 2 , Ad Box 3 and Ad box 4 (Refer Figure 5)
3. Each Ad Box carries to inputs. One for the image path and second for the target link.
   eg.
   Upload Advertisement image to your image directory and place this path to the image as the image path.
   The target link path is where you want the visitor to go once the AD is clicked.
4. Create a Page titled as Advertisement Contact ( anything in reference to ADS - This page will be linked to AD-Blocks once the SLOT is left blank. To make it blank simply remove any image links you've entered to the AD Block.
5. To display an Advertise here adbox, just enter a # as the Adbox target link. (as long as image path is left blank along with some text in the ad link it'll show the Advertise here request image)
6. If both image path and ad link path is left blank, the ad box won't appear.

Figure 5

 

---

Footer

20. Footer Link List

1. Ceate a Link List
2. Add the Link List as a Widget to Footer 1 and 2
   
3. If both image path and ad link path is left blank, the ad box won't appear.

 

21. Footer About Column

1. If empty then About text is displayed
2. You can add an image from Theme Options Footer Setting
   

 

22. Footer Portfolio / Flickr Column

1. From Theme Options Footer setting you can select which category to display the images from
2. You can also use Flickr-RSS plugin to fetch Flickr photos to the column.
   

 

23. Footer - Adding Flickr images

1. Download the Flickr RSS Wordpress plugin
   http://eightface.com/wordpress/flickrrss/
2. Activate the Plugin
3. Add the Widget to the 4th Footer Column
4. To setup groups and photos simply follow the plugin instructions.
5. Before List:

   <div class="flickr-box"> 

6. After List:

   </div> 

 

 

24. Recommended Plug-ins to Download

1. Pagenavi Plugin
   http://wordpress.org/extend/plugins/wp-pagenavi/
   
   

 

25. Javascript

This theme imports Javascript files used by JQuery to create the Flow Slides and the Popups of larger pictures when clicked.

jQuery, JQuery ColorBox, JQuery Dropdown

jQuery is a Javascript library that greatly reduces the amount of code that you must write.

 

26. PSD Files

I've included are layered PSD's with this theme:
1) You'll find 1 PSD file in the themes PSD folder. The PSD file is layered and those that need slicing will have guidelines.

 

 

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. 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 or send a direct email to me via my profile.

 

---