Header Margins

  • thekams · Member ·

    I’m using Adelle on http://thekams.wordpress.com with the CSS upgrade activated.

    For some reason, my header image will not align with the black navigation banner below it. One side (left) does, but the right does not. I’ve tried changing the width of my header image and that does nothing. I’ve looked through the original stylesheet but can’t seem to find what I’d need to isolate to tweak – I’m hoping someone here can help! I’m looking for either a way to get the right side of the header to stretch and meet the banner, or even center the header image above the banner.

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • miguelcsf · Staff ·

    Hi there,

    Your header image is 1040px wide. Can you manage to make it at least 1084px wide? That way, it would fit the banner perfectly!

  • thekams · Member ·

    Thank you for the reply! But the image I uploaded is 1150px wide. Even skiping the cropping the header still only goes that far – it’s like the theme won’t let the header be any wider than 1040px.

  • miguelcsf · Staff ·

    Well, we’ve just found a bug, thanks to you! ;) It seems that this particular theme, Adelle, isn’t handling custom font sizes all that well. So, while we work on it, you have two options:

    – You can revert to the theme’s default font size by going to your Customizer sidebar, choosing Fonts, and then adjust the body text’s size back to 0.

    – If you would like to keep your custom font size, you can patch things up with some custom CSS rules by choosing CSS on the Customizer and pasting the following:

    #masthead > a img {
    display: none;
}

#masthead > a {
    display: block;
    width: 1081px;
    height: 226px;
    margin-bottom: 0.4em;
    background-size: 100%;
    background: url('https://thekams.files.wordpress.com/2013/06/cropped-imagination-header-adelle-3.jpg');
}

    Don’t forget to save those changes in the Customizer. Note that this second solution isn’t particularly elegant and that you will need to readjust this CSS snippet if you want to change the font size again or change the header image.

    Also, note that your current image is indeed 1040px wide, not 1150px, which is why the image looks somewhat stretched out. Make sure that you upload an image that is wide enough and update the snippet above to use the URL for that newly uploaded image.

    Hope this helps!

  • thekams · Member ·

    I adjusted the font back to 0, and that worked perfectly! I tried the CSS snippet since I would have liked to keep the custom font size, but it gave me this weird double look (the smaller header still showing on top of the new longer one).

    Thank you so much for your help, I really appreciate it! :)

  • miguelcsf · Staff ·

    If you do want to try the custom CSS solution, be sure to include *both* paragraphs of that CSS snippet I gave you! That first paragraph is the one responsible for hiding the original header. Then you can decide which solution you prefer. :)

  • ewigginton · Member ·

    I have had the same problem as the poster with the width of the header image and couldn’t locate the info on the original style sheet to edit the width so I ran across this post. The question was posed exactly as I would have, but I’m not following the font adjustment in relation to header size adjustment. How will we know when the bug on the style sheet is fixed and has anyone else not been able to have a custom background AND change site colors simultaneously? Every time I try to change colors, it overrides my custom background.

    Thank you for your help.

    my blog: http://nouveaustitch.com

  • designsimply · Member ·

    How will we know when the bug on the style sheet is fixed?

    I’m not sure it really is a bug because not every theme can account for every type of customization change and the theme team might decided that customizing the font size for this theme also means someone will need to make an adjustment to the header image as well. I can tell you the issue has been reported for review, and someone will reply back here as soon as there is any news to share about it.

    In the mean time, I can help you with some CSS to adjust the header image for http://nouveaustitch.com/

    This example will center the existing header image:

    .site-header > a {
	display: block;
	text-align: center;
}

    Or you could stretch the image to fit using CSS like this:

    .site-header img {
	width: 100%;
	height: auto;
}

    Note that stretching an image could result in the image looking pixelated or low quality (depending on the image). To avoid that, you could manually upload a 1200 x 260 pixel sized version of the image to your media library and then use a “background” property in CSS to display the image instead of using the one that was setup on the Appearance > Header page in your blog dashboard.

  • designsimply · Member ·

    Every time I try to change colors, it overrides my custom background.

    This is expected. Each preset group of colors in a color palette has a preassigned background color that is shown by default when you switch to it. If you want to go back to using a different background image or color after that, just click the top left circle and options will appear for you to change the color or the image.

  • ewigginton · Member ·

    Thank you so much for the help!

  • ewigginton · Member ·

    Since having a chance to work with the code you provided to stretch the image, it doesn’t seem to work for me. Once entered and I hit refresh, the image appears across the entire top portion for a flash, then reverts back to the partial header across.

    Any tips?

    Thank you,
    Ellen

  • ewigginton · Member ·

    Centering worked so I’m good. Thanks so much.

  • designsimply · Member ·

    I checked http://nouveaustitch.com/ and the centering looks great! :)

  • michiecat · Staff ·

    Hi there! Just writing to let you know that header images in the Adelle theme are now centered by default. Thanks for letting us know about the issue.

  • ewigginton · Member ·

    Thanks for letting us know about the change to Adelle theme’s header.

    I was trying to upload a larger header today to fill the entire space and now I can’t locate an upload feature on the Header option on the side panel. I have uploaded the new image through media, but the option to select an image to upload seems to be gone.

    Am I losing it?

    Thanks

  • designsimply · Member ·

    It should be there. Look for the “Choose an image from your computer:” line just below the current header image at https://nouveaustitch.wordpress.com/wp-admin/themes.php?page=custom-header

  • ewigginton · Member ·

    Thanks. I was trying to change it via the Customization on the right side of the screen rather than the Appearance panel under the Dashboard.

  • designsimply · Member ·

    Actually, both should work! I will test the Customize section.

  • designsimply · Member ·

    I tested this and I was wrong!

    To change the header image, you do currently need to change it via the Appearance > Background page. That functionality may change in the future though.

  • ewigginton · Member ·

    Ah ha! I’m not totally losing it then!

    Still wasn’t able to load a header image 1040 x 250 to fit across the full header. Centering will have to do for now.

1 2
  • The topic ‘Header Margins’ is closed to new replies.