Different Header Images on different pages

Permalink
Hello Everyone. Hope this has found itself in the correct area.

Started making my first webpage in C5, having come from a background which includes no programming experiance at all!

I would like to have different images in the header for different pages. At the moment I have acheived this by having four different copies of the same theme but with a different header image specified in the main.css.

It works but it seems like a seiously clumsy way of doing things. Is there a way to have different header images being called by specific pages?

Thanks in advance,
J

 
marmalade replied on at Permalink Reply
marmalade
There are probably many ways to achieve this but the way I would do it is with CSS. In your templates (view.php, full, sidebar etc) change the body tag to:

<body id="<?php
$page = Page::getCurrentPage();
echo strtolower($page->getCollectionHandle());
?>page">

This will give the body of each page an id which you can then identify with CSS:
body#blogpage div#header-right{
background : url('images/image1.gif');
}

body#aboutpage div#header-right{
background : url('images/image2.gif');
}

Hope that helps,
Jon.
particleastro replied on at Permalink Reply
Hello Jon,
Thats a great response, thanks. The theme Im using at the moment is quite old and only has a main.css and a couple of php files describing the header and footer, nothing more.

Ive had a look through the rigidlight theme Ive also got installed and its much closer to what you described (with no main.css). Just to clarify though, do you mean writing a separate css file to handle calling the separate images?

If thats the case Im gunna get some experience tinkering with the simple theme first, then move on to bigger and better things later.

Regards,
J
marmalade replied on at Permalink Reply
marmalade
I think it's better practice to create your own CSS file and include this AFTER all the others, that way you can override the 'default' styles for that theme. The benefits in doing it this way means if you ever want to update the theme with a newer version, you know you aren't going to lose all your modifications you made to the 'base' styling.

I learnt by tinkering and reading the various articles on this site - it's the best way.

Good luck!
Jon.
drewR replied on at Permalink Reply
drewR
Hi particleastro,
What theme are you using?
particleastro replied on at Permalink Reply
Hello Drew R,
I am using the freshmedia theme I found on the csx website. Ive pretty much totally changed it from the original layout, but then thats the fun of C5 right?

I added another header intro block in main.css which is the same size as the header image so now I can change the image through the C5 edit screen. Still seems a bit of a clumsy way of doing things. Ill give the more advanced stuff a try when Im a bit more competent at coding.

Incidentally, is it 'ok' from an editing point of view to stack multiple blocks on top of one another, so lets say you could have a background image in an image block, then a flash file on top, or something?

Regards,
J