Different "body" id tag

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
User avatar
silviuks
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Tue Jul 10, 2007 9:32 pm
Contact:

Different "body" id tag

Post by silviuks » Mon Apr 07, 2008 6:29 am

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.

User avatar
dam-man
Joomla! Exemplar
Joomla! Exemplar
Posts: 7961
Joined: Fri Sep 09, 2005 2:13 pm
Location: The Netherlands
Contact:

Re: Different "body" id tag

Post by dam-man » Wed Apr 09, 2008 12:53 pm

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.
Robert Dam - Joomla Forum Moderator
Dutch Boards | Joomla Coding Boards | English Support Boards

User avatar
silviuks
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Tue Jul 10, 2007 9:32 pm
Contact:

Re: Different "body" id tag

Post by silviuks » Wed Apr 09, 2008 1:14 pm

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.

User avatar
kor
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Wed Feb 08, 2006 5:33 pm
Location: amsterdam, holland
Contact:

Re: Different "body" id tag

Post by kor » Fri Apr 25, 2008 11:14 am

Hi Silviuks,

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); ?>">
I would like to get it to work again. Maybe someone can help?

~kor

User avatar
vredeling
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Fri Nov 18, 2005 3:32 pm
Location: Amsterdam, The Netherlands
Contact:

Re: Different "body" id tag

Post by vredeling » Fri Apr 25, 2008 12:00 pm

Hi Kor,

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; ?>">
I tested it in Joomla 1.5.3.

User avatar
kor
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Wed Feb 08, 2006 5:33 pm
Location: amsterdam, holland
Contact:

Re: Different "body" id tag

Post by kor » Fri Apr 25, 2008 12:14 pm

Bas, you are the greatest!
I works!
Thank you very much.
~kor

manoj382
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sat May 03, 2008 10:58 pm

Re: Different "body" id tag

Post by manoj382 » Sat May 03, 2008 11:01 pm

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

User avatar
vredeling
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Fri Nov 18, 2005 3:32 pm
Location: Amsterdam, The Netherlands
Contact:

Re: Different "body" id tag

Post by vredeling » Sat May 03, 2008 11:42 pm

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:

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">
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.

manoj382
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sat May 03, 2008 10:58 pm

Re: Different "body" id tag

Post by manoj382 » Sun May 04, 2008 12:46 am

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.

User avatar
kor
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Wed Feb 08, 2006 5:33 pm
Location: amsterdam, holland
Contact:

Re: Different "body" id tag

Post by kor » Sun May 04, 2008 2:32 pm

And to avoid an empty (non-validating) id-tag like so:

Code: Select all

<body id="">
(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<?php
if (!empty($active->alias)) { 
echo " id=\"$active->alias\"";} ?>>

User avatar
vredeling
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Fri Nov 18, 2005 3:32 pm
Location: Amsterdam, The Netherlands
Contact:

Re: Different "body" id tag

Post by vredeling » Sun May 04, 2008 3:02 pm

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.
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.

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
Think about this issue and you quickly run into too many variables. That's why I think solving this problem via the url alias is a nice way to go about it.
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.

Novelville
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Apr 22, 2008 9:25 pm

Re: Different "body" id tag - Hot Property component

Post by Novelville » Tue Sep 09, 2008 11:54 pm

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

User avatar
jalil
Joomla! Guru
Joomla! Guru
Posts: 925
Joined: Wed Jul 04, 2007 4:54 am
Location: Kuala Lumpur, Malaysia
Contact:

Re: Different "body" id tag

Post by jalil » Mon Oct 13, 2008 11:13 pm

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 )

cantthinkofanickname
Joomla! Ace
Joomla! Ace
Posts: 1334
Joined: Sat Oct 21, 2006 8:53 am

Re: Different "body" id tag

Post by cantthinkofanickname » Mon Oct 27, 2008 7:58 pm

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.

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1370
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: Different "body" id tag

Post by Chris Davenport » Wed Jan 21, 2009 11:51 pm

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:

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 . '"'; ?>>
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.
Chris Davenport

Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/

cantthinkofanickname
Joomla! Ace
Joomla! Ace
Posts: 1334
Joined: Sat Oct 21, 2006 8:53 am

Re: Different "body" id tag

Post by cantthinkofanickname » Thu Jan 22, 2009 6:35 pm

Apologies for being so thick, but exactly where would this code go?
Thanks for your time.

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1370
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: Different "body" id tag

Post by Chris Davenport » Thu Jan 22, 2009 11:45 pm

