Replace (part of) the header with an image

HI hearther,

->To Add More Text in Pink Strip you can add text in meta boxes given in the Post and Pages.

->To insert a picture in the pink strip after the “ici il y aura la bannière”
—> Locate file style.css and find “.spa_tag” class .
—> Add your image here using “background: url” property. Adjust the width and the height of the class .spa_tag according your image size.

Thank’s

Hi, many thanks for the info.
Which are the dimensions that I should communicate to the graphist for putting an image there, in order to cover from “Ici il y aura la bannier “(included) till the end of the header?

The fact is that the header is changing of size adapting to the browser’s window dimensions. Or, at least, which would be the dimensions for replacing the whole header?

I am afraid that I cannot just adapt the dimensions attributes to have a good visual result.

Hi,
For that you have to edit some line of code.Just follow the given steps.
Step 1 ) Locate the file pink-header.php and insert the given code after the closing of <div class=”spa_tag”> OR in line number 30.
<div class="span9"><img src="ADD IMAGE HERE (With 850px X 135 px)"></div>
Step 2) Go to the Option Panel of the theme.Go to Genral Tab -> Custom CSS Add the below given code in it. Add ‘Save the Changes’.

#banner_desc{display:none;}.spa_tag{display:none;}
@media
    only screen and (max-device-width: 1136px) and (min-device-width: 640px)
     {
    /* iPhone only */
	.pink-container{display:none;}
}
.pink-container {padding-top:0}

You are Done..

Hi! Many thanks again for this. I replaced the header with my picture, but I cannot put this picture aligned to the right. I tried many different ways but it does not work. Any suggestions about?

The site is now at https://www.veggiepride.eu/

Hi,
Use ‘Float:Right’

Hi, I already tried this but it did not work. So I asked my prof and he replaced the pink header with some div + some CSS in the stylesheet and could achieve the result I wanted. But since then, my English website en.veggiepride.eu which is on the same Multisite installation has a very bad layout of the page and the footer!
The strange thing is that the related French and Italian versions at https://www.veggiepride.eu and it.veggiepride.eu works fine, and they have the theme in common.

How is it possible? Please give a look at en.veggiepride.eu.

My prof could not understand why, and retrieving the old header make things even worse…I am desesperated, I have to launch the website on Sunday! ??

Many thanks again for your support

Hi,
Your eng / italian and french all are showing same display.

Have you edited code in header.php ?

Thank’s

Hi, the website had problems tonight, for this reason you saw all the 3 versions without header and footer. I just restored it.

Unluckly, concerning the pink-header image, the float:right does not work, there is still a vertical pink stripe on the right border. Any other idea about how to solve this issue?

Also, when you go to the English and the Italian version now, the picture I put on the pink header appears in a different way. How can I make it appear like it is on the French version?

Many thanks again,

Erica

I just solved both problems! You do not need to answer anymore to them.

However:

– why is the pink-header big and then small when charging the page?
– when I make the browser window smaller, the header is going one line below and the menu items as well. Is it a way to block them in their position?

Thanks

@hearther,

This might caused due to the size of the Header IMG . Pl use lil bit smaller IMG.

Thanks

Hi, I changed the dimensions of the image making it a bit smaller but nothing changes.
It is still downloaded in a strange way when accessing the page and visualized one line down when the browser’s window is smaller…