Page 1 of 1

Add a unique body class?

PostPosted: Thu Jun 07, 2012 2:00 pm
by Kapitol
Is there a function which I can apply to my templates which would generate unique body classes per page?
Something like this..
Code: Select all
<body class="[-- PAGE.Title --] [-- PAGE.Name --]"></body>


It would be sooo helpful if there was then I could avoid creating 50+ Page and Product templates which have minor changes on them.

Re: Add a unique body class?

PostPosted: Thu Jun 07, 2012 2:40 pm
by Jim
Have you tried that in your custom template? Looks like it should work to me as long as you have a style sheet included that has classes defined that match your "[-- page.title --] [-- page.name --]"

Re: Add a unique body class?

PostPosted: Thu Jun 07, 2012 3:54 pm
by Kapitol
I have and the results are:

Code: Select all
<body class="bracelets Crystal Bangle Crystal Bracelet Kits - Art and Soul Beads Crystal Bangle Crystal Bracelet Kits">
<div id="container">


The problem with this solution is that it is not linking parts together with underscores or dashes. Since it's not then it could create an issue with one word triggering a style which was not intended. It would be preferable to have something below.

Code: Select all
<body class="bracelets_crystal_bangle_crystal_bracelet_kits class_bracelets_crystal page_18">
<div id="container">


Side-note. Having a function to target a menu item with would be equally wonderful, then you could highlight which page you are on in your main navigation.
Code: Select all
.current {color:red;}
<li class="current" id="home">...</li>

Re: Add a unique body class?

PostPosted: Thu Jun 07, 2012 8:12 pm
by Jim
You could use one of the Extra product fields to contain the name with the underscores. Then instead of <body class="[-- PAGE.Title --] [-- PAGE.Name --]"></body> you would use <body class="[-- PAGE.fieldX --]"></body> where the X is the number of the field you are using.

There is also a CALL tag that you can pass template tags to a script that you have written that wiill process the tag value and return some value. You could write a script that strips the spaces and replaces them with the _ character.

You might also be able to use javascript to create a routine that will replace spaces with under scores.

Another option would be to use the page filename instead of the page name, the filename should not have a space in it anyway to be complient with web statndards so you wouldn't have to worry about spaces in the value used for the class.


However you do it just remember that you have to have the values already in a css file that will be loaded. So it would probably be easiest to use one of the extra fields and put the class that you have defined for that page into field. That way you don't have to try and do something on the fly, it will already be defined before hand.