change the entire header

Home Forums Automattic On a Whim change the entire header

Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #108364 Resolve

    Raíra
    Member

    I would like to customize the entire header, not only the small round image. Like I used to do with my non-premium theme. Is this possible?

    The blog I need help with is deliciadeblog.com
    #140113

    Kathryn P.
    Happiness Engineer

    Hi there, On a Whim is designed for a small, squareish, header graphic. The recommended dimensions are 80 X 80 pixels. This particular theme isn’t designed to accommodate a longer rectangular-shaped header.

    Just let me know if you have any other questions.

    #140115

    Kathryn P.
    Happiness Engineer

    p.s. if you purchased the Custom Design upgrade, you could add your own header through CSS with some code like this:

    .site-branding {
    background: url("http://deliciadeblog.files.wordpress.com/2013/09/imagem-blog-delicia-v4-e6.jpg") no-repeat !important;
    height: 450px;
    }
    .site-title {
    display: none;
    }

    #140120

    Raíra
    Member

    Hi, Kathryn, thanks

    If I purchase the Custom Design, is it a 100% sure I’ll be able to change the header? By “the header” I mean the whole part in green on my blog. When I bought the “On a Whim” theme, I found it on a list of themes with flexible headers, so I was very disappointed with the limitation. I’m afraid to spend more morey and still don’t be able to use the image I paid for a designer to do, that I could easily put on a non-premium theme.

    I appreciate your help

    #140125

    Kathryn P.
    Happiness Engineer

    Feel free to test-drive the CSS yourself under Customize > CSS. You’ll see a preview of what it would look like, although you won’t be able to save the changes yet. This is how it looks:

    http://cl.ly/image/0T013D41122C

    You also have the option of finding a theme that may work better for your needs. Premium themes are refundable for up to 30 days after purchase, under Store > Upgrades.

    Just let me know if you need further help.

    #140129

    Raíra
    Member

    Ok, thanks! I really like this theme and want to keep it, but the header does not look very good (the image is cut and the green part is still showing). I don’t understand about codes, but is it possible to make the image fit perfectly as the header looks in the original green background? Maybe if I adjust the size of the image?

    thanks a lot!

    #140131

    Kathryn P.
    Happiness Engineer

    You may need to adjust the size of the header image that you upload to get it to fit into the space exactly the way you want it – for example, you may want to make it narrower and longer.

    If you find that you can’t get the CSS working as you like – and we’re glad to help you with it – the Custom Design upgrade is also refundable within 30 days, so you don’t have anything to lose if you’d like to try it out. :-)

    #140349

    Raíra
    Member

    Hi Kathryn!

    I did a narrower version of the header and wanted to see how it looks, but my code does not work. Could you help me with a new code with this image? Its the last one I uploaded, imagem-blog-delicia-face.

    Thanks!

    #140354

    Kathryn P.
    Happiness Engineer

    Hi there – is this the one you mean?

    This is the last file uploaded.

    That one is a small square, and doesn’t look like it’s meant to be a horizontal banner. You can upload it through Appearance > Header, since it’s 80 X 80 pixels, the dimensions expected for the header in this theme:

    https://deliciadeblog.wordpress.com/wp-admin/themes.php?page=custom-header

    If that’s not the one you mean, could you please link directly to it? You can copy/paste the file URL on the image’s page in the media library, in the top right:

    http://cl.ly/image/0n252g1X1w1Z

    Thanks!

    #140355

    Raíra
    Member
    #140356

    Kathryn P.
    Happiness Engineer

    Thanks! You could try this CSS instead of the earlier version:

    .site-branding {
    background: url("http://deliciadeblog.files.wordpress.com/2013/09/imagem-blog-delicia-face5.jpg") no-repeat scroll 0px 0px transparent ! important;
    height: 270px;
    }

    .site-title {
    display: none;
    }

    .site-description {
    margin-top: 110px;
    }

    I added a new bit of code to push down your site tagline (“O Delícia! está mudando de cara! O novo layout está quase pronto, aguarde”) so it doesn’t overlap with the image.

    #140358

    Raíra
    Member

    Ok! Thank you so much! If I buy the upgrade, I’ll be able to change the green background as well? For a paper-like image, for example, so it combines with the header? If not, the solution would be to make my header with a green background, so it looks all one thing, right?

    Do you know the exact dimensions of the banner, so I can make it with the right height and length? It is still not long enough.

    Thanks!

    #140361

    Kathryn P.
    Happiness Engineer

    If I buy the upgrade, I’ll be able to change the green background as well?

    Yes, you’ll be able to change the green background – as well as most other colours throughout your site.

    Do you know the exact dimensions of the banner, so I can make it with the right height and length? It is still not long enough.

    The width of both your left and right-hand columns together is 995px, so if you’d like your banner to spread across both you can try something in that range. The height of the banner is totally flexible and up to you. If you’d like it higher, you would then just adjust this line of the code to accommodate your height:

    height: 270px;

    #140535

    Raíra
    Member

    Thank you so much for your help, I manage to change the header with the upgrade and I’m very happy with the result.

    #140536

    Kathryn P.
    Happiness Engineer

    Wonderful – it looks great! I love the stamp effects. :-)

    I’m going to close this thread now and mark it as resolved, but feel free to start a new one if you need help with anything else.

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘change the entire header’ is closed to new replies.