Joomla! Documentation - User contributions [en]

User:KavaXtreme

2009-09-19T23:09:35Z

KavaXtreme: /* Todo */

My name is Sam, and I've been using Joomla heavily since the start in 2005. In particular, I do a lot of Joomla template work as [http://www.sitecoffee.com/ my day job]. I'm also the creator of the original [http://www.alledia.com/bolt/ "World's Fastest Joomla Template"].

Page Class Suffix

2009-09-19T23:00:23Z

KavaXtreme: more structure, added link

== Definition ==
You can use The Page Class Suffix parameter to create unique CSS classes that allow you to style one Menu Item differently than others. For a more complete definition of Page Class Suffixes, see the [[Glossary#Page_Class_Suffix | Joomla! Glossary]].

== Usage ==
If you enter a Page Class Suffix with a leading space, a new CSS class will be created. If the parameter does not have a leading space, the CSS classes associated with this Menu Item (for example, "componentheading") will be modified. The first method is normally preferred, since then you don't break any of the existing styling for the page elements, and you only need to add new CSS code for the new styling.

If you don't use a leading space, you will need to copy all of the styling code for the Menu Item classes and duplicate it for the new CSS class before making your CSS changes.

* See the tutorial [[Tutorial:Using_Class_Suffixes_in_Joomla!_1.5|Using Class Suffixes in Joomla! 1.5]] for a detailed example of using Page and Module Class Suffixes.
You can use The Page Class Suffix parameter to create unique CSS classes that allow you to style one Menu Item differently than others.
* Also see [[Using the Page Class Suffix in Template Code]] for additional applications.

[[Category:Templates]]

Talk:Page Class Suffix

2009-09-19T22:49:35Z

KavaXtreme: /* Could you write a Tips & Techinques article about this? */

Apologies for the following rant, but this sounds like "Page class suffix" would be a good feature to use, where in fact '''it is not''', because if used, it can quickly result in a very big stylesheet mess. '''It's the worst feature''' Joomla! (still) offers -- thanks to the obsolete, unintended backward compatibility with a dead browser named "Netscape Navigator 4" and unfortunately carried over from Mambo.

I suspect that the implementation dates back to the old days when web designers still had to fight the buggy implementation of CSS in Netscape's browser, who required repetitive and additional selectors and rules whenever a page was disrupted by things like TABLEs, and at the same time being completely unaware of multiple classnames. ''This browser is dead for good!'' but eight years later, it's legacy is still with us in the core templates of Joomla! (I'm going to write a {{jforum|wp|White Paper for 1.6}} so we can get rid of this, finally.)

No graphical browser released in the last 7-8 years had required such a ''bad workaround'' in order to style individual pages. While the idea itself is nice, a proper implementation, facing reality of the 21st century, would apply the value of 'pageclass_sfx' to the BODY element '''only''', and nowhere else.

Nobody with a good understanding of how Cascading Style Sheets ''really'' work would ever use this parameter as unfortunately demonstrated in the overrides of Beez and the way it's applied in the core "views". The implementation is so unbelievable utterly ''wrong'', it successfully destroys the [http://www.w3.org/TR/CSS21/cascade.html cascade and inheritance rules of CSS].

Template Designers and Users should in fact be warned to '''not use the Page class suffix at all''' in combination with any view template or override that contains the following statements all over the place:
<source lang="php">
class="contentpaneopen<?php echo $this->params->get( 'pageclass_sfx' ); ?>"
</source>
Read: get rid of the misbehaviour to concatene and thereby create ''brand new'' classnames using the '''best new feature''' of J! 1.5: template overrides.

----

Comment on the above:
I think that before throwing away the page suffix class feature, we have to find another solution for multi-lingual sites, which use RTL and LTR content in the same site.
It is impractical to change style direction on paragraph basis, and it does not influence headings.
Page suffix class enables (to limited extent) a RTL suffix, that will make all the content in some pages Right to left, within a Left to right site.
Template overriding is not a good solution to the above issue.

:Intersting argument. There's actually another (and better?) way to determine the writing direction in J!1.5 -- at least per article: the content language setting in the parameters. If J! wouldn't limit this to the languages installed but make this a "free" choice, this parameter can be used to determine (by language) whether the page should run RTL or LTR. Like adding the pageclass_sfx, adding the ''dir'' attribute nonetheless has to happen inside the templates. Per paragraph and per "word" tagging is still possible and necessary using HTML attributes; i.e. english text in a hebrew article or vice versa. Adding a parameter for RTL/LTR is a no-brainer as is "teaching" the templates to recognise it.
:I'm not against pageclass_sfx in general; I think the way it is (still) implemented in the core templates is plain wrong and counter productive in regards of using '''Cascading''' Style Sheets. --[[User:CirTap|CirTap]] ([[User talk:CirTap|talk]] • [[Special:Contributions/CirTap|contribs]]) 05:45, 23 July 2008 (EDT)

== You get a new CSS class if you use a leading space ==

I don't know if this changes your thinking or not, but if you enter the parameter with a leading space you get a new CSS class, which makes this much easier to work with. [[User:Dextercowley|Mark Dexter]] 21:01, 16 January 2009 (UTC)

== Cascading Page Classes ==

The "suffix" is the outdated aspect of page class suffixes. The modern best practice approach would be to use page classes applied to the body tag, unleashing the cascading aspect of stylesheets. This means both leaner CSS and much greater flexibility in styling ANY element on the page. It also compliments and simplifies template overrides. This approach can already be applied in Joomla 1.5.x by adding the following code to the template's index.php file:

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

<body id="<?php echo $pageclass; ?>">

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

An alternative use of this approach would be to load a stylesheet unique to the page in question:
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo $pageclass ?>.css" type="text/css"/>

=== Could you write a Tips & Techinques article about this? ===
This looks very interesting. Do you think you could write a short Tips & Techniques article in the Wiki about this, with an example of how this would work in both of your scenarios? If so, that would be really helpful to a lot of people. Thanks. [[User:Dextercowley|Mark Dexter]] 20:48, 7 September 2009 (UTC)
:Will do. I'll try to have something up within a week or two. [[User:KavaXtreme|KavaXtreme]] 19:09, 8 September 2009 (UTC)
::Here it is: [[Using the Page Class Suffix in Template Code]]. [[User:KavaXtreme|KavaXtreme]] 22:49, 19 September 2009 (UTC)

Using the Page Class Suffix in Template Code

2009-09-19T22:46:23Z

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...

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]]

User:KavaXtreme

2009-09-08T19:52:28Z

KavaXtreme:

User:KavaXtreme

2009-09-08T19:51:39Z

KavaXtreme:

User:KavaXtreme

2009-09-08T19:44:19Z

KavaXtreme: New page: My name is Sam, and I've been using Joomla heavily since the start in 2005. In particular, I do a lot of Joomla template work as [http://www.sitecoffee.com/ my day job]. I'm also the creat...

Talk:Page Class Suffix

2009-09-08T19:09:28Z

KavaXtreme: /* Could you write a Tips & Techinques article about this? */

Talk:Page Class Suffix

2009-09-07T20:40:19Z

KavaXtreme: /* Cascading Page Classes */ new section