9

How do I change the height of the header image (specified in the Header Media section) in the Twenty Seventeen Theme?

Specifically I want to change it on the home page because here it fills up nearly the entire page. I want it to be much shorter. The way it appears on other pages such as the built-in About page has a good height so if I could mimic that on the home page I would be satisfied. Although knowing how to do precise control would be great.

  • Not sure why there isn't a theme-twenty-seventeen tag when there seem to be corresponding tags for the previous years. – User Mar 6 '17 at 10:55
  • This is a good question, sad there's no clear answer yet. Wish it was a filter 🤷🏻‍♀️ – jerclarke Aug 3 '17 at 4:00
  • Related question on Stack Overflow – Wikis Sep 25 '17 at 17:19
2

I found (part) of the css code that controls the height in wp-content/themes/twentyseventeen/style.css.

There is code that applies when the admin bar is not visible (typical anonymous user) currently at line 3629

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

And code that applies when the admin bar is visible (e.g. you are logged in) currently at line 3646

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
  height: calc(100vh - 32px);
}

And then code that applies on mobile currently at line 1638:

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
        display: table;
        height: 300px;
        height: 75vh;
        width: 100%;
}

By copying these three sections of css into my child theme's style.css and modifying the height attribute I was able to tweak the height for the header image on the home page. I set the height to 30vh, calc(30vh - 32px), and 30vh respectively in each section. I left the first height: 1200px alone.

Note the height element is set at 100vh which sizes the height relative to the viewport height. So 100vh is 100% of the viewport while 50vh is 50% of the viewport.

One odd thing is that on the home page the zoom and position of the header image is different than on other pages.

Not sure if this is the best way. I'm open to better options but so far it's working at a basic level.

  • it does seem to be an odd bunch of CSS. I haven't tried it (but I'm confident it won't work) to have the max-height 500px and height 100vh. ie, fill the view port until max height of 500px. – Madivad Aug 6 '17 at 17:12
  • Did you also include the @media inquiries? There are three different sections so that it can work differently on mobile devices vs. computer screens (the third is for computer screens with the admin bar). I've been struggling with this same question, and can't get my child theme to override the source theme Media Inquiries (even with !important). – Erik Harris Dec 29 '17 at 3:31
2

Just edit the theme from the dashboard and add the following CSS definition into the theme section "custom css":

.has-header-image.home.blog .custom-header {
    height: 26vh;
}
1

From a comment I made in @User's answer (that's a cool name) ;) I thought I would give it a go.

I am editing the theme file directly because I am working in a throw-away docker container, it is more proof of concept. Adapting it to a child theme will need some tweaking.

In content/themes/twentyseventeen/style.css in the area between 3680~3670ish is where the header image lies.

original code:

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

Changing the size (and order) is good enough to achieve the logged out view:

  height: 100vh;    
  height: 100%; 
  max-height: 500px;

I have left the vh and the % to cover those bases where max-height isn't reached, but then set the max-height to what you're after.

There is one caveat to all this:

It's the very top section of pixels. So unless you have a nice portion of image in that area... It looks crappy (many heads chopped off)

more to follow (when I sort it out)

0

You can be changed it by cropping the image. in WordPress, there is an option as customizer. You need to follow below steps for cropping image.

    1) Go appearance->customize
    2) Header media
    3) add a new image and then crop that image as per your needs and you go.
  • 1
    yeah..... that's not the answer. I did that, and it just zooms into that part of the image. Making it a very narrow image but flls the screen – Madivad Aug 6 '17 at 17:11
0

You could use Firebug (or look at the page source code) to find the CSS used to display the header image. Then add the CSS to make the change. The exact CSS you use is dependent on the theme.

Firebug lets you change the CSS temporarily to get it how you want, then copy that new CSS into the CSS page of the theme (if it has that option).

If there is no 'custom CSS' option in your theme, then best way is to create a child theme (lots of tutorials on that), and add your custom css into that child theme's styles.css page. (Never change the parent theme; your changes will be overwritten on the next theme update.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.