adding a body ID as css hook

beat · Post by **beat** » Sat 18. Aug 2007, 08:36

I have a site with seven main navigation points. each of this seven should get a seperate header image. An easy way would be, to be able to set a body ID to have kind of a hook to add a css role to like

Code: Select all

#bodyHome #header {
	background-image: url(bgHome.gif);
}
#bodyProd #header {
	background-image: url(bgProd.gif);
}

Another way could be to have seven templates with seven different #headers, but this is not really dynamic.

However I have not found a way to add an ID to the body tag.

Is there a smart way to solve this issue?

Post by **update** » Sat 18. Aug 2007, 13:12

A dirty one:
open index.php
go to line ~140
replace the line

Code: Select all

$content['page_start'] .= '</head>'.LF.'<body>'.LF;

with

Code: Select all

$content['page_start'] .= '</head>'.LF.'<body id="'.$alias=$GLOBALS['content']['struct'][($GLOBALS['aktion'][0])]['acat_alias'].'">';' >'.LF;

The result in your html source will be:

Code: Select all

<body id="whatever_category_alias">

Now in your css you can trigger somthing:

Code: Select all

body#whatever_category_alias #my_bg_header_pic {
    background-color: #99FF66;
    background-image:none;
}

Perhaps kind of ugly, but seems to work...
Good luck
claus

EDIT is really dirty - some > too much (but is working. Perhaps some one could clean it a little bit

Post by **update** » Sat 18. Aug 2007, 13:16

BTW:
It would be nice to have the possibility to pass some rules over to the body element in the backend page structure section ---
hasn't this been possible some year ago? At least I couldn't find it...
claus

Post by **update** » Sat 18. Aug 2007, 13:59

I'm just wondering if this can be extended:
if you don't have a css rule defined for a certain alias then everything does a fallback to the standard template definition.
So passing classes and ids to the body - depending on the aliases (coming article aliases! too) you have to have exactly only one template. The rest is done within a css file...
The more I'm thinking about that the more it seems to be exciting - or am I completely on the wrong track?

Any comment on this?

claus

Post by **update** » Sat 18. Aug 2007, 14:57

I have corrected the above a little bit and added the class

Code: Select all

$content['page_start'] .= '</head>'.LF.'<body id="'.$alias=$GLOBALS['content']['struct'][($GLOBALS['aktion'][0])]['acat_alias'].'" class="'.$alias=$GLOBALS['content']['struct'][($GLOBALS['aktion'][0])]['acat_alias'].'">'.LF;

Now the result is reading

Code: Select all

<body id="test" class="test">

And this is working really cool

beat · Post by **beat** » Sat 18. Aug 2007, 20:16

Claus thanks

just came back, was away the whole day. However I will have a look at this. Seems to be what I am looking for, especially the last part. I was also thinking of having a cp, but I am not sure if this works.

my Idea is that all files in one level will get the same ID for example.

Products
-- product 1
-- product 2
-- product 3
will have a the ID bodyProducts

Services
-- service 1
-- service 2
-- service 3
will have the ID bodyServices

and so on.

I will try your solution tomorrow.

Thanks so far.

beat · Post by **beat** » Sat 18. Aug 2007, 21:54

Hi claus
just tried your solution. I guess it it is the way to it but I get for each navigation a new ID and class.

Well a class is actually not needed (not for now, but to have it makes sense) as you can trigger all css commands via the body id. what would be important is that the body id remains the same as the main navigation. for example for products and its child sides or services and its child sides.

Hope you understand my bad english, but yes this is the way.

Post by **update** » Sun 19. Aug 2007, 11:18

I get for each navigation a new ID and class.

Yes, that's a pity indeed...
This solution gathers the active level alias (only) by now, but I'm no programmer at all, so I didn't succeed in calling the main level only (the one below home) yet - had a lot of error screens while putting this one together

But while digging into it I collected some ideas about an extension to the backend to have this feature

beeing selectable via page layout / page template setup....

I hope that some really skilled ones will give a feedback on it because I still believe that it really could come in handy ...
claus

Post by **update** » Mon 20. Aug 2007, 17:41

Hey hey - just detected the new index.php of the today's trunk. There it reads:

Code: Select all

// inject body tag in case of class or id attribute
$body_inject = '<body';
if($content['body_id'] !== false) {
	if(!empty($template_default['body']['id'])) {
		$body_inject .= ' id="'.$template_default['body']['id'].$content['body_id'].'"';
	}
	if(!empty($template_default['body']['class'])) {
		$body_inject .= ' class="'.$template_default['body']['class'].$content['body_id'].'"';
	}
}
$content['page_start'] .= $body_inject.'>'.LF;

Just installing - like christmas - will have a look

claus

Post by **Oliver Georgi** » Sun 26. Aug 2007, 12:07

was made for beat's needs

Oliver

Post by **update** » Sun 4. Nov 2007, 23:57

Played a little bit with this one and here is my suggestion:
What about to have an input possibility in the backend in structure part:

Code: Select all

[] class [ _____ ]
[] id    [ _____ ]

as a possibility to put into every structure item on demand...
Then we would be able to have only one template for all our needs, steering all column numbers and each structure oriented output via css by defining some extra ids and/or classes, depending on structure levels...
And for some defaults we have the inject_body_id.php and conf.template.default.inc.
Do you get the picture? What do you think?
some 4 cents

claus

Post by **Oliver Georgi** » Mon 5. Nov 2007, 00:45

have a look at

Code: Select all

$template_default['body']['id'] = 'myid_';
$template_default['body']['class'] = '';

in conf.template_default.inc.php

I will not implement additional backend fields.

Oliver

Post by **update** » Mon 5. Nov 2007, 09:02

Oliver,
thought it over and over again this night - my post has been really short-thought...

I will not implement additional backend fields.

Had a look at your quoted code and again a look at inject_body_id.php.
As a default we have: ids based upon the main structure with a parent -> child dependency. This is cool!
What I want to try is some additional parent-child behavior within the deeper levels. I know that this could be done with the aforementioned "inject_body_id.php" - but how.
One example might explain it perhaps: At the third level there is a branch with pictures with id=20 and I want to be able to hand over some css right to this one and its childs

Might be that I'm on the wrong track, but would you mind giving an example for inject_body_id.php how this has to be defined, basically?
Thank you

Post by **Oliver Georgi** » Mon 5. Nov 2007, 09:52

sorry, no time to do so.

Oliver

Post by **Oliver Georgi** » Mon 5. Nov 2007, 10:40

Ähm, by the way - you can change these values

Code: Select all

$template_default['body']['id'] = 'myid_';
$template_default['body']['class'] = '';

at any time by overwriting these values in the structure level editor:

These custom template default are stored in template/inc_settings/template_default

Use the values you want to overwrite only. For your solution it might be:

Code: Select all

$template_default['body']['id'] = '';
$template_default['body']['class'] = 'level1 sublevel3';

Oliver