Community Forums › Forums › Archived Forums › General Discussion › Genesis Sample Theme – Full Width Header Image
Tagged: Full width header image, Sample Theme
- This topic has 9 replies, 2 voices, and was last updated 10 years, 11 months ago by
Marcy.
-
AuthorPosts
-
February 20, 2014 at 4:15 am #91354
Genesis
MemberHi,
I tried following this website to make my header full width:
But as soon as I add the following code listed, my header image disappear and instead only text displayed with greater height.
add_theme_support( 'custom-header', array( 'default-text-color' => 'ffffff', 'height' => 164, 'width' => 1600, ) );
Can someone please guide one how can I make my header image full width?
Thanks!
P/S: Still developing offline, no URL.
February 20, 2014 at 4:57 pm #91509Marcy
ParticipantThat tutorial discusses two ways to add a logo to the Genesis Sample.
1. The first part of the tutorial:
If you want to use a background image, then you need to use:
/* Logo, hide text */
.header-image .site-header .wrap {
background: url(images/logo.png) no-repeat left;
padding: 0;
}
And then name your logo, logo.png and add it to the /images folder.2. For the second part of the tutorial, it adds a custom upload of the header image in your WordPress under Appearance > Header.
So you add the code to your functions.phpadd_theme_support( 'custom-header', array( 'default-text-color' => 'ffffff', 'header-selector' => '.header-image .site-header .wrap', 'height' => 164, 'width' => 320, ) );
and then login to WordPress and upload the logo under Appearance > Header
Marcy | Amethyst Website Design | Twitter
February 24, 2014 at 4:21 am #92097Genesis
MemberI tried the second one by adding height: 320 and width 2520 but both left and right side is still white background. Any ideas?
February 26, 2014 at 12:42 am #92426Marcy
ParticipantIt would be a bit easier to help, if you provided a link to your site. But here goes...
Find this selector in your style.css:
.site-header .wrap {
padding: 40px 0;
padding: 4rem 0;
}
and add max-width: 100%; to it, so it looks like:.site-header .wrap { padding: 40px 0; padding: 4rem 0; max-width: 100%; }
And then you may want to change this section (change left to center) so that it centers the header:
.header-image .site-header .wrap { background: url(images/logo.png) no-repeat center; padding: 0; }
Marcy | Amethyst Website Design | Twitter
February 26, 2014 at 2:08 am #92437Genesis
MemberHi Marcy,
Many thanks!
Now, I'm able to view it right in the browser.
There's one problem left though. When resizing the browser, it header can be viewed on the center part.
Here's the screenshot of different sizes of browser:
Full Screen:
50% Screen:
Smallest Screen:Is there any way that I can make the entire header viewable lihe slider does?
Thanks!
February 26, 2014 at 11:33 am #92489Marcy
ParticipantAgain I can't really help without a link to your site. There are no links to your images, so I'm guessing again.
You need to add a contain or cover properties to your image size to see which you like best, but since your image is so large, I'm not sure how that's really going to work for you. It may be best to actually size the image yourself for different screen sizes and add that to you @media query sections.
To add cover or contain properties, you have to write the entire background image CSS on separate line to do it, so you would now have:
.header-image .site-header .wrap {
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: center top;
background-size: contain; /* or you can try background-size: cover; instead */
padding: 0;
}
Marcy | Amethyst Website Design | Twitter
February 26, 2014 at 11:00 pm #92600Genesis
MemberHi Marcy,
Sorry that I don't have a link now as I'm doing it offline for now.
The code managed to put the image viewable in full-width but the part under it is having space when resize to smaller window:
This is smallest browser window. Link to the image: http://postimg.org/image/cqmegarqn/This is the code following the header:
.header-image .site-title a { float: left; min-height: 245px; width: 100%; }
Thanks again! Appreciate! 🙂
February 27, 2014 at 1:29 pm #92714Marcy
ParticipantYou need to add some extra @media sections at the bottom of style.css to reduce the height of the header. I don't know the height you need, so you will have to look at your site for different screen sizes yourself to see what height you need.
For instance
@media only screen and (max-width: 480px) {
.header-image .site-title a {
min-height: 100px;
}
}
@media only screen and (max-width: 320px) {
.header-image .site-title a {
min-height: 75px;
}
}
Marcy | Amethyst Website Design | Twitter
March 11, 2014 at 8:58 pm #94365March 11, 2014 at 9:10 pm #94366Marcy
Participant -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.