Using the Page Class Suffix in Template Code - Revision history

Wilsonge: Update red link

2013-05-17T07:43:32Z

Update red link

← Older revision		Revision as of 07:43, 17 May 2013
Line 1:		Line 1:
	{{version\|1.5}}		{{version\|1.5}}
	Sometimes web designers need to access a [[~~Tutorial:Using_Class_Suffixes_in_Joomla!_1.5~~#Page_Class_Suffix\|page class suffix]] from directly within a template. A common reason to do this is to assign unique styles to individual pages linked from a menu (e.g. to change the dominant color on that page). By default Joomla applies the page class suffixes only to limited areas of a page, which often doesn't offer enough flexibility. However, by making some simple changes to your template you can take advantage of the cascading nature of stylesheets to apply unique styles to any element on a page.		Sometimes web designers need to access a [[Using_Class_Suffixes#Page_Class_Suffix\|page class suffix]] from directly within a template. A common reason to do this is to assign unique styles to individual pages linked from a menu (e.g. to change the dominant color on that page). By default Joomla applies the page class suffixes only to limited areas of a page, which often doesn't offer enough flexibility. However, by making some simple changes to your template you can take advantage of the cascading nature of stylesheets to apply unique styles to any element on a page.

	== Load Suffix ==		== Load Suffix ==

Wilsonge at 00:46, 9 April 2013

2013-04-09T00:46:09Z

← Older revision		Revision as of 00:46, 9 April 2013
Line 1:		Line 1:
			{{version\|1.5}}
	Sometimes web designers need to access a [[Tutorial:Using_Class_Suffixes_in_Joomla!_1.5#Page_Class_Suffix\|page class suffix]] from directly within a template. A common reason to do this is to assign unique styles to individual pages linked from a menu (e.g. to change the dominant color on that page). By default Joomla applies the page class suffixes only to limited areas of a page, which often doesn't offer enough flexibility. However, by making some simple changes to your template you can take advantage of the cascading nature of stylesheets to apply unique styles to any element on a page.		Sometimes web designers need to access a [[Tutorial:Using_Class_Suffixes_in_Joomla!_1.5#Page_Class_Suffix\|page class suffix]] from directly within a template. A common reason to do this is to assign unique styles to individual pages linked from a menu (e.g. to change the dominant color on that page). By default Joomla applies the page class suffixes only to limited areas of a page, which often doesn't offer enough flexibility. However, by making some simple changes to your template you can take advantage of the cascading nature of stylesheets to apply unique styles to any element on a page.

Harmageddon: /* By Active Menu Item */ Better PHP code for 2.5/3.x

2013-02-21T20:16:25Z

By Active Menu Item: Better PHP code for 2.5/3.x

← Older revision		Revision as of 20:16, 21 February 2013
Line 35:		Line 35:
	(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])		(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])

	The above code will throw an exception in 2.5. Code below works:		The above code will throw an exception in 2.5 and higher. Code below works:
	<source lang="php">		<source lang="php">

	<?php		<?php
	$~~menu~~ = ~~JSite~~::getMenu()->getActive();		$app = JFactory::getApplication();
	$pageclass = '';		$menu = $app->getMenu()->getActive();
			$pageclass = '';
	if (is_object($menu))
	$pageclass = $menu->params->get('pageclass_sfx');		if (is_object($menu))
			$pageclass = $menu->params->get('pageclass_sfx');
	?>		?>


	</source>		</source>

Knyri: Added Joomla 2.5 compatible code for the "By Active Menu Item" section.

2012-08-10T16:57:36Z

Added Joomla 2.5 compatible code for the "By Active Menu Item" section.

@@ Line 34: / Line 34: @@
 </source>
 (credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])
 ===Security===
 You should always use htmlspecialchars() in your code before writing something into an HTML attribute, else you open up an attack vector to inject script code into your page.

Confidant: There was a code error; not copied properly from the credited page.

2011-04-09T02:56:12Z

There was a code error; not copied properly from the credited page.

← Older revision		Revision as of 02:56, 9 April 2011
Line 20:		Line 20:
	To load the page class suffix associated with the active menu item, add this to the top of the index.php file: (For sub-pages with no active menu item, this will load the page class suffix for the default menu item.)		To load the page class suffix associated with the active menu item, add this to the top of the index.php file: (For sub-pages with no active menu item, this will load the page class suffix for the default menu item.)
	<source lang="php">		<source lang="php">

	<?php		<?php
	$~~menu~~ = &JSite::getMenu();		$menus = &JSite::getMenu();
	$~~active~~ = $~~menu~~->getActive();		$menu = $menus->getActive();
	$pageclass = "";		$pageclass = "";
	if (is_object( $~~active~~ )) :
	$params = new JParameter( $~~active~~->params );		if (is_object( $menu )) :
	$pageclass = $params->get( 'pageclass_sfx' ));		$params = new JParameter( $menu->params );
	endif;		$pageclass = $params->get( 'pageclass_sfx' );
			endif;
	?>		?>

	</source>		</source>
	(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])		(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])

