< JToolBarHelper


The JToolBarHelper::title(); method adds a title to an administrative component page.

Use in the view.html.php


This will make the page title "title" and add a class to the toolbar title based upon the second parameter. The css class will be prefixed with "icon-48-". In the example above the class would be: icon-48-sample.

The HTML generated will look like this:

<div class="pagetitle icon-48-sample">

If you include a space in the in the second parameter then more than one class will be assigned. For example:

JToolBarHelper::title('title','sample another'):

Would create the following html:

<div class="pagetitle icon-48-sample icon-48-another">

Use to Implement Custom Icon:

As the class name implies, the icon is intended to be 48x48. The css that the admin template uses places the h2 to the right far enough to accommodate this.

  1. First create a 48x48 png with a transparent background.
  2. Place it in the component's media/images/ folder. For example: media/my_component/images/sample-48.png
  3. Create a class in your stylesheet that sets a background image to your image location (in the example below the stylesheet is in media/com_mycomponent/css/admin.stylesheet.css)
  4. Add the JToolBarHelper::title() function to your view.

Example file locations:

  • /administrator/components/com_mycomponent/views/sample/view.html.php
  • /media/com_mycomponent/css/admin.stylesheet.css
  • /media/com_mycomponent/images/sample-48.png

Sample Stylesheet:

.icon-48-sample {
  background: url('../images/sample-48.png') 0 0 no-repeat;

Sample View Display Method:

  public function display()
    JHtml::stylesheet('com_mycomponent/admin.stylesheet.css', array(), true, false, false);