Using a custom image in the menu bar title - Revision history

E-builds: /* Via manifest xml since {{JVer|1.5|Since Version 1.5}} */ Example xml line

2012-10-03T15:26:04Z

‎Via manifest xml since {{JVer|1.5|Since Version 1.5}}: Example xml line

E-builds: Filled in missing manifest file way

2012-10-03T15:23:57Z

Filled in missing manifest file way

Hutchy68: copyedit is the standard call for needs editing, will change the switch in review to needs editing

2012-08-14T19:05:38Z

copyedit is the standard call for needs editing, will change the switch in review to needs editing

Hutchy68: standard template call, will also add category, Reason: parameter added to templates to allow for Reason:

2012-08-14T19:01:59Z

standard template call, will also add category, Reason: parameter added to templates to allow for Reason:

E-builds: fake-template trouble removed

2012-08-14T18:07:35Z

fake-template trouble removed

E-builds: Needs addition of the alternate and easier way to do this (since joomla 1.5?)

2012-08-14T18:05:47Z

Needs addition of the alternate and easier way to do this (since joomla 1.5?)

Chris Davenport: Transwiki:Using a custom image in the Menu Bar title moved to Using a custom image in the menu bar title

2008-12-29T00:43:31Z

Transwiki:Using a custom image in the Menu Bar title moved to Using a custom image in the menu bar title

Chris Davenport: Fixed markup.

2008-12-29T00:43:13Z

Fixed markup.

Maintenance script: Importing text file

2008-05-07T02:15:42Z

Importing text file

New page

====== Using a custom image in the Menu Bar title ======

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 ficticious 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:

<source>
com_notes
|- assets
..|- css
....|- default.css
..|- images
....|- logo.png
</source>

The code for the css file looks like this:

<source>
/* Toolbar */

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

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

<source>
JMenuBar::title( JText::_( 'Notes List' ), 'notes' );
</source>

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'':

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

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

← Older revision		Revision as of 15:26, 3 October 2012
Line 2:		Line 2:

	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]].		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 =		=Via css =

← Older revision		Revision as of 15:23, 3 October 2012
Line 1:		Line 1:
−	{{~~review~~\|~~copyedit~~\|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.}}	+	=Via manifest xml <small>since</small> {{JVer\|1.5\|Since Version 1.5}}=

		+	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]].
		+
		+	=Via css =
	To use a custom image in the Menu Bar title we need an image (obviously) and a little bit of CSS.		To use a custom image in the Menu Bar title we need an image (obviously) and a little bit of CSS.

← Older revision		Revision as of 19:05, 14 August 2012
Line 1:		Line 1:
−	{{review\|~~needs editing~~\|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.}}	+	{{review\|copyedit\|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.}}

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

@@ Line 1: / Line 1: @@
-{{ambox
+{{review|needs editing|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.}}
-| 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-->
 To use a custom image in the Menu Bar title we need an image (obviously) and a little bit of CSS.

@@ Line 1: / Line 1: @@
 {{ambox
 | image = jdoc
@@ Line 11: / Line 10: @@
 </includeonly>
 <!--Last line of your template code-->
 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:

← Older revision		Revision as of 18:05, 14 August 2012
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.		To use a custom image in the Menu Bar title we need an image (obviously) and a little bit of CSS.
		+	{{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>
		+
		+

	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:

@@ Line 1: / Line 1: @@
-====== Using a custom image in the Menu Bar title ======
+To use a custom image in the Menu Bar title we need an image (obviously) and a little bit of 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 ficticious 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
-<source>
+The code for the CSS file looks like this:
-com_notes
-|- assets
-..|- css
-....|- default.css
-..|- images
-....|- logo.png
-</source>
-The code for the css file looks like this:
+<source lang="css">
-−
 <source>
 /* Toolbar */
 .icon-48-notes {
      background: url(../images/logo.png) no-repeat left;
@@ Line 26: / Line 21: @@
 Next we tell the menubar handler function to use this css by the following invocation of the ''title'' method of ''JMenuBar'':
-<source>
+<source lang="php">
 JMenuBar::title( JText::_( 'Notes List' ), 'notes' );
 </source>
-Notice that value of the second argument, ''notes'', marries with the suffix of the css class.
+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'':
+Finally we need to load the component custom CSS file.  Place the following code typically near the top of ''admin.notes.php'':
-<source>
+<source lang="php">
 $document =& JFactory::getDocument();
-$document->addStyleSheet('/components/com_notes/assets/css/default.css');
+$document->addStyleSheet( '/components/com_notes/assets/css/default.css' );
 </source>
 You can, of course, use ''default.css'' for more than just the title styling.