JA Toolbar/How-to

From JoomlArt Wiki

Revision as of 15:49, 29 December 2009 by Jadocs (Talk | contribs)
Jump to: navigation, search

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

Contents

This page is under construction.. Please get back later.
In this chapter you are going to learn how to:

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

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

Your_site_root/plugins/system/plg_jatoolbar/assets/themes



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.
image:Themes-folder.jpg

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 effect on toolbar items.

The theme file structure

The CSS files


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.

The images folders

  • 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

This section is under construction..

Customizing the look and feel

This section is under construction..

Customizing the Language

This section is under construction..

Categories: Overview | Installation | How-to | Admin tour
Personal tools