Auto class or id for body tag

Permalink 2 users found helpful
I am wanting to add a unique class or id name to each page's body tag - so that I can apply unique styles on a per page basis.

Can anyone help me with this? Such as to have the script auto pull the current page's id number or page slug so that I can add it into a header.php file for the body tag?

Thanks,

(Sidenote, I could potentially try to use this:

http://www.concrete5.org/community/forums/customizing_c5/header-nav...

to figure it out, but the output from this is a page name which does not work so well when page names are more than one word - output is something like "About Us" rather than a slug like this "about_us".)

uswebdesigner
View Replies: View Best Answer
aghouseh replied on at Permalink Reply
aghouseh
I typically do something like this.

<?php
$th = Loader::helper('text');
$nh = Loader::helper('navigation');
$path = 'path' . $th->sanitizeFileSystem($nh->getLinkToCollection($c));
$pagetype = ($pth = $c->getCollectionTypeHandle()) ? $pth : 'view';
?>
<body id="<?php echo $path; >" class="<?php echo $pagetype; ?>">


Hope that helps!
mhawke replied on at Permalink Reply
mhawke
I'm not sure if this is what you are going for but I just tried it with my own site and I like how it works. It gives you some predictable control over the styles you apply to specific pages.

Add this to your header code:

<body class="<?php echo $c->getCollectionAttributeValue('body_class') ?>">

Create a 'Text' page attribute called "body_class".

Define your unique styles in your css and then use the page properties to 'assign' that unique style through the body_class attribute's value.

Clear as mud?
uswebdesigner replied on at Permalink Reply
uswebdesigner
Thanks mhawke. I appreciate that option - and - ideally, I would love to make it work so that the code will just pull a unique variable per page and auto insert it so that I do not have to go in and create an attribute for each page. Seems like it could be don and would save a ton of time - which we are always looking to do :)

And, if not, I will use your approach, and again, appreciate it.
aghouseh replied on at Permalink Reply
aghouseh
Yeah, sorry if I didn't explain my code up there.

That will put a unique ID on each page based on the URL:

http://yoursite.com/about/contact/... with a pagetype of "right_sidebar" will output this:

<body id="path-about-contact" class="right_sidebar">


That would allow you to automatically target specific pages. You could also do it based on the cID for the given page with $c->getCollectionID();
mhawke replied on at Permalink Best Answer Reply
mhawke
How about this:

<?php
$th = Loader::helper('text');
$class = $th->sanitizeFileSystem($c->getCollectionName(), $leaveSlashes=false);
?>
<body class="<?php print $class ?>">

This returns "Products-Services" as the class for a page called "Products & Services"
uswebdesigner replied on at Permalink Reply
uswebdesigner
Sidenote.

I have been trying to accomplish something similar by adding class names to each nav item for custom styling as well.

I have it working somewhat via this post,

http://www.concrete5.org/community/forums/customizing_c5/header-nav...

but the output is something like, "facilities & services" rather than facilities_services".

Any chance you feel to extend the help with that?

Either way, thanks for your help here.
milkmen replied on at Permalink Reply
milkmen
Perfect. Just what I needed! Is there a standard practice as far as where to put global PHP functions like this?
mhawke replied on at Permalink Reply
mhawke
Usually a theme has an 'elements' folder containing a 'header.php' file so I would put it in there but if your theme doesn't have such a file, then just make sure it gets called before the <body class=...> tag.
misam replied on at Permalink Reply
Nice – Just what i looked for! Many thanx :)
uswebdesigner replied on at Permalink Reply
uswebdesigner
Thanks to both aghouseh and mhawke. Both answers were helpful and I actually combined both to create what would serve me best, and put the code below for others to use.

aghouseh - I love the idea of adding in the pagetype, which I used. I personally would want to add dashes in between the parts of the path output, (ie. path-folder-filename) and did not know how to add them in. Also, for anyone trying out that code you provided, there is a missing ? in this part needing to be added

<?php echo $path; ?>


But really, I am grateful for your code.

mhawke - you nailed it for what I wanted, a simple page name for a path. I don't expect to have duplicate page names and my client may move the pages around and so I would not want the path in there in case they did that, resulting in the id changing and the styles suddenly not being applied.

For anyone else, I used this:

<?php
$th = Loader::helper('text');
$page = $th->sanitizeFileSystem($c->getCollectionName(), $leaveSlashes=false);
$pagetype = ($pth = $c->getCollectionTypeHandle()) ? $pth : 'view';
?>
<body id="<?php echo $page; ?>" class="<?php echo $pagetype; ?>">
lucasschirm replied on at Permalink Reply
Hi',

based on this post i made my own function and it had work fine for me, i will put it on above and if i can help anyone to understand, made contact with.

function body_class($c) {
    $bc = '';
    $th = Loader::helper('text');
    $nh = Loader::helper('navigation');
    $path = 'path' . $th->sanitizeFileSystem($nh->getLinkToCollection($c));
    $pagetype = ($pth = $c->getCollectionTypeHandle()) ? $pth : 'view';
    $bc.= $pagetype;
    $categories = strtolower(preg_replace('/^\s+|\n|\r|\s+$/m', " ", $c->getCollectionAttributeValue('blog_category')));
    if (!empty($categories))
        $bc.= ' ' . $categories;
    $tags = strtolower(preg_replace('/^\s+|\n|\r|\s+$/m', " ", $c->getCollectionAttributeValue('tags')));
    if (!empty($tags))
        $bc.= ' ' . $tags;
    if (isset($_GET['akID']['14'])) {
        foreach ($_GET['akID']['14']['atSelectOptionID'] as $ak) {



The nice result can be see on:http://www.cliqueagosto.com.br/receitas/fritada-de-legumes-com-peit...

Look for <body> on source code.