Need to change header ?

[tobias81]

Hi there.
I want to know how i can do the easy way to change headers on my page.
On my homepage i have these menu function: Startpage, Read more about me, my xbox, Contact
When someone press ex: Contact i will have a contact picture in the header not same header on everypage i have.
How can i do to change the header page on a easy way ?

Thanks for all help

[M@rtijn]

If you are using the page_alias you can easily change backgrounds for different pages.

Code: Select all

div#header h1 a {
/* you can set your own image here */
   background: #385C72 url(images/cms/{page_alias}.png) no-repeat 0 12px; 

And then upload the different images named exactle like you page_alias. (ie. 'home.png' & 'contact.png')

[tobias81]

Were can i find page_alias ?
I use a theme called: TechBlogStyleeCMSMS.xml

[M@rtijn]

Page_alias is the name you have given to your pages (ie. 'home' & 'contact')

You'll have to search in your theme's css for the background-image in the header and edit it yourself.

[tobias81]

Here is my header code so can someone please write were and what i must change.

Code: Select all

/* begin Header */
div.Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 788px;
	height: 100px;
}


div.Header-jpeg
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 788px;
	height: 100px;
	background-image: url(/header/header.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
/* end Header */

[uniqu3]

tobias81 can you post a link to the theme or do you have a live example?

There are many different way to solve this, but it depends how your theme is built.

1. You could add in the Template:
</__body class="{$page_alias}">
Now you can do in your Stylesheet (assumed your heade image i somekind of <div> background):

body.aliasofpageone #someheaderid {
background: url(path/to/image/someimage.jpg) no-repeat;
}

body.aliasofpagetwo #someheaderid {
background: url(path/to/image/someimagetwo.jpg) no-repeat;
}

And so on.

2. Another option is if your image is simply <img src="something" /> inside the header.
Then you can do it directly in the template like:

<img src="path/to/images/header-{$page_alias}.jpg" alt="{title}" />

Now simply upload image like header-somealiasone.jpg, header-somealias-two.jpg to correct folder.

3. And on more option would be using {content_image} simply in your template.
This would give you a dropdown when editing your pages where you can select an image from, in above example in folder /uploads/header:

{content_image block='header' label='Select image from dropdown' dir='uploads/header' alt=$sitename} what would output inside your template <img src="uploads/header/yourimage.jpg" alt="your sitename" />