J1.5

How to create a custom button: Difference between revisions

From Joomla! Documentation

← Older editNewer edit →
mNo edit summary
Mole84 (talk | contribs)
15 edits
added instructions for how to create a system for a coustom admin toolbar icon
Line 21: Line 21:


==Custom button==
==Custom button==
* The syntax for a custom button that can be added into a view
<source lang="php">
<source lang="php">
JToolBarHelper::custom( 'task', 'icon', 'icon over', 'alt', boolean, boolean );
JToolBarHelper::custom( 'task', 'icon', 'icon over', 'alt', boolean, boolean );
</source>
* The Default Admin Toolbar Icons are stored at:
<source lang="bash">
www/administrator/templates/khepri/images
</source>
* From here you will notice that the icons are linked to display through the CSS file at:
<source lang="bash">
www/administrator/templates/khepri/css/icon.css
</source>
* This icon CSS file is automatically included through the admin template. If we would like to add a custom toolbar icon into an installable component it is useful to follow the same structure. We will have to manually include our new CSS file.
* An example of the icon CSS statement:
<source lang="css">
.icon-32-iconname {
background-image: url(../../images/icon-32-iconfile.png);
}
</source>
* As you can see iconname and iconfile do not necessarily have to be the same.
** JToolBarHelper will look for the iconname at the end of .icon-32- and the filename must be preceded by icon-32-
* The following would create this custom toolbar icon, notice the iconname dose not correspond to the actual file name but the CSS allows the reference.
<source lang="php">
JToolBarHelper :: custom( 'someFunction', 'iconname.png', 'iconname.png', 'alt text', true, true );
</source>
* You can place your icon file and css file at any point in your installable component, which will allow it to be easily transferable.
* To include a new CSS file to your entire admin side it may be useful to include it in the entry point.
<source lang="php">
JHTML::_('stylesheet', THISCOMPONENTNAME.css', 'components/THISCOMPONENT/assets/css/');
</source>
</source>


Revision as of 16:57, 22 July 2008

 This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment. If you would like to try writing this article you're welcome to do so.

The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar. ---Thank you.

This article was last edited by Mole84 (talk| contribs) 18 years ago. (Purge)
Content is Incomplete

This article or section is incomplete, which means it may be lacking information. You are welcome to assist in its completion by editing it as well. If this article or section has not been edited in several days, please consider helping complete the content.
This article was last edited by Mole84 (talk| contribs) 18 years ago. (Purge)

The code below is used for adding buttons to the back-end toolbar when developing components and modules.

Apply button

JToolBarHelper::apply();

Back button

JToolBarHelper::back();

Cancel button

JToolBarHelper::cancel();

Custom button

  • The syntax for a custom button that can be added into a view
JToolBarHelper::custom( 'task', 'icon', 'icon over', 'alt', boolean, boolean );
  • The Default Admin Toolbar Icons are stored at:
www/administrator/templates/khepri/images
  • From here you will notice that the icons are linked to display through the CSS file at:
www/administrator/templates/khepri/css/icon.css
  • This icon CSS file is automatically included through the admin template. If we would like to add a custom toolbar icon into an installable component it is useful to follow the same structure. We will have to manually include our new CSS file.
  • An example of the icon CSS statement:
.icon-32-iconname	{ 
	background-image: url(../../images/icon-32-iconfile.png); 
}
  • As you can see iconname and iconfile do not necessarily have to be the same.
    • JToolBarHelper will look for the iconname at the end of .icon-32- and the filename must be preceded by icon-32-
  • The following would create this custom toolbar icon, notice the iconname dose not correspond to the actual file name but the CSS allows the reference.
JToolBarHelper :: custom( 'someFunction', 'iconname.png', 'iconname.png', 'alt text', true, true );
  • You can place your icon file and css file at any point in your installable component, which will allow it to be easily transferable.
  • To include a new CSS file to your entire admin side it may be useful to include it in the entry point.
JHTML::_('stylesheet', THISCOMPONENTNAME.css', 'components/THISCOMPONENT/assets/css/');

Upload button

  • Method 1:
// Add an upload button and view a popup screen width 550 and height 400
$alt = "Upload";
$bar=& JToolBar::getInstance( 'toolbar' );
$bar->appendButton( 'Popup', 'upload', $alt, 'index.php', 550, 400 );
  • Method 2:
// You view button for popup media manager tools
JToolBarHelper::media_manager( '/' );
Retrieved from "https://docs.sandbox.joomla.org/index.php?title=J1.5:How_to_create_a_custom_button&oldid=9312"