Smaller Header?

Home › Forums › Automattic › Vagabond › Smaller Header?

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 29, 2014 at 6:25 pm #157153 Resolve

    pointspilot
    Member

    Hey, I’d like to create a smaller header area.
    Right now, even if I upload a smaller header image, it always uses the size of 940 × 453 pixels and even blows up a smaller image.

    How can I get the header region smaller and that it uses the picture size I define?

    Thank you so much for your help.

    July 30, 2014 at 2:41 pm #157170

    Kathryn P.
    Happiness Engineer

    Using the header uploader tool will actually resize your header image to the default size specified by the theme.

    If you want to use a smaller header image than what the theme calls for, you’ll need to bypass the header area in the Customizer and code it using CSS instead.

    Here’s some example code to give you an idea what I mean

    #header-background {
    background-image: url(http://pointspilot.files.wordpress.com/2014/08/your-header-file.png);
    background-repeat: no-repeat;
    }
    #header-background:after {
    width: 640px;
    height: 500px;
    }

    You’ll need to change the height and width to match the exact size of your uploaded image, and you’ll need to change the file path to your image. You can find the image’s file path in the media library, in the URL field.

    Just let me know if you need further help with it.

    July 30, 2014 at 6:37 pm #157171

    pointspilot
    Member

    Thank you so much Kathryn! It worked perfectly.

    Now, I’d just need to adjust the region for the header.
    I used a smaller height and right now there is too much space between the link bar at the bottom
    the header and then where the content starts.

    Did that make any sense?

    You can see the new header live on the site, maybe you see what I mean.

    It would be absolutely wonderful if you could also help me with this.
    Thank you so much!!

    July 30, 2014 at 7:03 pm #157172

    Kathryn P.
    Happiness Engineer

    Looks like your image is actually only 934 x 252:

    http://pointspilot.files.wordpress.com/2014/07/pointspilot_logo1.png

    …but you’ve set the height and width as 640px x 500px in the Customizer. My numbers above were just for the sake of example; they should match your real image dimensions. :-)

    So in your CSS, try changing this:

    #header-background:after {
	width: 640px;
	height: 500px;
}

    to this:

    #header-background:after {
	width: 934px;
	height: 252px;
}

    Add this piece of CSS as well and you should be good to go:

    .site-header hgroup .site-header-wrapper {
	min-height: 252px;
}
    July 30, 2014 at 7:49 pm #157173

    pointspilot
    Member

    Oh yes of course! Sorry that was really my mistake, that I didn’t adjust the sizes!
    And yes, the last code also did the trick!

    Thank you so much, now I’m all set :)))

    July 30, 2014 at 8:06 pm #157175

    Kathryn P.
    Happiness Engineer

    It looks great, glad you’re set!

    http://pointspilot.com/

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.