Look for <body> near the top of your template index.php file and replace it with the code given.

Regards,
Chris.
Chris Davenport

Davenport Technology Services http://www.davenporttechnology.com/
Lion Coppice http://www.lioncoppice.org/

cantthinkofanickname
Joomla! Ace
Joomla! Ace
Posts: 1334
Joined: Sat Oct 21, 2006 8:53 am

Re: Different "body" id tag

Post by cantthinkofanickname » Fri Jan 23, 2009 2:16 pm

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.

cantthinkofanickname
Joomla! Ace
Joomla! Ace
Posts: 1334
Joined: Sat Oct 21, 2006 8:53 am

Re: Different "body" id tag

Post by cantthinkofanickname » Fri Jan 23, 2009 2:24 pm

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.

User avatar
koolie
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Jul 10, 2006 8:57 pm
Location: Wiscosin, USA
Contact:

Re: Different "body" id tag

Post by koolie » Fri Mar 20, 2009 3:31 pm

vredeling wrote:Hi Kor,

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; ?>">
I tested it in Joomla 1.5.3.
Thank for the code vredeling. I used your code with a slight tweak.

Code: Select all

$menu = &JSite::getMenu();
$active = $menu->getActive();
$body_id = " id='".$active->alias."'";

<body<?=$body_id;?>>
Pat
"and it's the ocean flowing in our veins"
http://www.patrickkuhl.com

proximity2008
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Nov 12, 2008 3:17 am

Re: Different "body" id tag

Post by proximity2008 » Wed Apr 08, 2009 10:55 am

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:

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 . '"'; ?>>

kathkirtt
I've been banned!
Posts: 2
Joined: Sat Nov 15, 2008 1:27 pm

Re: Different "body" id tag

Post by kathkirtt » Fri Apr 10, 2009 4:32 pm

hi!
the above solution seems to be for 1.5
how yould i solve that issue in joomla 1.0?

karlos_jackel
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Jun 12, 2009 3:41 am

Re: Different "body" id tag

Post by karlos_jackel » Mon Jun 15, 2009 2:15 am

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.

User avatar
vredeling
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Fri Nov 18, 2005 3:32 pm
Location: Amsterdam, The Netherlands
Contact:

Re: Different "body" id tag

Post by vredeling » Mon Jul 20, 2009 2:21 pm

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.
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.
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.

User avatar
trek66
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Wed Aug 22, 2007 1:51 pm
Location: Boston, MA, USA
Contact:

Re: Different "body" id tag

Post by trek66 » Wed Aug 19, 2009 5:59 am

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

User avatar
kavaXtreme
Joomla! Intern
Joomla! Intern
Posts: 74
Joined: Tue Dec 13, 2005 9:56 pm
Location: Oregon
Contact:

Re: Different "body" id tag

Post by kavaXtreme » Sat Sep 19, 2009 11:07 pm

Some collected wisdom on this topic (using the page class suffix approach):
http://docs.joomla.org/Using_the_Page_C ... plate_Code
- Bible Yellow Pages: http://www.bibleyp.com

User avatar
trek66
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Wed Aug 22, 2007 1:51 pm
Location: Boston, MA, USA
Contact:

Re: Different "body" id tag

Post by trek66 » Sun Sep 20, 2009 4:06 pm

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.
High Rock Media Web Development
http://www.highrockmedia.com

ejurasin
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Oct 12, 2007 4:30 am

Re: Different "body" id tag

Post by ejurasin » Tue Oct 27, 2009 6:26 am

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:

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 . '"'; ?>>
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.
Thanks... that worked nicely for me. Just what I needed.

unleash.it
Joomla! Explorer
Joomla! Explorer
Posts: 268
Joined: Wed Dec 12, 2007 2:40 am
Location: Frisco, CA

Re: Different "body" id tag

Post by unleash.it » Wed Jan 05, 2011 11:57 am

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.

vbarlakoski
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Sun May 02, 2010 9:50 pm

Re: Different "body" id tag

Post by vbarlakoski » Fri Oct 07, 2011 11:31 pm

Article id and alias can be usable classes too.

This code above <!DOCTYPE> and <html> tag

Code: Select all

<?php $id = (isset($_GET['id'])) ? $_GET['id'] : null ; ?>
and this echo in <body> tag

Code: Select all

<body class="id-<?php echo $id; ?>"
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:

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; ?>">

...and now, you can youse article id, and article title alias as your class selector.


Locked

Return to “Templates for Joomla! 1.5”