Support » Theme: Hueman » Need help making header image fill available header space

  • Resolved paulmolineaux

    (@paulmolineaux)


    Hi,
    my website is http://www.stiltonstumble.com

    I’m struggling to make my header image fill the available header area, both in terms of height and width: in other words I currently have empty space all around the image that I want to get rid of – whether this is by resizing (or remaking) the image or by altering code, I don’t mind.

    I have installed a custom CSS editor and spent hours searching forums, to no avail.

    Any help appreciated, this is driving me nuts!

    thank you

    Paul

Viewing 15 replies - 1 through 15 (of 21 total)
  • Hello Paul,

    I believe it’s just a matter of changing some CSS code to tweak some of the padding and the image height. Are you using a child theme? Are you familiar with HTML at all? I just want to know how to best help you. I can get rid of the space and make the image span the full width, just working on the best way to fix the spacing on top and bottom without too much work on your part or messing up another element on the page.

    Cheers,

    Danielle

    Thread Starter paulmolineaux

    (@paulmolineaux)

    Gosh that was a quick response, thank you Danielle.

    I’m using a child theme yes. I have a basic understanding of HTML, good enough to be confident inserting or deleting bits of code here and there, but not to write from scratch. Happy to tweak HTML code if necessary, with direction!

    I am proficient in image processing however, so if part of the answer turns out to be resizing or recreating my header image to fit a certain size or ratio, I can do that quickly. I had tried creating the header image at 1380×200 thinking that was the size of the header area, for example, but no joy.

    Paul

    Paul,

    The image size is actually PERFECT! The problem is that there is some CSS telling it to display smaller than it is. I’ll go ahead and paste what I’ve done so far, so that we can work towards a solution for you!

    If you go to Appearance > Editor in your WordPress dashboard, you should see the style.css file and you can search for and edit these snippets of CSS in there. Since you’re using a child theme, they may not be there and if that’s the case, just paste the “replace with” css at the bottom of that file:

    #header .pad {
         padding-top: 28px;
         padding-bottom: 30px;
    }

    replace with:

    #header .pad {
         padding-top: 0px;
         padding-bottom: 0px;
    }

    ————————————–

    .site-title {
         padding: 10px 0px;
    }

    replace with:

    .site-title {
         padding: 0px;
    }

    ————————————–
    ADD new CSS

    .headerlogo {
         padding: 0px;
    }

    Once you have that, I can walk you through adding one CSS class in the HTML file to make it recognize the .headerlogo CSS you just added 🙂

    Cheers,

    Danielle

    Oh, I forgot, you have to change a setting in the Theme Options as well.

    Appearance > Theme Options > Styling (scroll until you see Header Logo Image Max-height) Make sure the slider is set to 200. This will allow your header image to be full width.

    Also, when I tested this on my development WP, I went into the Header options in that same Theme Options menu and turned off the Site Description. This got rid of the empty space below the image since there was nothing in there.

    Thread Starter paulmolineaux

    (@paulmolineaux)

    Yes you’re right, there was no such existing CSS so I’ve simply added all three bits of your CSS.

    Header Logo Image Max-height slider is now at 200. Site Description turned off.

    Go… 🙂

    Awesome! We’re going to add in the CSS class to the template file so that we don’t mess up the padding on everything else across your site. I’ll do a step by step. If I don’t make sense just let me know!

    In your WordPress Dashboard, go to Appearance > Editor and then from the drop down menu in the right column (Select theme to edit), select the Hueman parent theme.

    Once the page refreshes with a list of the files in the parent theme on the right, click on Header (header.php).

    Once that file loads, search for:

    <div class="group pad">

    and replace with:

    <div class="group pad headerlogo">

    This just tells that div to call the CSS we added earlier 🙂

    Let me know if you have questions!

    Cheers,

    Danielle

    Thread Starter paulmolineaux

    (@paulmolineaux)

    Right that’s all done. It’s much improved thank you 🙂

    The empty space is all gone (yay!) but the header image isn’t quite centred – it’s a little over to the right for some reason.

    Also I now have a scroll bar belonging to IE at the bottom of the window, as the page is too wide for the maximised IE window.

    Are either of those fixable?

    Paul

    Paul,

    What version of IE are you using? What is your monitor’s resolution?

    I see what you mean with the header image not being centered. I’ll look and see if I can find a solution for the resizing of the header image not working right in IE (it works properly in Chrome).

    Cheers,

    Danielle

    Thread Starter paulmolineaux

    (@paulmolineaux)

    IE9 and the monitor is using 1440×900. It does look to be a browser issue then, I see it working perfectly on my ipad now.

    I’m packing up for the evening now Danielle, and I can’t thank you enough for what you’ve done so far. You star. I’d never have got to this point without you!

    I’ll look out for any further response from you in the morning. In the meantime know that someone in Nottingham thinks you’re a wonderful human being…! 🙂

    Paul

    Paul,

    No problem at all! Have a wonderful evening. I’m getting close to the issue with the header image not sitting correctly in IE (shakes fist at IE). I’ll let you know what I find. I think it’s not picking up the class we added in the HTML. I’ll see what I can dig up 🙂

    Cheers,

    Danielle

    Paul,

    It’s really strange, but it seems the headerlogo class we added to your header.php file isn’t there. I’m now having trouble viewing the page properly in all browsers. I’ll wait for you to take a look in the morning, but I think that’s the culprit for the header not sitting center like it should in IE (or any browser).

    As for the scrollbar, it’s because IE isn’t resizing the layout like other browsers do. I’ll look at that a little more tomorrow.

    Cheers,

    Danielle

    Thread Starter paulmolineaux

    (@paulmolineaux)

    Hi,
    I’m on a different PC now also running IE9 and I have the same thing with the off-centre header.

    Will wait to see what you can find – unless there’s something I can be checking.

    Paul

    Good Morning Paul,

    Do you have FTP access to the hosting space where the WordPress site you’re working on is sitting? We’re going to need to make a copy of the header.php file and put it in the child theme so that when the parent theme updates we don’t lose that change we made.

    Then, we need to make sure that headerlogo is still present in this piece of code:

    <div class="group pad headerlogo">

    It’s still showing that headerlogo isn’t there, which is why the image is not centered.

    Thread Starter paulmolineaux

    (@paulmolineaux)

    Hi, sorry only just got back to this.

    I have copied header.php across to the child theme. Both theme folders (the original and the child) now have indentical copies of header.php. Here’s the relevant section of code from inside it:

    <div class="group pad headerlogo">
    					<?php echo alx_site_title(); ?>
    					<?php if ( ot_get_option('site-description') != 'off' ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>
    				</div>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

    It seems to have the headerlogo bit in there that you mentioned. Am I missing something?

    Paul

    Thread Starter paulmolineaux

    (@paulmolineaux)

    Oooooh ooooh oooooooohh look look look! It’s centred now! Woohoo!

    Danielle you have been brilliant: clear, precise, friendly, patient. Perfect. Thank you again. I absolutely wouldn’t have managed that on my own.

    Let’s quit while we’re ahead 🙂

    Paul

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Need help making header image fill available header space’ is closed to new replies.