Support » Theme: Spasalon » Replace (part of) the header with an image

  • Resolved hearther


    Dear all,
    I am working at the website and I would need to replace part of the header with an image.
    I have already erased the picture “call us”.
    I want to leave the text “Paris, 10-11 mai 2014 Veggie Pride” and just insert a picture to cover the rest of the header where it says “ici il y aura la bannière” till the end of the header.
    How can I do it?

    1) I have to communicate to a graphist the dimensions of the whole header or of the part I to replace, but I do not know which are the dimensions (it looks like they are not fixed but change according to the dimensions of the page). Could you please tell me the dimensions I shoudl ask for (of the full header and/or that part I want to replace).

    2) The header is a php page and does not have an image format. How can I insert a .jpg to replace it or part of it using the editor?

    Many thanks,


Viewing 12 replies - 1 through 12 (of 12 total)
  • 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.


    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.

    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’.

        only screen and (max-device-width: 1136px) and (min-device-width: 640px)
        /* iPhone only */
    .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

    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 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 and works fine, and they have the theme in common.

    How is it possible? Please give a look at

    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

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

    Have you edited code in header.php ?


    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,


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


    – 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?



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


    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…

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Replace (part of) the header with an image’ is closed to new replies.