Doodlekit™ Online Free Website Builder

Hi, I don't suppose it's possible to change the header photo for each individual page is it?

Yes, this can be done through the CSS editor override (if you know CSS). Each page has it's own unique body id. Using this, you can set each page's header image.

Heath,

I also really need to do this for a very important client of mine.

Could you please provide a code sample for doing this?

I know a bit of CSS, but couldn't figure this one out...

Your answer is deeply appreciated. :)

Andre,

It would depend upon which layout you are using. Looking at your current website layout, this is how you would do it:

1. Go to the page who's header image you want to change. Do a 'View Source' to see the html. Look at the body tag - it will have an ID. Copy that ID. For this example lets say its your home page. I looked and the ID for your home page is 'pages_index_estatutos'.

2. Look at the HTML and CSS code to figure out where the header image is placed. Looking at your layout, I see that it is a background image of a div with the id of 'header_image'.

3. Next, upload your new header image inside the CSS Editor. For this example, let's say you call it 'header1.jpg'.

4. Add the following code to your CSS Editor Override page:

body#pages_index_estatutos div#header_image{
background: url(header1.jpg) top left no-repeat !important;
}

5. Done!

I tried this too, and couldn't get the new image to appear on the page. I would like to select a different header for each page without using the CSS editor.

Any chance you'll add this feature, soon??

Hello E Meier,

I went ahead and put this code into your CSS editor:

body#contact_index div#header2{
background: url(holding_hands.jpg) top left no-repeat !important;
}

It changes the header image on your Contact Us page. All you have to do is click the 'Enable Custom Stylesheet' checkbox in the editor and it will work. This should be enough to get you going :).

There is a strong possibility we will add this function via the admin tool at a future date since it seems to be something requested by a lot of people.

Thanks, Heath!
I noticed that you changed the header image - thanks!!
Much appreciated.

E

When I try.. I get:
'You have entered invalid CSS. Upgrade your account for unrestricted CSS access.'

There are certain elements you cannot alter the CSS for on the free account. Hiding Doodlekit branding is not allowed with the free accounts. Are you trying to do this?

hey ive been sucessfull for one page but i duplicate the code putting in the details for each one and it just gets overwirtten by the one listed after it

i altered your code heath (i copied it right from the css layout)

body#albums_album_30037 div#header_image{"http://www.happypixels.doodlekit.com/media/AA/AB/happypixels/images/156825/main/HAPPYPIXELSc.png"}) center center no-repeat; }
div#hdr_txt{left:225px;}
div#hdr_txt table{width:540px;}
.site_hdr_outer{width:540px;}

^^code i used
in my website i put one for the blog and the about me page but only then blog one shows