Header Logo Image Size

  • Resolved thundersbe

    (@thundersbe)


    11 years, 1 month ago

    I like this theme in principle, but it’s been difficult for me to do certain things. The main thing is, I’ve got a header image that I’d like to use on the upper left side. I uploaded it under Theme Options but the theme is showing it much smaller than it should be. I only see an option to change the height but I need the theme to present the logo/header at its full size.

    Would someone please tell me where to do to do that? Step by step would help. Thanks.

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • bdbrown

    (@bdbrown)

    11 years, 1 month ago

    Hi thundersbe. Can you post a link to your site? Thanks.

    sharadjustin

    (@sharadjustin)

    11 years, 1 month ago

    Disable it under Theme Options and goto your edit and add the below line to your style.css

    #header { background:url(https://site.com/headerfilename.jpg); position: relative; padding-bottom: 60px; }

    Thread Starter thundersbe

    (@thundersbe)

    11 years, 1 month ago

    Thank you Sharadjustin.

    I disabled it under Theme Options, and then added the code you provided to style.css using my image file name. But all that happened was that no image showed up at all. Just the words to the title of my site.

    BDBROWN, the website is http://www.marriageradio.com/blog

    Thread Starter thundersbe

    (@thundersbe)

    11 years, 1 month ago

    Any other ideas?

    bdbrown

    (@bdbrown)

    11 years, 1 month ago

    Try adding this to your custom css:

    .site-title a img {
  max-height: 100%;
}
    Thread Starter thundersbe

    (@thundersbe)

    11 years, 1 month ago

    Thank you, but no change. Any idea why the image is being shrunk to begin with?

    bdbrown

    (@bdbrown)

    11 years, 1 month ago

    It’s probably being limited by the size set in Theme Options > Styling > Header Logo Image Max Height. You could try setting that to 125 which is the height of your logo image. Also, wherever you’re adding your custom css isn’t making it to the live website. Either your cache or your CDN, or maybe both, aren’t getting updated.

    Thread Starter thundersbe

    (@thundersbe)

    11 years, 1 month ago

    Super, simply changing the image max height with the slider did it. I thought that since it didn’t mention width that it wouldn’t work. Thank you for your help!

    But now, the header image doesn’t line up with the column below it. It’s like the header is indented. Could you help with that? See at http://www.marriageradio.com/blog

    bdbrown

    (@bdbrown)

    11 years, 1 month ago

    Maybe you haven’t changed the live site yet but the logo there still has a height of 60px. To pull it left you can use this css:

    #header .pad {
  padding-left: 0;
}
    sharadjustin

    (@sharadjustin)

    11 years, 1 month ago

    Hey thundersbe, please mark this topic as resolved.

    Thread Starter thundersbe

    (@thundersbe)

    11 years, 1 month ago

    Hi Sharadjustin, I would, but my issue isn’t resolved yet.

    BDBROWN, thanks, but adding that line to my CSS didn’t move the topic. It’s like CSS is being ignored.

    Please take a look at http://www.marriageradio.com/blog. Do you have any other ideas?

    Also, does the banner appear full size to you now? Thanks so much.

    bdbrown

    (@bdbrown)

    11 years, 1 month ago

    Yes, the logo is displayed at 800×125. But I don’t see the adjusting css. Maybe need to refresh the cache?

    Thread Starter thundersbe

    (@thundersbe)

    11 years, 1 month ago

    Hi, I tried refreshing the browser cache and just refreshed my WordPress cache. Still not showing aligned correctly left. Odd.

    Thread Starter thundersbe

    (@thundersbe)

    11 years, 1 month ago

    Here’s the screenshot of where I added it in CSS. Am I doing something wrong?

    http://marriageradio.com/blog/wp-content/uploads/2015/04/marriage-radio-css.gif

    Thanks

    bdbrown

    (@bdbrown)

    11 years, 1 month ago

    That should work but negative margins can have unintended consequences in responsive mode. Check the css I posted 6 posts above. If you want to also remove the spacing above and below the logo, use this:

    #header .pad {
  padding: 0;
}

    Also, it looks like you’re adding your css to the main theme style.css file. Those changes will be lost if you upgrade the theme. I’d encourage you to either use a child theme or a plugin like Simple Custom CSS.

Viewing 15 replies - 1 through 15 (of 18 total)
1 2

The topic ‘Header Logo Image Size’ is closed to new replies.