Need help? Check out our Support site, then


Customizing Twenty Twelve theme header using CSS

  1. kirstenjoyawake
    Member

    I'm brand new to CSS. I'm giving it a shot to learn : ) I'm using Twenty Twelve theme. I'd like to change my header to a full page width with no margin at the top. Would someone be able to assist me with this?

    Kirsten

    The blog I need help with is kirstenjoyawake.com.

  2. You can upload and use a header image of any size, up to 2000px wide in twenty twelve as it supports the flexible header feature.

    http://en.support.wordpress.com/themes/custom-header-image/#flexible-headers

    You can upload and insert one following the instructions in the above support document. I would do this and see how things look. If you have problems, or want to make adjustments after uploading the image, let us know however, we volunteers cannot see sites that are set to private. You will have to set it to public for a short time so that we would be able to help you with your adjustments. If you cannot set it to public, let us know and we can tag this thread for staff attention and then they can help you with it since they can see your site.

  3. kirstenjoyawake
    Member

    Thanks so much for your response! I changed my privacy settings so you can view my blog. My apologies : ) I have an image uploaded for the banner that is 1987 x 249 pix. It shows the whole image without cropping, however, it stills gets crammed into the 960 pixel space that the template allows for. I'd like the image to span the width of the screen, not be crammed into the little space allowed by the template. Any advice for this?

  4. Hmmm, this could be tricky. Let me work on it. I've got some errands to run and will look into it further when I get back.

  5. I'd like the image to span the width of the screen, not be crammed into the little space allowed by the template. Any advice for this?

    Here are a couple very basic CSS snippets you can add as a test and that will also help us figure out your end goal.

    Do you mean you want your custom image to be part of the background behind the white container that holds the content, like this?

    body {
    	background: url("http://kirstenjoyawake.files.wordpress.com/2013/04/cropped-kirsten-joy-awake_header5.jpg") top center repeat-x;
    }

    Or do you mean you want to try to setup a header image that fits snug to the main content container more like this?

    body .site {
    	padding-left: 0;
    	padding-right: 0;
    }
    .header-image {
    	margin-top: 0;
    }

    Those aren't solutions, but they may be enough to get you going in the right direction.

    It does sound a little like you're trying some very advanced CSS updates for this theme. :)

  6. kirstenjoyawake
    Member

    Yes, this worked! Thank you so much for your help! I used the first snippet to make the image part of the background and then, I set the site width to 100%. I'm not sure how to remove the white space above the background image though. Would you have any advise on this?

  7. Did you try removing the margin from the header image area like this?

    .header-image {
    	margin-top: 0;
    }
  8. kirstenjoyawake
    Member

    That did it. Thank you so much for your help. I really appreciate it!
    : )

  9. Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic