-
MODX Staff
- 10,725 Posts
This kind of task is exactly what template variables were designed for; to create regions of your template that can vary by page, or even by section (when combined with @INHERIT binding functionality).
I do this sort of thing all the time (add specific CSS to pages based on a TV value or some other variable), and usually I use a snippet in the head of my template that returns the appropriate style code. You can also use PHx or a TV with scripted output, a snippet that calls the regClientCSS function, etc. The snippet code provided by doze above definitely works, so if you can tell us exactly what error or problem you’re having maybe we can help you figure out what to do differently.
IThanks all; I created a snippet with the php code and placed it in the head section of the template - and exactly nothing happened when previewed. I’ve dodged using TVs - The problem I’m having with the TVs is I don’t know how to apply the code Doze showed me. I’m feeling pretty dense. I’m not clear on where ithe code goes. Do I create a snippet with it, and then put that snippet into a TV, which I then call in the template html??? If I could see the usage of it one time I think i could go from there.
Thanks for your help,
Hal D
"Today’s headlines are nothing more than whispers of history"
Don’t feel dense; sometimes we all just have to bang our heads into something repeatedly until it finally yields.
I personally don’t much like the regClientCSS function (because I prefer to add my own scripts and CSS to templates), so I would replace the last line in doze’s snippet code with:
return ’<style type="text/css">’."\n".$output."\n</style>";
Then add [[yourSnippetName]] just before the </head> tag in your template. You should see the default CSS code inserted in the page source of all documents not specified in the case statement, and you can change those for the documents that you want to have different code. There are no TVs needed if you do it this way.
Oh - there is an even easier way if you want to use TVs instead of switching by the document id. Just create a text field TV with a default value of logo1.jpg (or whatever your default image background is). Then add
<style type="text/css">
div#branding { background: url(images/[*yourTVName*])no-repeat center; }
</style>
to your templates. You’ll need to change this value for the documents that you want to have different backgrounds, but that’s pretty straightforward.
Zap;
I tried both ways and got no image. To try and trouble shoot this whole thing, I did the following:
With this background line in the regular css file, I get a logo image.
#branding {
width: auto;
height: 300px;
background:url(images/logo1.jpg)no-repeat;
}
Next I created a TV as suggested;
Next I inserted the TV name in the code fragment and pasted it above <head>:
<style type="text/css">
div#branding { background: url([*tvLogoImage*]) no-repeat center; }
</style>
This produces no image. Since this is in the template not the css file, wouldn’t the url be from the base url? So I added the base url and Ta Da!
<style type="text/css">
div#branding { background: url([(base_url)]assets/templates/cix/images/[*tvLogoImage*])no-repeat center; }
</style>
Now we have an image. The php file still not working for me though. Could the url be the problem? I’ll play around with it when I get a chance.
Joy!
Hal D
"Today’s headlines are nothing more than whispers of history"
Zap; That was it. As soon as I changed the url in the php code - Doze’s snippet worked very well.
<?php
$curPageNum = $modx->documentIdentifier;
switch($curPageNum){
case 1:
$output=’div#branding { background: url([(base_url)]assets/templates/cix/images/logo1.jpg)no-repeat center;}’;
break;
case 65:
$output=’div#branding { background: url[(base_url)]assets/templates/cix/(images/logo2.jpg)no-repeat center;}’;
break;
case 47:
$output=’div#branding { background: url([(base_url)]assets/templates/cix/images/logo3.jpg)no-repeat center;}’;
break;
case 33:
$output=’div#branding { background: url([(base_url)]assets/templates/cix/images/logo4.jpg)no-repeat center;}’;
break;
default: // if you want a default header?
$output=’div#branding { background: url([(base_url)]assets/templates/cix/images/logo1.jpg)no-repeat center;}’;
}
return ’<style type="text/css">’."\n".$output."\n</style>";
?>
Thanks to everyone that gave their time and helped. Perhaps it will be useful for someone else.
Cheers,
Hal D
"Today’s headlines are nothing more than whispers of history"
Hi hald, please use [ code ][ / code] (without spaces) tags around the code, it makes it easy to identify and read.
Thanks
Zi; OK, I didn’t realize there was a format to show code in posts. I’ll take care to do it right from now on.
Cheers’
Hal D
"Today’s headlines are nothing more than whispers of history"
Glad you figured it out. I thought that the code was not being inserted into your documets, not that it was but the image wasn’t showing up. You’re right that CSS in the document head assumes a base href of the document instead of the CSS file (unless you have a base href tag, of course).
