CODEWITHSUNDEEP
joomla
drew
drew

Reputation: 123

Joomla 3.1 - JToolbarHelper: image of custom button not displayed/shown

I am developing a component for Joomla 3.1 and I am having some hard time in adding an image to the JToolbarHelper::custom() button....Based on this tutorial, I am using the following code:

JToolBarHelper::custom( '', '../administrator/components/com_hmi/assets/css/icon-32-window.png', 
                    '../administrator/components/com_hmi/assets/css/icon-32-window.png', 'Window', true);

However the button and its text are displayed but not the button icon/image....Can someone help figure out whats wrong. I have tried some other solution but got the same result :/

Upvotes: 1

Views: 3598

Answers (1)

Riccardo Zorn
Riccardo Zorn

Reputation: 5615

Use the className and inject the css. i.e. from my component Little Helper (see the "ccfs" class)

Function definition:

custom($task = '', $icon = '', $iconOver = '',...

My code:

JToolBarHelper::custom( 'trash_n_cache.cleanfscache','ccfs' ,'ccfs',...

Renders this markup on Joomla 2.5:

<a class="toolbar" onclick="Joomla.submitbutton('trash_n_cache.cleanfscache')" href="#">
  <span class="icon-32-ccfs"></span>
  Clean cache
</a>

and this markup on Joomla 3.x:

<button class="btn btn-small" onclick="Joomla.submitbutton('trash_n_cache.cleanfscache')" href="#">
<i class="icon-ccfs "></i>
Clean cache
</button>

And I style it with: (please note that the icon in J2.5 is 32*32, in Joomla 3.x it's 16*16)

.icon-16-ccfs, i.icon-ccfs {
    background-image:
        url(../images/cachefs16.png)
}

.icon-32-ccfs {
    background-image:
        url(../images/cachefs32.png)
}

Which you can either inject:

$document = JFactory::getDocument();
$document->addStyleDeclaration($cssRules)

or link as a resource in an external css:

$document = JFactory::getDocument();
$document->addStyleSheet("components/com_littlehelper/assets/css/littlehelper.css");

Upvotes: 7

Related Questions