Different "body" id tag
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
- silviuks
- Joomla! Apprentice
- Posts: 12
- Joined: Tue Jul 10, 2007 9:32 pm
- Contact:
Different "body" id tag
Hello everyone,
I have searched all over the net but i could not find anything regarding my problem. So... I have to develop a site which has different body id property for different pages. For example, if I navigate to "Contact" page it must be: "<body id='contact'>", but if I go to content it will be "<body id='content'>".
Is there any solution beside checking $_GET["option"] and use switch..case statement?
Thank you very much for your answers.
I have searched all over the net but i could not find anything regarding my problem. So... I have to develop a site which has different body id property for different pages. For example, if I navigate to "Contact" page it must be: "<body id='contact'>", but if I go to content it will be "<body id='content'>".
Is there any solution beside checking $_GET["option"] and use switch..case statement?
Thank you very much for your answers.
- dam-man
- Joomla! Exemplar
- Posts: 7961
- Joined: Fri Sep 09, 2005 2:13 pm
- Location: The Netherlands
- Contact:
Re: Different "body" id tag
Then you have to change the complete templating system of Joomla.
I don't think you want to do that. When Joomla is going to update you will get problems again.
I don't think you want to do that. When Joomla is going to update you will get problems again.
Robert Dam - Joomla Forum Moderator
Dutch Boards | Joomla Coding Boards | English Support Boards
Dutch Boards | Joomla Coding Boards | English Support Boards
- silviuks
- Joomla! Apprentice
- Posts: 12
- Joined: Tue Jul 10, 2007 9:32 pm
- Contact:
Re: Different "body" id tag
well ... i was going to check this on /templates/my_template/index.php ....
also i was thinking to add a new field (bodyid) in the menu creation form and then to check that value for every page.
also i was thinking to add a new field (bodyid) in the menu creation form and then to check that value for every page.
- kor
- Joomla! Enthusiast
- Posts: 177
- Joined: Wed Feb 08, 2006 5:33 pm
- Location: amsterdam, holland
- Contact:
Re: Different "body" id tag
Hi Silviuks,
I am looking for exactly the same.
This used to work in earlier versions of Joomla! 1.5 but not anymore:
I would like to get it to work again. Maybe someone can help?
~kor
I am looking for exactly the same.
This used to work in earlier versions of Joomla! 1.5 but not anymore:
Code: Select all
<?php
$menu = &JMenu::getInstance();
$active = $menu->getActive();
?>
<body id="<?php echo($active->alias); ?>">
~kor
- vredeling
- Joomla! Apprentice
- Posts: 29
- Joined: Fri Nov 18, 2005 3:32 pm
- Location: Amsterdam, The Netherlands
- Contact:
Re: Different "body" id tag
Hi Kor,
if you want to use the (menu defined) url alias as body ID, this should do it:
I tested it in Joomla 1.5.3.
if you want to use the (menu defined) url alias as body ID, this should do it:
Code: Select all
<?php
$menu = &JSite::getMenu();
$active = $menu->getActive();
?>
<body id="<?php print $active->alias; ?>">
- kor
- Joomla! Enthusiast
- Posts: 177
- Joined: Wed Feb 08, 2006 5:33 pm
- Location: amsterdam, holland
- Contact:
Re: Different "body" id tag
Bas, you are the greatest!
I works!
Thank you very much.
~kor
I works!
Thank you very much.
~kor
-
- Joomla! Fledgling
- Posts: 2
- Joined: Sat May 03, 2008 10:58 pm
Re: Different "body" id tag
Thanks, this is exactly what I was looking for. Is there a way to have the body ID be the parent page? Right now the body ID gets pulled in as the name of my subpage rather than the parent.
Thanks,
Manoj
Thanks,
Manoj
- vredeling
- Joomla! Apprentice
- Posts: 29
- Joined: Fri Nov 18, 2005 3:32 pm
- Location: Amsterdam, The Netherlands
- Contact:
Re: Different "body" id tag
This method is pretty flexible cause it allows you to assign the ID in the menu manager. Just give the menu item the alias you need and style accordingly. If you wish to have a parent relation you can use consistent aliases for parent and child. Another method would be to only parse a substring of the alias given.
For instance:
parent page alias = section1-index
child page alias = section1-page1
You could split the string into logical sections using the "-" sign as delimiter. And style parent and child pages consistently while retaining logical page id's and aliases.
This code would look something like this:
There is a weakness to this method however. Pages that are not navigated to from the menu structure have no menu-alias, and consequently no ID.
Nothing a little creativity can't solve though.
For instance:
parent page alias = section1-index
child page alias = section1-page1
You could split the string into logical sections using the "-" sign as delimiter. And style parent and child pages consistently while retaining logical page id's and aliases.
This code would look something like this:
Code: Select all
<?php
$menu = &JSite::getMenu();
$active = $menu->getActive();
$alias = explode('-',$active->alias);
?>
<body id="<?php print $alias[0]; ?>" class="<?php print $alias[1]; ?>">
----
output for given examples:
<body id="section1" class="index">
<body id="section1" class="page1">
Nothing a little creativity can't solve though.
-
- Joomla! Fledgling
- Posts: 2
- Joined: Sat May 03, 2008 10:58 pm
Re: Different "body" id tag
Great, thanks again.
Also, is there a way to get the category ID? Similar to ItemId but I'd like to fetch the ID of the category that the article is in and store that in a variable for later reference.
Also, is there a way to get the category ID? Similar to ItemId but I'd like to fetch the ID of the category that the article is in and store that in a variable for later reference.
- kor
- Joomla! Enthusiast
- Posts: 177
- Joined: Wed Feb 08, 2006 5:33 pm
- Location: amsterdam, holland
- Contact:
Re: Different "body" id tag
And to avoid an empty (non-validating) id-tag like so:
(An example: the search results page does not have a menu item assigned to it and would end up with an empty id attribute.)
use this:
Code: Select all
<body id="">
use this:
Code: Select all
<body<?php
if (!empty($active->alias)) {
echo " id=\"$active->alias\"";} ?>>
- vredeling
- Joomla! Apprentice
- Posts: 29
- Joined: Fri Nov 18, 2005 3:32 pm
- Location: Amsterdam, The Netherlands
- Contact:
Re: Different "body" id tag
Your question poses a problem: the category ID of which article? On a single article page you could fetch the catid of the article. But if you have a page with multiple articles or a page with articles from different categories you cannot determine a single catid.manoj382 wrote:Also, is there a way to get the category ID? Similar to ItemId but I'd like to fetch the ID of the category that the article is in and store that in a variable for later reference.
There are always solutions but if you want to create a clean and valid body id for each and every page in your joomla installation you quickly run into problems:
- there are many different kinds of pages (so you wont be able to get a section id on a contacts pages for instance)
- you need a unique identifier but there are multiple ways to navigate to the same pages and one page can be in different parts of your site (so do you assign an id based on page-content or on navigation-path?)
- you need to get something interpretable, not a superunique id that just doesn't make sense to style
- ... etc
Sorry, this answer is way too long. The bottom line is:
manually put the category in the url alias and save yourself a lot of headaches.
-
- Joomla! Apprentice
- Posts: 7
- Joined: Tue Apr 22, 2008 9:25 pm
Re: Different "body" id tag - Hot Property component
I'm not sure if this is a similar issue, but if you check out the video link below, maybe someone has an idea on how to help me? What I've done is associated a component to the home page. An ID has been automatically assigned to the page. However, when I click to view a detail property from that page, the ID is shared by the detail page and the text on the home page still appears. I'm working In Joomla 1.0.15. The component is from Hot Property. (I've posted the same question on the Hot Property forum without luck.)
http://www.screencast.com/t/c1CawlmQt
http://www.screencast.com/t/c1CawlmQt
- jalil
- Joomla! Guru
- Posts: 925
- Joined: Wed Jul 04, 2007 4:54 am
- Location: Kuala Lumpur, Malaysia
- Contact:
Re: Different "body" id tag
use two templates ( a copy of the first will do ) and assign the
details to the second template. make the first default, the second using
the copied template. the copied template can have a totally new look,
and a set of body ids of its own, so you have great flexibilty in customising it.
( since it is now driven by a separate css file )
details to the second template. make the first default, the second using
the copied template. the copied template can have a totally new look,
and a set of body ids of its own, so you have great flexibilty in customising it.
( since it is now driven by a separate css file )
-
- Joomla! Ace
- Posts: 1334
- Joined: Sat Oct 21, 2006 8:53 am
Re: Different "body" id tag
Has anyone bottomed this out? This is such an obvious way of personalising each page I would have though Joomla! would have built it in (or is it a templating issue).
Thanks for your time.
- Chris Davenport
- Joomla! Ace
- Posts: 1370
- Joined: Thu Aug 18, 2005 8:57 am
- Location: Shrewsbury, Shropshire, United Kingdom
Re: Different "body" id tag
Alternatively, you could try using the menu page class suffix field instead of the menu alias. Add something like this instead of your body tag:
I think it makes more sense to use the class suffix field, which is intended for styling purposes, rather than the alias field, which is intended for SEO.
Regards,
Chris.
Code: Select all
<?php
$menu =& JSite::getMenu();
$active = $menu->getActive();
$params = $menu->getParams( $active->id );
$class = $params->get( 'pageclass_sfx' );
?>
<body<?php if ($class) echo ' class="' . $class . '"'; ?>>
Regards,
Chris.
Chris Davenport
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
-
- Joomla! Ace
- Posts: 1334
- Joined: Sat Oct 21, 2006 8:53 am
Re: Different "body" id tag
Apologies for being so thick, but exactly where would this code go?
Thanks for your time.
- Chris Davenport
- Joomla! Ace
- Posts: 1370
- Joined: Thu Aug 18, 2005 8:57 am
- Location: Shrewsbury, Shropshire, United Kingdom
Re: Different "body" id tag
Look for <body> near the top of your template index.php file and replace it with the code given.
Regards,
Chris.
Regards,
Chris.
Chris Davenport
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/
-
- Joomla! Ace
- Posts: 1334
- Joined: Sat Oct 21, 2006 8:53 am
Re: Different "body" id tag
That doesn't work! My template index.php has "<body>". If I replace that I get "<body style="font-size: 100%";">". Is something overwriting the index.php generated code?
Thanks for your time.
-
- Joomla! Ace
- Posts: 1334
- Joined: Sat Oct 21, 2006 8:53 am
Re: Different "body" id tag
Got it, sorry. I must put a page class suffix into the Parameters (System) of the menu item. I wish I new what produced the inline style though as I'd like to move that now to the CSS. Any clue welcome about that (e.g. Beez template).
Thanks for your time.
- koolie
- Joomla! Intern
- Posts: 86
- Joined: Mon Jul 10, 2006 8:57 pm
- Location: Wiscosin, USA
- Contact:
Re: Different "body" id tag
Thank for the code vredeling. I used your code with a slight tweak.vredeling wrote:Hi Kor,
if you want to use the (menu defined) url alias as body ID, this should do it:
I tested it in Joomla 1.5.3.Code: Select all
<?php $menu = &JSite::getMenu(); $active = $menu->getActive(); ?> <body id="<?php print $active->alias; ?>">
Code: Select all
$menu = &JSite::getMenu();
$active = $menu->getActive();
$body_id = " id='".$active->alias."'";
<body<?=$body_id;?>>
-
- Joomla! Apprentice
- Posts: 6
- Joined: Wed Nov 12, 2008 3:17 am
Re: Different "body" id tag
I too have wandered over the net, seeking a solution.
I am by no means a programmer, but this works for my situation.
This will get the alias for the top menu item for your content path:
I am by no means a programmer, but this works for my situation.
This will get the alias for the top menu item for your content path:
Code: Select all
<?php
$menu =& JSite::getMenu();
$active = $menu->getActive();
$class = extractpath($active->route);
function extractpath($string){
preg_match('/^[a-zA-Z0-9\-_]+/',$string,$m);
return $m[0];
}
?>
<body<?php if ($class) echo ' class="' . $class . '"'; ?>>
-
- I've been banned!
- Posts: 2
- Joined: Sat Nov 15, 2008 1:27 pm
Re: Different "body" id tag
hi!
the above solution seems to be for 1.5
how yould i solve that issue in joomla 1.0?
the above solution seems to be for 1.5
how yould i solve that issue in joomla 1.0?
-
- Joomla! Apprentice
- Posts: 7
- Joined: Fri Jun 12, 2009 3:41 am
Re: Different "body" id tag
It has taken me days to find this solution.
THANK YOU SO MUCH!!
This should be a core funcationality of joomla to help in creating more usable websites.
As a webdesigner I am finding joomla quite a bit harder to learn purely for the way in the in which better usability sites are structured.
thankyou again guys.
THANK YOU SO MUCH!!
This should be a core funcationality of joomla to help in creating more usable websites.
As a webdesigner I am finding joomla quite a bit harder to learn purely for the way in the in which better usability sites are structured.
thankyou again guys.
- vredeling
- Joomla! Apprentice
- Posts: 29
- Joined: Fri Nov 18, 2005 3:32 pm
- Location: Amsterdam, The Netherlands
- Contact:
Re: Different "body" id tag
Actually, one could argue that effective use of both seo urls and html classes share a common requirement: they should be semantically correct. In everyday terms: the alias field should be used to describe the contents of the page. A class attached to any html tag should do the same thing: describe what its contents are.I think it makes more sense to use the class suffix field, which is intended for styling purposes, rather than the alias field, which is intended for SEO.
Since you never use urls like: http://www.example.com/articles/color1 you shouldn't use classes like that either (ie: <p class="color1">this is a red paragraph</p>).
As a front-end developer you have to make a choice here: do you require the use of semantically correct urls and classes or not? If you do, you can boost both you search engine rank and your body styling in one go. If you don't you have a lot more versatility in naming your classes.
- trek66
- Joomla! Apprentice
- Posts: 28
- Joined: Wed Aug 22, 2007 1:51 pm
- Location: Boston, MA, USA
- Contact:
Re: Different "body" id tag
This is great stuff, exactly what I was looking for, I need to customize a site using this type of method. Thanks!
High Rock Media Web Development
http://www.highrockmedia.com
http://www.highrockmedia.com
- kavaXtreme
- Joomla! Intern
- Posts: 74
- Joined: Tue Dec 13, 2005 9:56 pm
- Location: Oregon
- Contact:
Re: Different "body" id tag
Some collected wisdom on this topic (using the page class suffix approach):
http://docs.joomla.org/Using_the_Page_C ... plate_Code
http://docs.joomla.org/Using_the_Page_C ... plate_Code
- Bible Yellow Pages: http://www.bibleyp.com
- trek66
- Joomla! Apprentice
- Posts: 28
- Joined: Wed Aug 22, 2007 1:51 pm
- Location: Boston, MA, USA
- Contact:
Re: Different "body" id tag
What's interesting is I started to work with Magento recently and a similar functionality is built in to the Magento core. So it was trivial in Magento for example to change header background images with CSS based on what section of the website the user is currently on.
Nice to have something like this in Joomla even if its just an add on to your template. This allows for some nice granular customization without having to actually switch to a slightly altered version of your template say if all you want to do is change the header image or some CSS for a specific page of your site but at the same time don't want to go out and manage a module or plugin that is used for that purpose.
Nice to have something like this in Joomla even if its just an add on to your template. This allows for some nice granular customization without having to actually switch to a slightly altered version of your template say if all you want to do is change the header image or some CSS for a specific page of your site but at the same time don't want to go out and manage a module or plugin that is used for that purpose.
High Rock Media Web Development
http://www.highrockmedia.com
http://www.highrockmedia.com
-
- Joomla! Fledgling
- Posts: 1
- Joined: Fri Oct 12, 2007 4:30 am
Re: Different "body" id tag
Thanks... that worked nicely for me. Just what I needed.Chris Davenport wrote:Alternatively, you could try using the menu page class suffix field instead of the menu alias. Add something like this instead of your body tag:I think it makes more sense to use the class suffix field, which is intended for styling purposes, rather than the alias field, which is intended for SEO.Code: Select all
<?php $menu =& JSite::getMenu(); $active = $menu->getActive(); $params = $menu->getParams( $active->id ); $class = $params->get( 'pageclass_sfx' ); ?> <body<?php if ($class) echo ' class="' . $class . '"'; ?>>
Regards,
Chris.
-
- Joomla! Explorer
- Posts: 268
- Joined: Wed Dec 12, 2007 2:40 am
- Location: Frisco, CA
Re: Different "body" id tag
Does anyone know how to call the article alias (not the menu alias)? The original method has always worked for me, but now I have a site where the individual articles of a blog need different styling then the parent blog page (the menu alias returns the same for both). I'm wondering if there's a way to accomplish it in a cleaner way than grabbing the full url and parsing.
-
- Joomla! Intern
- Posts: 64
- Joined: Sun May 02, 2010 9:50 pm
Re: Different "body" id tag
Article id and alias can be usable classes too.
This code above <!DOCTYPE> and <html> tag
and this echo in <body> tag
gives you id-(Article id):(article title alias) ex: id-1:joomla-title which you cant use as css selector because of ":" - this colon, so i`ve replaced the damn colon, and all works great!
The right code is:
...and now, you can youse article id, and article title alias as your class selector.
This code above <!DOCTYPE> and <html> tag
Code: Select all
<?php $id = (isset($_GET['id'])) ? $_GET['id'] : null ; ?>
Code: Select all
<body class="id-<?php echo $id; ?>"
The right code is:
Code: Select all
<?php
$id = (isset($_GET['id'])) ? $_GET['id'] : null ;
$id = str_replace(':', ' ', $id);
?>
<!DOCTYPE html etc >
<html>
<head>
<body class="id-<?php echo $id; ?>">