MarijkeS: /* Secruity */

2011-01-08T22:54:11Z

Secruity

← Older revision		Revision as of 22:54, 8 January 2011
Line 31:		Line 31:
	</source>		</source>
	(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])		(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])
	===~~Secruity~~===		===Security===
	You should always use htmlspecialchars() in your code before writing something into an HTML attribute, else you open up an attack vector to inject script code into your page.		You should always use htmlspecialchars() in your code before writing something into an HTML attribute, else you open up an attack vector to inject script code into your page.

	== Insert Suffix ==		== Insert Suffix ==
	The next step is to use the page class suffix somewhere in the template.		The next step is to use the page class suffix somewhere in the template.

Realityking at 17:09, 8 January 2011

2011-01-08T17:09:21Z

← Older revision		Revision as of 17:09, 8 January 2011
Line 26:		Line 26:
	if (is_object( $active )) :		if (is_object( $active )) :
	$params = new JParameter( $active->params );		$params = new JParameter( $active->params );
	$pageclass = $params->get( 'pageclass_sfx' );		$pageclass = $params->get( 'pageclass_sfx' ));
	endif;		endif;
	?>		?>
	</source>		</source>
	(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])		(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])
			===Secruity===
			You should always use htmlspecialchars() in your code before writing something into an HTML attribute, else you open up an attack vector to inject script code into your page.
	== Insert Suffix ==		== Insert Suffix ==
	The next step is to use the page class suffix somewhere in the template.		The next step is to use the page class suffix somewhere in the template.
Line 36:		Line 38:
	The more common method would be to apply the page class suffix as an id or class to the <body> tag. Find the <body> tag (below the </head> tag) and replace it with this:		The more common method would be to apply the page class suffix as an id or class to the <body> tag. Find the <body> tag (below the </head> tag) and replace it with this:
	<source lang="html4strict">		<source lang="html4strict">
	<body id="<?php echo $pageclass ? $pageclass : 'default'; ?>">		<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">
	</source>		</source>
	=== To Load a Page-Specific Stylesheet ===		=== To Load a Page-Specific Stylesheet ===
	The second method would be to load a stylesheet unique to the page in question. Instead of modifying the <body> tag, look for the stylesheet link within the <head></head> tags and add the following line directly beneath it:		The second method would be to load a stylesheet unique to the page in question. Instead of modifying the <body> tag, look for the stylesheet link within the <head></head> tags and add the following line directly beneath it:
	<source lang="html4strict">		<source lang="html4strict">
	<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo $pageclass ?>.css" type="text/css"/>		<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo htmlspecialchars($pageclass) ?>.css" type="text/css"/>
	</source>		</source>
	== Benefits ==		== Benefits ==
Line 50:		Line 52:

	[[Category:Tips and tricks 1.5]]		[[Category:Tips and tricks 1.5]]
			[[Category:Tips and tricks 1.6]]

Cmb: Added syntax highlighting for the PHP and HTML code.

2010-05-21T23:07:09Z

Added syntax highlighting for the PHP and HTML code.

