WordPress.org

Ready to get started?Download WordPress

Forums

Spasalon
Replace (part of) the header with an image (13 posts)

  1. hearther
    Member
    Posted 7 months ago #

    Dear all,
    I am working at the website www2013.veggiepride.org 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,

    Erica

  2. vibhorp
    Member
    Posted 7 months ago #

    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

  3. hearther
    Member
    Posted 7 months ago #

    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.

  4. vibhorp
    Member
    Posted 7 months ago #

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

  5. hearther
    Member
    Posted 5 months ago #

    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?

  6. hearther
    Member
    Posted 5 months ago #

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

  7. vibhorp
    Member
    Posted 5 months ago #

    Hi,
    Use 'Float:Right'

  8. hearther
    Member
    Posted 5 months ago #

    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 http://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

  9. vibhorp
    Member
    Posted 5 months ago #

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

    Have you edited code in header.php ?

    Thank's

  10. hearther
    Member
    Posted 5 months ago #

    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

  11. hearther
    Member
    Posted 5 months ago #

    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

  12. vibhorp
    Member
    Posted 5 months ago #

    @hearther,

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

    Thanks

  13. hearther
    Member
    Posted 5 months ago #

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

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.