Last time was a custom image, this time I wanted to add a button to allow the user to navigate to another view of the component. Joomla! toolbar buttons expect that the buttons on the toolbar are all related to the set of data in the “adminForm” showed below it, in my case I just wanted to allow the user to navigate to a “dashboard” style view of the component. A bit of digging through the Joomla! libraries and I realised that no such thing existed via the JToolbarHelper class.
Digging a little deeper I noticed a “back” button existed - not quite what I wanted but it gave me the code I needed.

/**
* Writes a cancel button that will go back to the previous page without doing
* any other operation
* @since 1.0
*/
function back($alt = 'Back', $href = 'javascript:history.back();')
{
$bar = & JToolBar::getInstance('toolbar');
// Add a back button
$bar->appendButton( 'Link', 'back', $alt, $href );
}

I then set about adding the following new method to my TOOLBAR_component class

function buttonLink($name, $alt, $href)
{
$bar = & JToolBar::getInstance('toolbar');
// Add a button
$bar->appendButton( 'Link', $name, $alt, $href );
}

In the above code, $name is used to construct the class name of the toolbar button, $alt as you would expect is the alt attribute of the button, and $href the link to the page.

Now in my toolbar methods in the TOOLBAR_component class I just need to use self::buttonLink() to add a new button with a normal <a href="">

self::buttonLink('dashboard', 'Dashboard', 'index.php?option='.$option);

Whilst creating a new Joomla! component, not yet released, I found the need to add a custom button to the toolbar. A quick search through the books suggested the use of JToolBarHelper::custom(), but it didn’t go into details about where the icon should be located. On further searching in Google I found the following site

Temporaneità

This helped, but it wasn’t exactly what I was looking for, I don’t want someone to change the admin theme and all of a suddon loose the toolbar buttons…

So I looked deeper, remembering that you can add additional styles to the document, I decided to add a custom “toolbar” css file to my component and add it to the document every time that toolbar was used. The final changes to the files are shown below.

In the file toolbar.component.html.php added this inside of my _DEFAULT method

$document =& JFactory::getDocument();
$document->addStyleSheet('/administrator/components/com_component/css/admin.toolbar.css');
//JToolBarHelper::custom('task','normal image', 'rollover image', 'Button label');
JToolBarHelper::custom('sale','sale', 'sale', 'Sale');

I then created my new icon and added it the folder
/administrator/components/com_component/images/toolbar/. Following the format of the other toolbar icons, icon-32-{custom part}.png I named it icon-32-sale.png.

Create a new file /administrator/components/com_component/css/admin.toolbar.css

.icon-32-sale {
background-image:url(../images/toolbar/icon-32-sale.png);
}

Now I have a component with custom buttons that will work as expected regardless of the template the user has chosen.

I’ll update this later with more info about what I was actually trying to do, but for now, here is the bare facts

The initial problem was getting all browsers to support a transparent background image. Perfectly normal for “modern” browsers, but not so easy for our old “friend” Internet Explorer 6. Final solution I selected was to use a default style and then override it in IE6 and below with conditional comments.

In the head of the document

<style type="text/css">
.overview { background-image: url(./images/bg_overview.png); }
</style>
<!--[if lt IE 7.]>
<style type=”text/css”>
.overview {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’./images/bg_overview.png’);
}
</style>
<![endif]–>

Nice and easy, no stress, this works for IE browsers, as well as FireFox 1.5/2/3

But… I noticed in Safari that the background was now not showing..

A quick Google for “safari background-image” turned up thousands of results, but mostly irrelevant to my particular case. A chat with a couple of developers also turned up nothing, they’d never heard of this problem. Then, thanks to Carlos, he found the solution, this is apparently a known Safari bug and solvable by setting the background image in the style attribute of the element.

That would be great, except for the problem that I need a different style for IE <7

A quick bit of messing with the code and I found a solution involving javascript, a pure CSS solution would have been better, but until now I’ve not been able to find one. The final code I settled on is shown below.

<div class="overview" id="overview_1" style="background-image: url(./images/bg_overview.png);">
<!--[if lt IE 7.]>
<script type=”text/javascript”>
var ieFilter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’./images/bg_overview.png’)”;
document.getElementById(”overview_1″).style.backgroundImage = ‘none’;
document.getElementById(”overview_1″).style.filter = ieFilter;
</script>
<![endif]–>

This post was partly written to try and encourage me to start blogging again, partly because this is a problem I’m sure I’ll find time and time again. Saving it here will hopefully save me hours of time in the future trying to remember which site had a similar problem, and where the file is! But mostly to put something back into the community, theres been countless other blogs and sites where I’ve learnt about CSS bugs, and solutions, this is my turn to repay that kindness everyone else has shown.