J1.5

Difference between revisions of "Using a custom image in the menu bar title"

From Joomla! Documentation

m (Needs addition of the alternate and easier way to do this (since joomla 1.5?))
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
To use a custom image in the Menu Bar title we need an image (obviously) and a little bit of CSS.
+
=Via manifest xml <small>since</small> {{JVer|1.5|Since Version 1.5}}=
−
{{ambox
 
−
| image = jdoc
 
−
| text = ''This is a {{main talk file other|article|discussion|media file|page}} which: '''needs editing'''. You can help the Joomla! Documentation Wiki by [{{fullurl:{{FULLPAGENAME}}|action=edit}} contributing to it]. More pages that need help similar to this one are [[:Category:needs editing|here]].'' <br/><small>'''If you feel the need is satistified, please remove this notice.''' ''While actively editing, consider adding {{[[Template:inuse|inuse]]}} to reduce [[Help:Edit conflict|edit conflicts]].''</small><br/><br/>
 
−
'''Reason''': Since joomla 1.5 (if I am not wrong), there is another way to do what this article explains which is easier -> via the package xml file tag "menu", attribute "img", though how precisely or where this is explained needs to be completed by someone.}}<includeonly>
 
−
{{#switch: {{NAMESPACE}}
 
−
|Template=<!-- no categorization -->
 
−
|JDOC=<!-- no categorization -->
 
−
|#default=[[Category:{{{1}}}|{{PAGENAME}}]][[Category:Joomla! Wiki need pages|{{PAGENAME}}]]
 
−
}}
 
−
</includeonly>
 
−
<!--Last line of your template code-->
 
−
<noinclude>
 
−
{{documentation}}
 
−
<!-- Add categories and interwikis to the /doc subpage, not here! -->
 
−
</noinclude>
 
  
 +
Make sure the image itself is going to be uploaded in your manifest file.  Now link it via the [[Manifest_files#Menu_links_and_submenus|img attribute of the administration/menu section]].
 +
Example
 +
<source lang="xml">
 +
<menu img="../media/com_mycomponent/images/mycomponent-logo-16.png">COM_EXAMPLE</menu>
 +
</source>
  
 +
=Via css =
 +
To use a custom image in the Menu Bar title we need an image (obviously) and a little bit of CSS.
  
 
First off, create the following folders in your administrator component (we're using a fictitious component called com_notes as the example).  Then place your image in the ''images'' folder and create a new file called ''default.css'' in the css folder, like this:
 
First off, create the following folders in your administrator component (we're using a fictitious component called com_notes as the example).  Then place your image in the ''images'' folder and create a new file called ''default.css'' in the css folder, like this:

Revision as of 10:26, 3 October 2012

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

Via manifest xml since Since Version 1.5[edit]

Make sure the image itself is going to be uploaded in your manifest file. Now link it via the img attribute of the administration/menu section. Example 

	<menu img="../media/com_mycomponent/images/mycomponent-logo-16.png">COM_EXAMPLE</menu>

Via css[edit]

To use a custom image in the Menu Bar title we need an image (obviously) and a little bit of CSS.

First off, create the following folders in your administrator component (we're using a fictitious component called com_notes as the example). Then place your image in the images folder and create a new file called default.css in the css folder, like this: 

com_notes
|- assets
..|- css
....|- default.css
..|- images
....|- logo.png

The code for the CSS file looks like this: 

/* Toolbar */
.icon-48-notes {
    background: url(../images/logo.png) no-repeat left;
}

Next we tell the menubar handler function to use this css by the following invocation of the title method of JMenuBar: 

JMenuBar::title( JText::_( 'Notes List' ), 'notes' );

Notice that value of the second argument, notes, marries with the suffix of the CSS class.

Finally we need to load the component custom CSS file. Place the following code typically near the top of admin.notes.php: 

$document =& JFactory::getDocument();
$document->addStyleSheet( '/components/com_notes/assets/css/default.css' );

You can, of course, use default.css for more than just the title styling.

Retrieved from "https://docs.joomla.org/index.php?title=J1.5:Using_a_custom_image_in_the_menu_bar_title&oldid=76150"