← Older revision		Revision as of 23:07, 21 May 2010
Line 6:		Line 6:
	# Find the <head> tag in the index.php, near the top area of the template		# Find the <head> tag in the index.php, near the top area of the template
	# Above this, insert one of the following code blocks (Either of the following options will work fine in most cases. However they work slightly differently, so in certain cases your needs may dictate a specific choice.)		# Above this, insert one of the following code blocks (Either of the following options will work fine in most cases. However they work slightly differently, so in certain cases your needs may dictate a specific choice.)

	=== By Itemid ===		=== By Itemid ===
	To load the page class suffix associated with the current Itemid, add this to the top of the index.php file:		To load the page class suffix associated with the current Itemid, add this to the top of the index.php file:
	<?php		<source lang="php">
	$itemid = JRequest::getVar('Itemid');		<?php
	$menu = &JSite::getMenu();		$itemid = JRequest::getVar('Itemid');
	$active = $menu->getItem($itemid);		$menu = &JSite::getMenu();
	$params = $menu->getParams( $active->id );		$active = $menu->getItem($itemid);
	$pageclass = $params->get( 'pageclass_sfx' );		$params = $menu->getParams( $active->id );
	?>		$pageclass = $params->get( 'pageclass_sfx' );
			?>
			</source>
	=== By Active Menu Item ===		=== By Active Menu Item ===
	To load the page class suffix associated with the active menu item, add this to the top of the index.php file: (For sub-pages with no active menu item, this will load the page class suffix for the default menu item.)		To load the page class suffix associated with the active menu item, add this to the top of the index.php file: (For sub-pages with no active menu item, this will load the page class suffix for the default menu item.)
	<?php		<source lang="php">
	$menu = &JSite::getMenu();		<?php
	$active = $menu->getActive();		$menu = &JSite::getMenu();
	$pageclass = "";		$active = $menu->getActive();
	if (is_object( $active )) :		$pageclass = "";
	$params = new JParameter( $active->params );		if (is_object( $active )) :
	$pageclass = $params->get( 'pageclass_sfx' );		$params = new JParameter( $active->params );
	endif;		$pageclass = $params->get( 'pageclass_sfx' );
	?>		endif;
			?>
			</source>
	(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])		(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])


	== Insert Suffix ==		== Insert Suffix ==
	The next step is to use the page class suffix somewhere in the template.		The next step is to use the page class suffix somewhere in the template.

	=== In the Body Tag ===		=== In the Body Tag ===
	The more common method would be to apply the page class suffix as an id or class to the <body> tag. Find the <body> tag (below the </head> tag) and replace it with this:		The more common method would be to apply the page class suffix as an id or class to the <body> tag. Find the <body> tag (below the </head> tag) and replace it with this:
	<body id="<?php echo $pageclass ? $pageclass : 'default'; ?>">		<source lang="html4strict">
			<body id="<?php echo $pageclass ? $pageclass : 'default'; ?>">
			</source>
	=== To Load a Page-Specific Stylesheet ===		=== To Load a Page-Specific Stylesheet ===
	The second method would be to load a stylesheet unique to the page in question. Instead of modifying the <body> tag, look for the stylesheet link within the <head></head> tags and add the following line directly beneath it:		The second method would be to load a stylesheet unique to the page in question. Instead of modifying the <body> tag, look for the stylesheet link within the <head></head> tags and add the following line directly beneath it:
	<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo $pageclass ?>.css" type="text/css"/>		<source lang="html4strict">
			<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo $pageclass ?>.css" type="text/css"/>
			</source>
	== Benefits ==		== Benefits ==
	Using this approach to implement page class suffixes rather than the default approach has several benefits:		Using this approach to implement page class suffixes rather than the default approach has several benefits:

KavaXtreme: New page: Sometimes web designers need to access a page class suffix from directly within a template. A common reason to do this is...

2009-09-19T22:46:23Z

New page: Sometimes web designers need to access a page class suffix from directly within a template. A common reason to do this is...

New page

Sometimes web designers need to access a [[Tutorial:Using_Class_Suffixes_in_Joomla!_1.5#Page_Class_Suffix|page class suffix]] from directly within a template. A common reason to do this is to assign unique styles to individual pages linked from a menu (e.g. to change the dominant color on that page). By default Joomla applies the page class suffixes only to limited areas of a page, which often doesn't offer enough flexibility. However, by making some simple changes to your template you can take advantage of the cascading nature of stylesheets to apply unique styles to any element on a page.

== Load Suffix ==
First, we need to find out what the page class suffix is for the page we are visiting. To do this, you will need add some code to your template:
# Open your template's index.php file (located in /templates/*template-name*/)
# Find the <head> tag in the index.php, near the top area of the template
# Above this, insert one of the following code blocks (Either of the following options will work fine in most cases. However they work slightly differently, so in certain cases your needs may dictate a specific choice.)

=== By Itemid ===
To load the page class suffix associated with the current Itemid, add this to the top of the index.php file:
<?php
$itemid = JRequest::getVar('Itemid');
$menu = &JSite::getMenu();
$active = $menu->getItem($itemid);
$params = $menu->getParams( $active->id );
$pageclass = $params->get( 'pageclass_sfx' );
?>

=== By Active Menu Item ===
To load the page class suffix associated with the active menu item, add this to the top of the index.php file: (For sub-pages with no active menu item, this will load the page class suffix for the default menu item.)
<?php
$menu = &JSite::getMenu();
$active = $menu->getActive();
$pageclass = "";
if (is_object( $active )) :
$params = new JParameter( $active->params );
$pageclass = $params->get( 'pageclass_sfx' );
endif;
?>
(credit: [http://forum.joomla.org/viewtopic.php?p=1353495#p1353495 Page Class Suffix in template code])

== Insert Suffix ==
The next step is to use the page class suffix somewhere in the template.

=== In the Body Tag ===
The more common method would be to apply the page class suffix as an id or class to the <body> tag. Find the <body> tag (below the </head> tag) and replace it with this:
<body id="<?php echo $pageclass ? $pageclass : 'default'; ?>">

=== To Load a Page-Specific Stylesheet ===
The second method would be to load a stylesheet unique to the page in question. Instead of modifying the <body> tag, look for the stylesheet link within the <head></head> tags and add the following line directly beneath it:
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo $pageclass ?>.css" type="text/css"/>

== Benefits ==
Using this approach to implement page class suffixes rather than the default approach has several benefits:
* leaner CSS
* much greater flexibility in styling '''any''' element on the page
* compliments and simplifies template overrides

[[Category:Tips and tricks 1.5]]