WordPress.org

Ready to get started?Download WordPress

Forums

Customizing theme header text with image issue (8 posts)

  1. richardpd
    Member
    Posted 4 years ago #

    Hi
    I am trying to add a custom image/logo to replace title text in theme header at http://www.learningthepianohelpsite.com

    I have done this to also make the image clickable & not the whole header.

    The problem I have now is how can I move the image/position it in the header? I have tried editing the stylesheet.css to do this but haven't got it right. Can someone help me fix this please?

    I include the stylesheet code & header.php code here:

    [Code & CSS moderated as per the Forum Rules. Please use the pastebin]

    Looking forward to helpful replies, many thanks

  2. esmi
    Forum Moderator
    Posted 4 years ago #

    What's the problem with the logo as it is now?

  3. richardpd
    Member
    Posted 4 years ago #

    Hi
    Yes- the logo is positioned at the top of the header presently but I want to know how to position it within the header (any arbitary distance away away from top/bottom/sides of header-so I can control where it goes).
    Hope this is clear
    (thanks for tidying the code-apologies I am relatively new to posting here)

  4. bigchezmktg
    Member
    Posted 4 years ago #

    Richard,

    I just posted a question about making the header clickable. Can you go to that post and tell me how you did it? I would have contacted you another way on here but didn't see how to do it.

    Thanks in advance!
    Rachel
    bigchezmktg

  5. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    in style.css:

    #header a img { position:relative; top:20px; left:120px; }

    negative values are also allowed.

  6. richardpd
    Member
    Posted 4 years ago #

    Hi alchymyth

    That has worked nicely-thanks very much!
    I don't understand how it worked though as this appears to be a new CSS attribute that has been added to the stylesheet (ie #header a img)?

    I am grateful if you can explain how/why it works but very glad it does work! I wish I understood CSS and php better!
    Regards

  7. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    I don't understand how it worked though as this appears to be a new CSS attribute that has been added to the stylesheet (ie #header a img)?

    you can add as many css styles to a site or style sheet as you like. the only 'danger' is that you are using styles that are too specific and make the whole thing difficult to edit and to maintain.

    http://www.w3schools.com/css/default.asp
    http://www.w3schools.com/PHP/DEfaULT.asP

    at the beginning, when I came to something new, or something that I didn't fully understand, I read these tutorials (and others on the web) and looked up examples, and also 'played' with the code in my test sites.
    this way, with little effort, you keep expanding your knowledge.

  8. richardpd
    Member
    Posted 4 years ago #

    Hi
    Thanks for your good advice & links on how to understand CSS & PHP better.

    When this style was added to my stylesheet I am not sure how it worked as nothing new was added to html layout -the only difference being that I had added the new WordPress php code to link to the new header image in the header.php..

    There is a lot to learn & understand!
    Many thanks

Topic Closed

This topic has been closed to new replies.

About this Topic