Standard Module Chromes - Revision history

Cmb: Replaced deprecated 'source' tags with 'syntaxhighlight' tags. Other markup changes.

2023-10-09T21:04:42Z

Replaced deprecated 'source' tags with 'syntaxhighlight' tags. Other markup changes.

← Older revision		Revision as of 21:04, 9 October 2023
Line 1:		Line 1:
	<noinclude><languages /></noinclude>		<noinclude><languages /></noinclude>
	<translate><!--T:1-->		<translate><!--T:1-->
	Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.</translate>		Note that this example includes class additions because the examples are taken using ''mod_mainmenu''. The suffix "_menu" on the div class and the ''menu'' class on the unordered list (ul) tag are not present with other modules.</translate>

	{\| style="width:100%" class="wikitable"		{\| style="width:100%" class="wikitable"
Line 17:		Line 17:
	!<translate><!--T:7-->		!<translate><!--T:7-->
	rounded</translate><br />		rounded</translate><br />
	\|<~~source~~ lang="html4strict">		\|<syntaxhighlight lang="html4strict">
	<div class="module_menu">		<div class="module_menu">
	<div>		<div>
Line 30:		Line 30:
	</div>		</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>
	\|[[Image:Module_chrome_rounded.png]]		\|[[Image:Module_chrome_rounded.png]]
	\|-		\|-
	!<translate><!--T:8-->		!<translate><!--T:8-->
	none</translate>		none</translate>
	\|<~~source~~ lang="html4strict">		\|<syntaxhighlight lang="html4strict">
	<ul class="menu">		<ul class="menu">
	<li><!-- various menu items --></li>		<li><!-- various menu items --></li>
	</ul>		</ul>
	</~~source~~>		</syntaxhighlight>
	\|		\|
	[[Image:Module_chrome_none.png]]		[[Image:Module_chrome_none.png]]
Line 45:		Line 45:
	!<translate><!--T:9-->		!<translate><!--T:9-->
	table</translate>		table</translate>
	\|<~~source~~ lang="html4strict">		\|<syntaxhighlight lang="html4strict">
	<table cellpadding="0" cellspacing="0" class="moduletable_menu">		<table cellpadding="0" cellspacing="0" class="moduletable_menu">
	<tr>		<tr>
Line 58:		Line 58:
	</tr>		</tr>
	</table>		</table>
	</~~source~~>		</syntaxhighlight>
	\|[[Image:Module_chrome_table.png]]		\|[[Image:Module_chrome_table.png]]
	\|-		\|-
	!<translate><!--T:10-->		!<translate><!--T:10-->
	horz</translate>		horz</translate>
	\|<~~source~~ lang="html4strict">		\|<syntaxhighlight lang="html4strict">
	<table cellspacing="1" cellpadding="0" border="0" width="100%">		<table cellspacing="1" cellpadding="0" border="0" width="100%">
	<tr>		<tr>
Line 82:		Line 82:
	</tr>		</tr>
	</table>		</table>
	</~~source~~>		</syntaxhighlight>
	\|[[Image:Module_chrome_horz.png]]		\|[[Image:Module_chrome_horz.png]]
	\|-		\|-
	!xhtml		!xhtml
	\|<~~source~~ lang="html4strict">		\|<syntaxhighlight lang="html4strict">
	<div class="moduletable_menu">		<div class="moduletable_menu">
	<h3>Main Menu</h3>		<h3>Main Menu</h3>
Line 93:		Line 93:
	</ul>		</ul>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>
	\|[[Image:Module_chrome_xhtml.png]]		\|[[Image:Module_chrome_xhtml.png]]
	\|-		\|-
	!html5		!html5
	\|<!--- leave as html4strict/html5 not available yet --->		\|<!--- leave as html4strict/html5 not available yet --->
	<~~source~~ lang="html4strict">		<syntaxhighlight lang="html4strict">
	<div class="well _menu">		<div class="well _menu">
	<h3 class="page-header">Main Menu</h3>		<h3 class="page-header">Main Menu</h3>
Line 105:		Line 105:
	</ul>		</ul>
	</div>		</div>
	</~~source~~>		</syntaxhighlightv>
	\|[[Image:Module_chrome_html5.png]]		\|[[Image:Module_chrome_html5.png]]
	\|-		\|-
	!<translate><!--T:11-->		!<translate><!--T:11-->
	outline</translate>		outline</translate>
	\|<~~source~~ lang="html4strict">		\|<syntaxhighlight lang="html4strict">
	<div class="mod-preview">		<div class="mod-preview">
	<div class="mod-preview-info">left[outline]</div>		<div class="mod-preview-info">left[outline]</div>
Line 119:		Line 119:
	</div>		</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>
	\| [[Image:Module_chrome_outline.png]]		\| [[Image:Module_chrome_outline.png]]
	\|-		\|-
Line 125:		Line 125:

	<translate><!--T:12-->		<translate><!--T:12-->
	Note that the Module chrome doesn't ~~necessarily~~ change the appearance all that ~~much - this~~ depends on the CSS used in the template. For example, the '~~<tt>~~none~~</tt>~~' and '~~<tt>~~horz~~</tt>~~' chromes look ~~very~~ similar, although the underlying HTML code is ~~very~~ different.</translate>		Note that the Module chrome doesn't change the appearance all that much—this depends on the CSS used in the template. For example, the ''none'' and ''horz'' chromes look similar, although the underlying HTML code is different.</translate>

	<translate><!--T:13-->		<translate><!--T:13-->
	Other notes: The ~~<tt>~~horz~~</tt>~~ is just the ~~<tt>~~table~~</tt>~~ layout, wrapped in a ~~<tt>~~table~~</tt>~~, ~~<tt>~~tr~~</tt>~~, and ~~<tt>~~td~~</tt>~~.</translate>		Other notes: The ''horz'' is just the ''table'' layout, wrapped in a ''table'', ''tr'', and ''td''.</translate>

	<translate><!--T:14-->		<translate><!--T:14-->
	Until Joomla! 3: The software controlling these is in the file</translate> ~~<tt>~~/templates/system/html/modules.php~~</tt>~~.		Until Joomla! 3: The software controlling these is in the file</translate> ''/templates/system/html/modules.php''.

	'''Changes since Joomla! 4'''		'''Changes since Joomla! 4'''
	* The standard chromes ~~<tt>~~horz~~</tt>~~, ~~<tt>~~rounded~~</tt>~~ and ~~<tt>~~xhtml~~</tt>~~ have been removed from core.		* The standard chromes ''horz'', ''rounded'' and ''xhtml'' have been removed from core.
	* The core module chromes are controlled by ~~<tt>~~JLayout~~</tt>~~ files in directory ~~<tt>~~/layouts/chromes/~~</tt>~~.		* The core module chromes are controlled by ''JLayout'' files in directory ''/layouts/chromes/''.

	<noinclude>		<noinclude>

Vovos: Changes in J!4

2020-03-11T21:00:45Z

Changes in J!4

← Older revision		Revision as of 21:00, 11 March 2020
Line 128:		Line 128:

	<translate><!--T:13-->		<translate><!--T:13-->
	Other notes: The <tt>~~horiz~~</tt> is just the <tt>table</tt> layout, wrapped in a <tt>table</tt>, <tt>tr</tt>, and <tt>td</tt>.</translate>		Other notes: The <tt>horz</tt> is just the <tt>table</tt> layout, wrapped in a <tt>table</tt>, <tt>tr</tt>, and <tt>td</tt>.</translate>

	<translate><!--T:14-->		<translate><!--T:14-->
	The software controlling these is in the file</translate> <tt>/templates/system/html/modules.php</tt>		Until Joomla! 3: The software controlling these is in the file</translate> <tt>/templates/system/html/modules.php</tt>.

			'''Changes since Joomla! 4'''
			* The standard chromes <tt>horz</tt>, <tt>rounded</tt> and <tt>xhtml</tt> have been removed from core.
			* The core module chromes are controlled by <tt>JLayout</tt> files in directory <tt>/layouts/chromes/</tt>.

	<noinclude>		<noinclude>

Vovos at 20:44, 11 March 2020

2020-03-11T20:44:44Z

← Older revision		Revision as of 20:44, 11 March 2020
Line 7:		Line 7:
	Comparison of the Joomla! standard Module chromes</translate>'''		Comparison of the Joomla! standard Module chromes</translate>'''
	<translate><!--T:3-->		<translate><!--T:3-->
	These are the same from Joomla! 1.5 through 3.3</translate>		These are the same from Joomla! 1.5 through 3.x</translate>
	!width="100" \| <translate><!--T:4-->		!width="100" \| <translate><!--T:4-->
	Style</translate>		Style</translate>

MATsxm: Marked this version for translation

2015-09-08T19:24:19Z

Marked this version for translation

← Older revision		Revision as of 19:24, 8 September 2015
Line 1:		Line 1:
	<noinclude><languages /></noinclude>		<noinclude><languages /></noinclude>
	<translate>Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.</translate>		<translate><!--T:1-->
			Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.</translate>

	{\| style="width:100%" class="wikitable"		{\| style="width:100%" class="wikitable"
	\|+ '''<translate>Comparison of the Joomla! standard Module chromes</translate>'''		\|+ '''<translate><!--T:2-->
	<translate>These are the same from Joomla! 1.5 through 3.3</translate>		Comparison of the Joomla! standard Module chromes</translate>'''
	!width="100" \| <translate>Style</translate>		<translate><!--T:3-->
	!<translate>Output</translate>		These are the same from Joomla! 1.5 through 3.3</translate>
	!width="210" \| <translate>Appearance</translate>		!width="100" \| <translate><!--T:4-->
			Style</translate>
			!<translate><!--T:5-->
			Output</translate>
			!width="210" \| <translate><!--T:6-->
			Appearance</translate>
	\|-		\|-
	!<translate>rounded</translate><br />		!<translate><!--T:7-->
			rounded</translate><br />
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<div class="module_menu">		<div class="module_menu">
Line 26:		Line 33:
	\|[[Image:Module_chrome_rounded.png]]		\|[[Image:Module_chrome_rounded.png]]
	\|-		\|-
	!<translate>none</translate>		!<translate><!--T:8-->
			none</translate>
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<ul class="menu">		<ul class="menu">
Line 35:		Line 43:
	[[Image:Module_chrome_none.png]]		[[Image:Module_chrome_none.png]]
	\|-		\|-
	!<translate>table</translate>		!<translate><!--T:9-->
			table</translate>
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<table cellpadding="0" cellspacing="0" class="moduletable_menu">		<table cellpadding="0" cellspacing="0" class="moduletable_menu">
Line 52:		Line 61:
	\|[[Image:Module_chrome_table.png]]		\|[[Image:Module_chrome_table.png]]
	\|-		\|-
	!<translate>horz</translate>		!<translate><!--T:10-->
			horz</translate>
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<table cellspacing="1" cellpadding="0" border="0" width="100%">		<table cellspacing="1" cellpadding="0" border="0" width="100%">
Line 98:		Line 108:
	\|[[Image:Module_chrome_html5.png]]		\|[[Image:Module_chrome_html5.png]]
	\|-		\|-
	!<translate>outline</translate>		!<translate><!--T:11-->
			outline</translate>
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<div class="mod-preview">		<div class="mod-preview">
Line 113:		Line 124:
	\|}		\|}

	<translate>Note that the Module chrome doesn't necessarily change the appearance all that much - this depends on the CSS used in the template. For example, the '<tt>none</tt>' and '<tt>horz</tt>' chromes look very similar, although the underlying HTML code is very different.</translate>		<translate><!--T:12-->
			Note that the Module chrome doesn't necessarily change the appearance all that much - this depends on the CSS used in the template. For example, the '<tt>none</tt>' and '<tt>horz</tt>' chromes look very similar, although the underlying HTML code is very different.</translate>

	<translate>Other notes: The <tt>horiz</tt> is just the <tt>table</tt> layout, wrapped in a <tt>table</tt>, <tt>tr</tt>, and <tt>td</tt>.</translate>		<translate><!--T:13-->
			Other notes: The <tt>horiz</tt> is just the <tt>table</tt> layout, wrapped in a <tt>table</tt>, <tt>tr</tt>, and <tt>td</tt>.</translate>

	<translate>The software controlling these is in the file</translate> <tt>/templates/system/html/modules.php</tt>		<translate><!--T:14-->
			The software controlling these is in the file</translate> <tt>/templates/system/html/modules.php</tt>

	<noinclude>		<noinclude>
	<translate>		<translate>
			<!--T:15-->
	[[Category:Advanced\|Chrome]]		[[Category:Advanced\|Chrome]]
	[[Category:Module Development]]		[[Category:Module Development]]

MATsxm: Marked for translation

2015-09-08T19:24:09Z

Marked for translation

← Older revision		Revision as of 19:24, 8 September 2015
Line 1:		Line 1:
			<noinclude><languages /></noinclude>
	Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.		<translate>Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.</translate>

	{\| style="width:100%" class="wikitable"		{\| style="width:100%" class="wikitable"
	\|+ '''Comparison of the Joomla! standard Module chromes'''		\|+ '''<translate>Comparison of the Joomla! standard Module chromes</translate>'''
	These are the same from Joomla! 1.5 through 3.3		<translate>These are the same from Joomla! 1.5 through 3.3</translate>
	!width="100" \| Style		!width="100" \| <translate>Style</translate>
	!Output		!<translate>Output</translate>
	!width="210" \| Appearance		!width="210" \| <translate>Appearance</translate>
	\|-		\|-
	!rounded<br />		!<translate>rounded</translate><br />
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<div class="module_menu">		<div class="module_menu">
Line 26:		Line 26:
	\|[[Image:Module_chrome_rounded.png]]		\|[[Image:Module_chrome_rounded.png]]
	\|-		\|-
	!none		!<translate>none</translate>
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<ul class="menu">		<ul class="menu">
Line 35:		Line 35:
	[[Image:Module_chrome_none.png]]		[[Image:Module_chrome_none.png]]
	\|-		\|-
	!table		!<translate>table</translate>
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<table cellpadding="0" cellspacing="0" class="moduletable_menu">		<table cellpadding="0" cellspacing="0" class="moduletable_menu">
Line 52:		Line 52:
	\|[[Image:Module_chrome_table.png]]		\|[[Image:Module_chrome_table.png]]
	\|-		\|-
	!horz		!<translate>horz</translate>
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<table cellspacing="1" cellpadding="0" border="0" width="100%">		<table cellspacing="1" cellpadding="0" border="0" width="100%">
Line 98:		Line 98:
	\|[[Image:Module_chrome_html5.png]]		\|[[Image:Module_chrome_html5.png]]
	\|-		\|-
	!outline		!<translate>outline</translate>
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<div class="mod-preview">		<div class="mod-preview">
Line 113:		Line 113:
	\|}		\|}

	Note that the Module chrome doesn't necessarily change the appearance all that much - this depends on the CSS used in the template. For example, the '<tt>none</tt>' and '<tt>horz</tt>' chromes look very similar, although the underlying HTML code is very different.		<translate>Note that the Module chrome doesn't necessarily change the appearance all that much - this depends on the CSS used in the template. For example, the '<tt>none</tt>' and '<tt>horz</tt>' chromes look very similar, although the underlying HTML code is very different.</translate>

	Other notes: The <tt>horiz</tt> is just the <tt>table</tt> layout, wrapped in a <tt>table</tt>, <tt>tr</tt>, and <tt>td</tt>.		<translate>Other notes: The <tt>horiz</tt> is just the <tt>table</tt> layout, wrapped in a <tt>table</tt>, <tt>tr</tt>, and <tt>td</tt>.</translate>

	The software controlling these is in the file <tt>/templates/system/html/modules.php</tt>		<translate>The software controlling these is in the file</translate> <tt>/templates/system/html/modules.php</tt>

	<noinclude>		<noinclude>
			<translate>
	[[Category:Advanced\|Chrome]]		[[Category:Advanced\|Chrome]]
	[[Category:Module Development]]		[[Category:Module Development]]
	[[Category:Template Development]]		[[Category:Template Development]]
	[[Category:CSS]]		[[Category:CSS]]
			</translate>
	</noinclude>		</noinclude>

Ibrent: updated a bit, and made note that these are the same for J1.5 through J3.3

2014-12-03T19:58:02Z

updated a bit, and made note that these are the same for J1.5 through J3.3

← Older revision		Revision as of 19:58, 3 December 2014
Line 1:		Line 1:
	~~{{page\|needs updating\|References to 1.5 and 1.6.}}~~

	Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.		Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.

	{\| style="width:100%" class="wikitable"		{\| style="width:100%" class="wikitable"
	\|+ '''Comparison of the Joomla! ~~1.5/1.6~~ standard Module chromes'''		\|+ '''Comparison of the Joomla! standard Module chromes'''
			These are the same from Joomla! 1.5 through 3.3
	!width="100" \| Style		!width="100" \| Style
	!Output		!Output
	!width="210" \| Appearance		!width="210" \| Appearance
	\|-		\|-
	!rounded<br />~~(default for menus on milkyway)~~		!rounded<br />
	\|<source lang="html4strict">		\|<source lang="html4strict">
	<div class="module_menu">		<div class="module_menu">
Line 114:		Line 114:

	Note that the Module chrome doesn't necessarily change the appearance all that much - this depends on the CSS used in the template. For example, the '<tt>none</tt>' and '<tt>horz</tt>' chromes look very similar, although the underlying HTML code is very different.		Note that the Module chrome doesn't necessarily change the appearance all that much - this depends on the CSS used in the template. For example, the '<tt>none</tt>' and '<tt>horz</tt>' chromes look very similar, although the underlying HTML code is very different.

			Other notes: The <tt>horiz</tt> is just the <tt>table</tt> layout, wrapped in a <tt>table</tt>, <tt>tr</tt>, and <tt>td</tt>.

			The software controlling these is in the file <tt>/templates/system/html/modules.php</tt>

	<noinclude>		<noinclude>

Tom Hutchison: more formating

2014-07-28T01:33:38Z

more formating

← Older revision		Revision as of 01:33, 28 July 2014
Line 10:		Line 10:
	\|-		\|-
	!rounded<br />(default for menus on milkyway)		!rounded<br />(default for menus on milkyway)
	\|		\|<source lang="html4strict">
	<source lang="html4strict">
	<div class="module_menu">		<div class="module_menu">
	<div>		<div>
Line 25:		Line 24:
	</div>		</div>
	</source>		</source>
	\|		\|[[Image:Module_chrome_rounded.png]]
	[[Image:Module_chrome_rounded.png]]
	\|-		\|-
	!none		!none
	\|		\|<source lang="html4strict">
	<source lang="html4strict">
	<ul class="menu">		<ul class="menu">
	<li><!-- various menu items --></li>		<li><!-- various menu items --></li>
Line 39:		Line 36:
	\|-		\|-
	!table		!table
	\|		\|<source lang="html4strict">
	<source lang="html4strict">
	<table cellpadding="0" cellspacing="0" class="moduletable_menu">		<table cellpadding="0" cellspacing="0" class="moduletable_menu">
	<tr>		<tr>
Line 54:		Line 50:
	</table>		</table>
	</source>		</source>
	\|		\|[[Image:Module_chrome_table.png]]
	[[Image:Module_chrome_table.png]]
	\|-		\|-
	!horz		!horz
	\|		\|<source lang="html4strict">
	<source lang="html4strict">
	<table cellspacing="1" cellpadding="0" border="0" width="100%">		<table cellspacing="1" cellpadding="0" border="0" width="100%">
	<tr>		<tr>
Line 79:		Line 73:
	</table>		</table>
	</source>		</source>
	\|		\|[[Image:Module_chrome_horz.png]]
	[[Image:Module_chrome_horz.png]]
	\|-		\|-
	!xhtml		!xhtml
	\|		\|<source lang="html4strict">
	<source lang="html4strict">
	<div class="moduletable_menu">		<div class="moduletable_menu">
	<h3>Main Menu</h3>		<h3>Main Menu</h3>
Line 117:		Line 109:
	</div>		</div>
	</source>		</source>
	\|[[Image:Module_chrome_outline.png]]		\| [[Image:Module_chrome_outline.png]]
			\|-
	\|}		\|}

Tom Hutchison: spacing

2014-07-28T01:21:47Z

spacing

← Older revision		Revision as of 01:21, 28 July 2014
Line 98:		Line 98:
	<source lang="html4strict">		<source lang="html4strict">
	<div class="well _menu">		<div class="well _menu">
	<h3 class="page-header">Main Menu</h3>		<h3 class="page-header">Main Menu</h3>
	<ul class="nav menu">		<ul class="nav menu">
	<li><!-- various menu items --></li>		<li><!-- various menu items --></li>
	</ul>		</ul>
	</div>		</div>
	</source>		</source>

Tom Hutchison: formating

2014-07-28T01:19:42Z

formating

← Older revision		Revision as of 01:19, 28 July 2014
Line 99:		Line 99:
	<div class="well _menu">		<div class="well _menu">
	<h3 class="page-header">Main Menu</h3>		<h3 class="page-header">Main Menu</h3>
	<ul class="nav menu">		<ul class="nav menu">
	<li><!-- various menu items --></li>		<li><!-- various menu items --></li>
	</ul>		</ul>
	</div>		</div>
	</source>		</source>

Tom Hutchison: adding html5, someone check me please

2014-07-28T01:18:47Z

adding html5, someone check me please

← Older revision		Revision as of 01:18, 28 July 2014
Line 97:		Line 97:
	\|<!--- leave as html4strict/html5 not available yet --->		\|<!--- leave as html4strict/html5 not available yet --->
	<source lang="html4strict">		<source lang="html4strict">
			<div class="well _menu">
	<~~html5 wanted~~>		<h3 class="page-header">Main Menu</h3>
			<ul class="nav menu">
			<li><!-- various menu items --></li>
			</ul>
			</div>
	</source>		</source>
	\|[[Image:Module_chrome_html5.png]]		\|[[Image:Module_chrome_html5.png]]