The width and height of the header image is hardcoded into the theme. To change this, you could amend the following lines in the inc/custom-header.php file:
add_theme_support( 'custom-header', apply_filters( 'twentyfourteen_custom_header_args', array(
'default-text-color' => 'fff',
'width' => 1260,
'height' => 240,
'flex-height' => true,
'wp-head-callback' => 'twentyfourteen_header_style',
'admin-head-callback' => 'twentyfourteen_admin_header_style',
'admin-preview-callback' => 'twentyfourteen_admin_header_image',
) ) );
The full path to the file is /[WordPress directory]/wp-content/themes/twenty-fourteen/inc/custom-header.php.
To avoid this modification being overwritten by theme updates you should use a Child Theme, paying special attention to this section to ensure you correctly load in the child theme’s version of this file (i.e. not the parent theme’s version).
Thanks a lot. Sorted out a child theme and this seems to work.
Much appreciated.
Thanks for these posts.
My wide screen monitor still leaves a white space to the right of my header image.
Can anyone tell me how I could fill it up with a background color?
See my site.
@bertvandersaag If you have any questions that are not related to a thread’s question, please open your own thread, so people can navigate to it more easily.
Anyways: You can fill your header up with a background colour by adding this to your style sheet:
#site-header {
background: red;
}
Choose any colour.
Emily, sorry for the inconvenience, but you have saved my day!
No biggie, happy to help. 🙂
If all your header images are going to have the same length & width, would it be wise to set L=100% and W=100%?
I don’t want my images to look stupid on a smart phone screen. Any suggestions on how to make sure flip/rotate nicely?
Jose, if you set 100% width and height on your images, they are going to scale responsively, no matter the size. I won’t be able to fully understand the context of your question, though. Now if you have a live website I can take a look at, I’m sure I could be of better use.
Same goes for flips and rotations. I just couldn’t tell where you’re going with that, and it all depends on the context. But you could read up on CSS transitions here:
http://css-tricks.com/almanac/properties/t/transform/
I want to do the same thing but can’t figure out how to get the custom header file loaded from my child theme folder.
Can someone give me step by step instructions because i’m rather new to webdesign/wordpress!
Thanks
Lenny, if you did exactly like WordPress have described it in their step by step guide on how to set up a child theme, your custom file will load automatically. See the guide here:
http://codex.wordpress.org/Child_Themes
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you need more support than that has already been given in this thread please open a new one: https://wordpress.org/support/theme/twentyfourteen#postform