Chunk theme: resize custom header

  • Author
    Posts
  • #761769

    cpemslie
    Member

    I am trying to resize the header image to 788 by 404 px, because the default size won’t admit my header image (which can be found here) without me having to severely distort it first. I’ve been on the ‘Designing Headers’ page but the example CSS there doesn’t seem remotely compatible with Chunk’s. I should point out at this point that I am very new to CSS and have only a vague knowledge of HTML (I’m sure you guys must dread people like me). Any help you could give me would be hugely appreciated.

    Chris

    The blog I need help with is ilkjournal.wordpress.com.

    #761876

    The following does it, but the image will no longer link to your main site page as the other one did. This can be fixed. What you do is make a transparent PNG image, with no background color the same size as your header, upload it to your media library, put it into a text widget and link it to the site main page. Once you have done that, post back here and we can then use absolute positioning to move it up and over the top of the header image.

    #menu #header-image {
    background: url("http://ilkjournal.files.wordpress.com/2011/11/ilkbanner.jpg") no-repeat scroll center top transparent;
    height: 404px;
    margin-left: auto;
    margin-right: auto;
    width: 788px;
    }
    
    #menu img {
    display: none;
    }
    #761877

    cpemslie
    Member

    Thank you! That worked perfectly. For now I’m ok with using the home link in the navigation to return to the main page, but I’ll post back here once I’ve created and uploaded the PNG file and put the widget on the page. You’re a star.

    #761880

    You are welcome.

    #761881

    cpemslie
    Member

    …actually, never mind. It seems I have none of the software required to make the PNG. But really, I’m fine with the logo not being an active link. Thanks again for the help!

    #761882

    You are welcome.

    #762225

    enpositivods
    Member

    a simple question, I have the issue of chunck t I have a problem with my Share Button.
    How I can make the buttons do not appear grouped ?
    My blog is http://www.desegni.org

    enpositivo.ds()gmail.com

    #762226

    At settings > sharing there are two areas to drag the buttons to. The darker grey rectangle at right where all the icons will be grouped as you have them, or the light grey area where it says “Services dragged here will appear individually.” If you drag the icons over to that area, they will appear individually.

    #762227

    Light grey area on the left that is.

    #762228

    enpositivods
    Member

    Thank you : )

    #762229

    You are welcome, and in future, when your question is on a different subject, please start a new thread in the forums so as not to confuse existing threads. Thanks.

    #762231

    darlenao
    Member

    Hi, I am also brand new to CSS. I want to insert an image in the header, but can’t seem to get it the right size. The image URL is: http://enoughofthecattalk.files.wordpress.com/2011/12/maybe-final1.jpg

    I tried cutting and pasting the above CSS, replacing the pixel dimensions with my sizing. Somehow, it’s still not working. How can I replace this?

    #762232

    The image you linked is 921 x 498 pixels:
    http://enoughofthecattalk.files.wordpress.com/2011/12/maybe-final1.jpg

    But the space for the header in the Chunk theme is only 788 pixels by default. If you want to adjust your image to fit, you can add some parameters to the end of the URL and get a smaller image:
    http://enoughofthecattalk.files.wordpress.com/2011/12/maybe-final1.jpg?w=788

    That image is 788 x 426 pixels, and so you could use CSS like this to replace the Chunk theme header image with your image:

    #menu #header-image {
    background: url("http://enoughofthecattalk.files.wordpress.com/2011/12/maybe-final1.jpg?w=788") no-repeat scroll center top transparent;
    height: 426px;
    margin-left: auto;
    margin-right: auto;
    width: 788px;
    }
    
    #menu img {
    display: none;
    }

    Note that it’s also possible to change the width of the entire layout, but that would take different CSS.

    #762233

    darlenao
    Member

    Ahh, okay, I see. Thanks for your help. It works perfectly!

    #762234

    Yay! Cheers. :)

    #762238

    Hello, can anyone tell me how to insert a right hand margin for widgets etc on Chunk theme?

    Thank you!

    #762239

    @leftouteditors, would you mind please making an new thread? https://en.forums.wordpress.com/forum/css-customization/

    #762240

    sorry – have done!

    #762241

    No worries! And thanks. :) It makes it easier to provide support when the threads are well-organized.

The topic ‘Chunk theme: resize custom header’ is closed to new replies.