WordPress.org

Ready to get started?Download WordPress

Forums

Adding a logo to header (8 posts)

  1. wcroz99
    Member
    Posted 1 year ago #

    Hi,

    I want to add a small logo to the header on my website (http://www.selandscapeconstruction.co.uk/) next to the existing 'marshalls' logo in the top left hand corner.

    Now I'm quite new to wordpress and my site was built by a web designer on my behalf but I'm starting to know my way around now.

    I have tried uploading the new logo via the media library and then going to the header.php and copying the code for the marshalls logo but changing the image path to the new logo. However for some reason the new logo isn't appearing alongside the Marshalls logo.

    Is there something obvious that I might be doing wrong??

    I think I may need to upload the file to another location as the marshalls logo is currently under /wp-content/themes/landscaping/image/marshalls_logo_hires.png and the new logo is under /wp-content/uploads/2012/11/CityGuildsLogo.jpg

    Any help at all will be greatly appreciated.

    Thanks,
    Will

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    From what you've said it sounds like you are on the right track -- but yes, the image path you use in the header.php file has to correspond to where the image is. The other thing you will likely need to do is add some CSS to position the new image where you want it.

  3. wcroz99
    Member
    Posted 1 year ago #

    Thanks WPyogi.

    Well this is the thing, I have used the correct image path but the logo is still not showing and I cant work out why.

    The code I have entered is below. Its exactly the same as what it is for the other logo I currently have (marshalls) but I have just changed the image path to the new logo (CityGuildsLogo.jpg).

    <img style="margin-top:10px;" width="90" src="<? echo get_bloginfo('template_directory').'http://www.selandscapeconstruction.co.uk/wp-content/uploads/2012/11/CityGuildsLogo.jpg'; ?>" alt="" />

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The code is actually there -- but the image path is not quite right. You'll also likely want to put that second logo in a separate div tag -- it will be easier to position with CSS, etc. Can you post the header.php code in a pastebin? That would probably be the best way to deal with this...

    See this re: posting code:
    http://codex.wordpress.org/Forum_Welcome#Posting_Code

  5. wcroz99
    Member
    Posted 1 year ago #

    Thanks mate. Please see below:

    http://pastebin.com/GcaRq4s6

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, I changed that section of the header code -- but because of the way it's already coded, it will be better if you can move the new logo to the same folder where the existing one is. You'll likely need to do that using FTP.

    So try putting this section in -- use the top and bottom lines as guides to put it in the correct place

    <strong><div class="tel_main"></strong>
    <div class="logo_new"> <a href="http://www.marshalls.co.uk" target="_blank"> <img style="margin-top:10px;" width="90" src="<? echo get_bloginfo('template_directory').'/images/marshalls_logo_hires.png'; ?>" alt="" /></a> </div>
    
    <div class="logo2"> <a href="http://www.marshalls.co.uk" target="_blank"> <img src="<? echo get_bloginfo('template_directory').'/images/CityGuildsLogo.jpg'; ?>" alt="" /></a> </div>
    <strong>
    <div class="request_a_free_quote"></strong>

    If moving the new logo does not work, we can hard code the new image path.

    As always, make a copy of your existing file before making changes :).

    I have to leave for a while, but will check back on this in case no one else has picked it up.

    You will need to add some CSS for that second logo too.

  7. wcroz99
    Member
    Posted 1 year ago #

    Awesome! Thats worked, thank you very much!

    I need to get a better quality logo though as it looks awful at the moment. But thanks I really appreciate your help

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Oh great, glad you got it working! You can add CSS to adjust the position, using the class for the second logo:

    .logo2 {
       margin-left:  XXpx;
    }

    Add other margins as appropriate.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.