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".)
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".)
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?
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?
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.
And, if not, I will use your approach, and again, appreciate it.
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:
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();
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();
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"
<?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"
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.
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.
Perfect. Just what I needed! Is there a standard practice as far as where to put global PHP functions like this?
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.
Nice – Just what i looked for! Many thanx :)
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
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:
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:
This is just what I was looking for. Using this in all my custom C5 projects from now on.
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.
The nice result can be see on:http://www.cliqueagosto.com.br/receitas/fritada-de-legumes-com-peit...
Look for <body> on source code.
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) {
Viewing 15 lines of 35 lines. View entire code block.
The nice result can be see on:http://www.cliqueagosto.com.br/receitas/fritada-de-legumes-com-peit...
Look for <body> on source code.
Hope that helps!