How to have a image on top-header?

Hi there!

My customer want´s to have a image on the very top of page, like this layout image:

http://www.catchline.fi/support/panoramakuva_3.jpg

So basicly I wish to have a large full width image on the place of the top "paper".

I have a playground installaion here:
http://www.catchline.fi/vihrea-temp/

How to begin with this? I really do not need any of the social icon or so, they are not used in the end:
http://vihreaplaneetta.fi/

Yours,
Pekka

Hi,

I think the easiest way to achieve this image is edit Publisher/css/template.css file (I have tested this on your http://vihreaplaneetta.fi/). Then find #gk-topbar selector - around line 417 and replace this selector with this one:

Code: Select all

#gk-topbar {
   background: url('../images/your-top-background.png');
   padding-bottom: 50px!important;
   margin: 0 auto 10px auto;
   width: 980px;
}

your-top-background.png file goes to Publisher/images directory. If you want to use bigger image (higher), just increase padding-bottom property.

Hello!

I did this with the new publisher version. But now it does not work anymore!

template.css is attached here.

What now?

Hello,

Top bar widgets are not visible now, did you remove or move these widgets? You have to add any widget into topbar widget area.

Thank you!

Now it´s cool, but on small resolution the image floats wide and this looks bad.

http://vihreaplaneetta.fi/

Can you tell anything about this?

Pekka

Try to add this code at the end of your css/tablet.css file:

Code: Select all


#gk-topbar {
   margin: 0 -15px!important;
}

#gk-head {
   margin: -180px 0 -15px!important;
   padding: 0 15px;
}

You can also change the color of the menu icon, by replacing this image:
http://vihreaplaneetta.fi/wp-content/themes/Publisher/images/tablet_menu_btn.png


It s still there, I tried to play with the values but I do not understand what number is the one that is controlling this "overfloW" of the image.

#gk-topbar {
margin: 0 -20px!important;
}

#gk-head {
margin: -190px 0 -25px!important;
padding: 0 15px;
}

Anyway, thank you for great support!