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.

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.

| improve this answer | |
  • 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;
}
| improve this answer | |
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)

| improve this answer | |
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.
| improve this answer | |
  • 2
    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.)

| improve this answer | |
0

I approached this by first setting up a child theme (recommended step by WP). Then in the style.css file of the child theme, I added the css below. The first section controls the height of the image on the front page; the second section controls the height of the space for the image on the front page. Both have to match for this to work. I commented out some lines that interfered with my fixed height image. Now my header on the home page is exactly the same as on all other pages.

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    /* height: 100%; */
    height: 400px;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}
.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: 400px;
    /* height: 100vh; */
    /* max-height: 100%; */
    overflow: hidden;
}
| improve this answer | |
  • "The first section controls the height of the image; the second section controls the height of the space for the image." - only on the front page I think? – Rup Jan 28 at 14:59
  • Rup is correct: "only on the front page," so I edited the reply. – pfinley Jan 29 at 15:19

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.