Community Forums › Forums › Archived Forums › Design Tips and Tricks › Lifestyle Theme – Full size header image
- This topic has 23 replies, 3 voices, and was last updated 10 years, 5 months ago by Brad Dalton.
-
AuthorPosts
-
November 9, 2013 at 6:50 pm #71919tikvah73Member
My blog is homeschoolencouragement.com, and I am using the Lifestyle theme.
I want my header image to take up the full header box. I have tried multiple things to no avail. Is there a code overriding the coding changes I have been making?Please advise.
http://homeschoolencouragement.comNovember 9, 2013 at 8:21 pm #71933Brad DaltonParticipantOn line 829 of your child themes style.css file you'll see this CSS code:
.site-header { background-color: #76d2c5; padding: 48px; padding: 4.8rem; overflow: hidden; }
Remove the padding from this code and your header image will extend full width of the site header.
Note: It won't extend full width of the site container.
November 9, 2013 at 8:32 pm #71937tikvah73MemberThank you for responding Brad,
I have already changed that code. That is one of the reasons we are so confused.
November 9, 2013 at 9:22 pm #71943Brad DaltonParticipantThat covers the entire site header width or header box as you referred to.
To extend beyond that, you will need to remove the padding for the site container next to the site header.
Your original image width of 960px will need to be changed to 1140px as this is the entire width of the site container.
November 9, 2013 at 9:47 pm #71947tikvah73MemberOkay thank you again for your fast reply. I changed the image size, and it is not making any difference.
November 9, 2013 at 9:50 pm #71950tikvah73MemberAnd I also removed the padding off of the site container. 🙂
November 9, 2013 at 10:33 pm #71960Brad DaltonParticipantYou will also need to change the values for the width in your style sheet.
If you added the header image using the custom header uploader, you will also need to change the values for the width as well in the PHP code.
Or you can remove the PHP for the custom header and use CSS to add your new image:
.site-header { background-image: url(images/logo.png); height: 168px; width: 100%; }
Upload your image to your child themes images folder and change the file name to match the code:
logo.png
Removing the padding for the site-container removes the padding for the entire page site wide.
November 9, 2013 at 10:47 pm #71964tikvah73MemberI'm sorry I didn't give enough information in my first post.
I did already change the width and height in the .php file using the tutorial here:
http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/
I went through your tutorial very carefully and made sure I did everything you said first. It didn't work.
Then, my header designer tried adding some custom code which did not work.
At this point, we are inserting the header image using Genesis Simple Hooks. This is the closest we have gotten it after going through all of these steps.
So I want to make sure I understand what you are saying, because I am truly a "code hack" and not a programmer (sorry!)
I need to remove this completely from the .php file:
//* Add support for custom header
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 200,
'width' => 1140,
) );and add this
.site-header {
background-image: url(images/logo.png);
height: 200px;
width: 100%;
}Is that right?
Honestly, I love everything else about Lifestyle or I would be switching to a different theme.
November 9, 2013 at 10:53 pm #71966tikvah73MemberOh, and does that mean I should put the padding on the site-container back? I honestly couldn't see that it made any difference.
November 9, 2013 at 11:12 pm #71971Brad DaltonParticipantClear your browser cache and check because it normally does.
I don't think you can extend the site header to the site container without recoding some of the default code.
November 9, 2013 at 11:34 pm #71974tikvah73MemberI have cleared my browser cache, and emptied my page cache.
I'm repeating this because I want to make sure it is correct before I try it.
So I want to make sure I understand what you are saying, because I am truly a “code hack” and not a programmer (sorry!)
I need to remove this completely from the .php file:
//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘header_image’ => ”,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false,
‘height’ => 200,
‘width’ => 1140,
) );and add this
.site-header {
background-image: url(images/logo.png);
height: 200px;
width: 100%;
}Is that right?
November 10, 2013 at 12:11 am #71976Brad DaltonParticipantThats right however it will not extend your header image full width outside the site-header container.
November 10, 2013 at 12:14 am #71977tikvah73MemberOkay thanks! I will give it a try.
I don't think I want to extend if full-width so that is okay. Inside the container, but without the green background will be awesome!
November 10, 2013 at 12:14 am #71978tikvah73MemberOkay thanks! I will give it a try.
I don't think I want to extend if full-width so that is okay. Inside the container, but without the green background will be awesome!
November 10, 2013 at 12:31 am #71980tikvah73MemberI'm not sure you really want or need to keep helping me with this, but that did not work either.
Here are the steps I took:
1. inserted the code to my css
site-header {
background-image: url(images/logo.png);
height: 200px;
width: 100%;
}2. uploaded my image - renamed to logo.png to my child theme's image file using my cPanel login.
3. removed this from the .php code
//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘header_image’ => ”,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false,
‘height’ => 200,
‘width’ => 1140,
) );4. Removed the Genesis Simple Hooks code I had placed earlier to put the image in my header.
Now, I have no image, just a green box, and no site title either.
November 10, 2013 at 12:54 am #71983Brad DaltonParticipanthttps://www.diigo.com/item/image/4fb0f/rias
Works for me:
.site-header { background-image: url(images/logo.png); height: 200px; width: 100%; margin: 0; margin: 0; max-width: 1140px; overflow: hidden; padding: 0; padding: 0; }
November 10, 2013 at 12:57 am #71984Brad DaltonParticipantNovember 10, 2013 at 1:21 am #71985tikvah73MemberI had the . in the code, just did not copy it here.
So, I have tried to re-install the theme hoping I could start from scratch and maybe that would solve the problem.
Now I need to know how to get WordPress not to re-apply all of the changes I had made to the theme in the past 24 hours.
I deactivated the theme and activated Genesis Sample.
I deleted the theme.
I re-installed WordPress
I looked at the blog in Genesis Sample.
I went in and uploaded a fresh install of lifestyle-pro.zip.
I looked at my blog, and it had saved the color customization I did earlier.
I decided to try a different method.
I copied just the css file from my computer file of lifestyle-pro.
I pasted that into the css stylesheet on my website.
Result? No change. It still has the matching green color I customized at the start of this mess.
In fact, the css code shows the correct color, but the blog shows the old color.and I did clear my browser cache, and my caches in WordPress.
Now I am like a dog with a bone. I do not want to give up.
Can anyone help?
November 10, 2013 at 1:55 am #71991tikvah73MemberI ended up just restoring it to what I started with at the top of this thread, so that it at least looks half-way decent. I have to get some sleep and I don't want a bunch of people looking at it all a mess.
Thank you for your help. I will either get fresh eyes tomorrow, or switch themes completely.
November 10, 2013 at 5:43 am #71999RobGMemberTry locating the following CSS codes in your stylesheet file. I've tested using Firebug and it seems to expand the header logo. Reduce the padding from this point ( padding: 3.6rem; ) you can change the 3.6rem to a lower number to make this work.
/* Site Containers --------------------------------------------- */ .site-container { background-color: #fff; box-shadow: 0 0 5px #ddd; margin: 36px auto; margin: 3.6rem auto; max-width: 1140px; overflow: hidden; padding: 36px; padding: 3.6rem;
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.