Log in
Style 20 Style 19 Style 18 Style 17 Style 16 Style 15 Style 14 Style 13 Style 12 Style 11 Style 10 Style 9 Style 8 Style 7 Style 6 Style 5 Style 4 Style 3 Style 2 Style 1
 
Home Tutorials Customization

Versatility III Key Features

This month's RocketTheme design is packed full of goodies, here's some key features: Read more...

20 Color Variations!

screenshotVersatility III takes it to the next level with an amazing 20 color variations built-in. To see them for yourself, just click on the "Open Control Panel" tab at the top of the page and select a style.

Continue reading to learn about the other great features Versatility III has under the hood.

Read more...
Versatility III Customization
icon

Basic Customization

customisation

Default Color Style

With 20 exciting color styles, it can be difficult to choose just one. But you will want to choose the one that will show by default to users when they visit your site for the first time.

Template Width

Sometimes, one size just doesn't fit all; and Versatility III is designed to allow you to display the template in any default width you desire. All you have to do is enter the width size that is perfect for your needs.

Side Column Width

Along with the template width, you can also easily customize the width of the side column (either right or left depending on the orientation).

Menu Side

Versatility III features the ability to display the Splitmenu items in either a left or right hand configuration when Splitmenu is the active menu system.

Default Font Size

Based on your own personal preference, or the preference of your users.

Show Pathway

Sometimes sites just look better with no pathway, and we've provided a convenient toggle to allow you to disable this for your site

Show Pull-Down Panel

The pull-down panel is a great way to put content or modules that you want to have around, but don't want them to clutter up your site.

icon

Customizing the Logo

One of the first steps of customizing your new Versatility III template will undoubtedly be altering the logo text to reflect the name of your company / organization. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as logo blanks.

The most effective way to customize the logo is to use the included Source PNG file. When opened in Adobe Fireworks, this file contains all of the Layers in the design allowing you to tweak and change any of the image elements of the template design. The following steps will help you quickly get your new logo ready to go:

  • First, open the Source PNG file in Adobe Fireworks. With the pointer tool, double click on the logo area in the top left of the layout. This will cause a cursor to appear, in which you can highlight the existing text and replace with your own. (The slices may be on by default, obscuring the logo area so that you can not select it. You can hide the web layer slices for now by clicking the "eye" icon to the left of "Web Layers" in the right hand "Layers" panel).
  • In Versatility III, the logo text consists of two text elements, the top main logo text and the bottom reflection text. First, you will want select the top text with the Pointer Tool, double click the text area so that a cursor appears. Highlight the "Versatility III" text and replace with your desired logo text.

    Logo editing

    Logo editing

    Next, use the Pointer Tool to select the bottom reflection text layer, double click the text area so that a cursor appears. Highlight the "Versatility III" text and replace with the same text you used in the logo text above it.

    Logo editing

    Logo editing

  • Once you have replaced the text in the logo area and are happy with the result, it is time to export the slice and replace the existing logo image in the template with your new one. Turn your Web Layer slices back on (click the empty box to the left of "Web Layers" in the right hand "Layers" panel causing an eye icon to appear), this will cause all of the slices to become visible (represented by green coloured squares).
  • With the pointer, click on the slice on top of the logo area so that it is selected (a crosshair will appear in the center and the name "logo: PNG" will appear when selected). Right click on the slice and select the menu option "Export Selected Slice" and save into your rt_versatilityiii/images/style# folder replacing the existing "logo.png" with your new "logo.png".

    Logo editing
If you don't have Adobe Fireworks, you can easily change the logo by using one of the included Logo Blanks and putting your custom text and logo on top of the image and saving as "logo.png". There are Logo Blanks for each color style included in the Source PNG .zip archive that contain the background imagery of the logo area, without any text or logo elements.
 

IE PNGFix Built In

Due to popular demand and as a good way to showcase Versatility III we've included a popular alpha-transparency fix for IE5.5 and above. This script is only included if your browser needs it and will automatically 'fix' any <img> tags on your page. Be sure to include width and height attributes for proper functionality.

Status Center

We have 1 guest online
rss Section 508 css valid xhtml valid