WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Sizing a logo that replaced the header title (13 posts)

  1. CommonMarket
    Member
    Posted 1 year ago #

    I know versions of this question have been posted and answered but I can't seem to get it to work.
    I figured out how to replace the site title and tagline with my logo but when I try to adjust the size, both the header and the logo change size. For example: http://www.cryhavocdesign.net/
    I used the code: #branding img { width: 300px; } in my child css.
    and the following code in my header.php:
    <hgroup><img src="http://www.cryhavocdesign.net/wp-content/uploads/2013/01/logo-for-website.png" alt="" width="125px" height="45px" id="site-logo-image" />

    I also need to make it so if you click on the logo, it takes you back to the home page.
    I know there are simple solutions, but I'm still in the process of teaching myself all the coding.
    Thanks!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Using the id in your CSS will allow you to target just that image:

    #branding img.site-logo-image {...}

    To link it just wrap your image in anchor tags:

    <a href="url"><img....> </a>
  3. CommonMarket
    Member
    Posted 1 year ago #

    I think I still must be missing something in the code. What you said makes perfect sense but its not working. I tried a few different variations and at one point it changed the size of the sliding header images but the logo still stayed the same...

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Oh sorry, I used a class syntax and it should have been id (# not period) in the CSS:

    #branding img#site-logo-image {...}

    But the anchor tags need to go in the HTML in your header.php file not the CSS file - ONLY CSS ever goes in that file.

  5. CommonMarket
    Member
    Posted 1 year ago #

    Thanks, like i said I'm still learning the whole process.
    Is it possible that something in my header.php is reading the logo and slider header as the same thing? Maybe i used the wrong technique to insert the logo.
    Sorry I'm so dense about all this.

    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">
    
    			<hgroup><img src="http://www.cryhavocdesign.net/wp-content/uploads/2013/01/logo-for-website.png" alt=""  id="site-logo-image" />
                <a href="http://www.cryhavocdesign.net/"><img.site-logo-image> </a>
  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yeah, that's kind of a mess - but no problem, everyone here is learning, including volunteers and mods who help out :).

    Try this in place of what you have starting with the hgroup tag:

    <hgroup><a href="http://www.cryhavocdesign.net/"><img src="http://www.cryhavocdesign.net/wp-content/uploads/2013/01/logo-for-website.png" alt="logo" id="site-logo-image" /></a>
  7. CommonMarket
    Member
    Posted 1 year ago #

    That is definitely a step in the right direction. Before you gave me that last code I had edited it down to this:

    <hgroup>
    				 <img src="http://www.cryhavocdesign.net/wp-content/uploads/2013/01/logo-for-website.png" alt=""  id="site-logo-image" / </span>
    			</hgroup>

    Which made the header back to its normal size and the logo a little smaller and centered.
    Your code made the header image a little smaller, the logo smaller than that and made it clickable.

  8. CommonMarket
    Member
    Posted 1 year ago #

    Do you think I should just edit the logo in Photoshop and make the original file smaller? then all I would have to do is make sure it was aligned to the left...just thinking out loud.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Looks like it is getting styled by this CSS:

    #branding img {
        display: block;
        height: auto;
        width: 100%;
    }

    so to override that, add the width to the more specific style in your child style.css:

    #branding img#site-logo-image {
        width: 300px;
    }
  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    To move it to the left add this too:

    #branding hgroup {
        margin: 0;
    }
  11. CommonMarket
    Member
    Posted 1 year ago #

    Perfect!!!! I've been working on this for 2 days. Thank you so much!
    (I feel a little bit smarter now)

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You're welcome and glad you learned a bunch too! That's what we always want to see happen here. If you can mark this resolved, it helps keep the forums a bit neater and tidier and easier for future searches to find solved issues.

  13. CommonMarket
    Member
    Posted 1 year ago #

    Thanks again :)

Topic Closed

This topic has been closed to new replies.

About this Topic