From JoomlArt Wiki

Current revision as of 10:30, 1 April 2010

{{#customtitle:How to customize JA Toolbar|How to customize JA Toolbar}}

Welcome to JA Toolbar Customization Documentation!
In this chapter you are going to learn how to:

• create themes;
• customize themes;
• customize the logo and look and feel;
• customize the language.
  

Creating a new template

In most cases you will create your own themes that you can easily customize and manage to showcase your best content in your websites. Using the default themes you can easily create custom themes to suit your design strategy.

Themes Location

Before you can create several themes for your toolbars, first you have to find the Themes folder located in

Creating a new folder

By default, JA Toolbar comes with two themes: Default and Classic. In the themes folder you can create a new folder for your new template, and this folder name must contain no spaces.
Example: my-theme.

Copy the theme files

In your newly created folder, you will copy the files from the classic or default theme, depending on your design needs. The Classic theme is very simple, it uses simple styling and can be easily customized, and the Default theme uses transparent .png images to shape the child content containers and add more styling for toolbar items.

The theme file structure

By default, JA Toolbar themes come with 8 CSS files. Let us have a look at each one of them:

• style.css - manages the general stylesheets, for toolbar, child content containers and items, and this file will be most used for design customizations;
• bottom.css - manages the style for your toolbar when you wish to display it at the bottom of your website;
• top.css - overrides the bottom.css style and allows you to display the toolbar at the top of your website;
• rtl-bottom.css & rtl-top.css - these two files override both bottom.css and top.css to make the toolbar RTL Ready;
• rtl.css - manages common styling for both bottom-rtl.css and top-rtl.css styles;
• ie7-rtl.css - makes the toolbar compatible with Microsoft Internet Explorer 7 browser when using a RTL toolbar;
• custom.css - you can use this file to override or add any additional styling you might need.
  
  

• images folder holds all images used by the theme:
  • tags - holds Hot, New and other graphics you can add to your toolbar items to highlight the most important content;
  • bottom - holds the graphics used by the toolbar when it is displayed at the bottom of the page;
  • top - holds the graphics used by the toolbar when it is displayed at the top of the page;
  • other images - favicon, logo, thumb container, backgrounds, arrows and gradients used by the toolbar.

Customizing the Toolbar Logo

For instance you are using the default theme files to create your own custom theme, changing the logo of the toolbar is very simple. You can just overwrite the favicon.ico image file located in

with the favicon.ico you are using for your website within your Joomla! template.
In other cases, you might want to use a custom image, so first to upload your image in the images folder of your theme, and you may need to change around line 31 in file style.css

   background: url(images/my-image.png) no-repeat top;

   display:block;

   width: --px; You must specify the width of your image in pixels here..

   height: --px; You must specify the height of your image in pixels here..

   position: absolute;

   bottom: --px; You must specify the distance in pixels of your image to the bottom margin of the toolbar here..

   left: --px; You must specify the distance in pixels of your image to the left margin of the toolbar here..

Please note that this image must not be higher than 30px, and don't forget to style your RTL styling also.

Customizing the look and feel

Customizing graphics

To style the toolbar to meet your design needs, you can easily change the graphics used by the template:

• arrows used by the elements of the toolbar: arrow.png, arrow-ltr.png;
• backgrounds:
  • grad1.png is used by default theme for the toolbar styling,
  • grad2.png is used for child items on mouse hover,
  • grad3.png is used by the classic theme for the toolbar styling,
  • childcontent-bg.png & childcontent-bg-m.png are used to fill the child content container,
  • tip-thumb.png is used for pop-up thumbnails that you can set for toolbar items,
  • toolbar-c-bg.png is used for the toolbar when minimized;
• buttons: btn-toggle.png is used for minimize/maximize feature of the toolbar;
• bullets: bullet.gif & bullet2.gif to match both white and gray backgrounds;
• both bottom and top hold arrows and background you can easily change.

Customizing stylesheets

Sometimes changing the images is not enough and you have to adjust also the CSS files to customize:

• color of the toolbar items text;
• font of the toolbar items text;
• toolbar and/or logo size.
  

You can use the built in editor to customize the styling of the newly created theme, so please proceed with the following steps:




If you need help customizing the JA Toolbar, please feel free to ask in the JA Toolbar Forum.

Customizing the Language

To customize JA Toolbar backend language, you should have your language package installed for the Joomla! CMS. For instance you need to add Vietnamese language for the JA Toolbar component. If you have Vietnamese Language Pack for Joomla! 1.5 installed on your system, the component will automatically generate a vi-VN.com_jatoolbar.ini file based on the en-GB.com_jatoolbar.ini language file.
To customize the vi-VN.com_jatoolbar.ini language, please proceed with the following steps:

If you have any question regarding the customizing of JA Toolbar, please feel free to ask in the JA Toolbar Forum.