Add a unique body class?

Questions and answers about ShopSite Custom Templates

Add a unique body class?

Postby Kapitol » Thu Jun 07, 2012 2:00 pm

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.
Kapitol
 
Posts: 52
Joined: Mon May 14, 2012 10:26 pm

Re: Add a unique body class?

Postby Jim » Thu Jun 07, 2012 2:40 pm

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 --]"
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah

Re: Add a unique body class?

Postby Kapitol » Thu Jun 07, 2012 3:54 pm

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>
Kapitol
 
Posts: 52
Joined: Mon May 14, 2012 10:26 pm

Re: Add a unique body class?

Postby Jim » Thu Jun 07, 2012 8:12 pm

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.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah


Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 113 guests