Lifestyle Theme – Full size header image

[tikvah73]

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.com

[Brad Dalton]

On 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.

---

Tutorials for StudioPress Themes.

[tikvah73]

Thank you for responding Brad,

I have already changed that code. That is one of the reasons we are so confused.

[Brad Dalton]

That 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.

---

Tutorials for StudioPress Themes.

[tikvah73]

Okay thank you again for your fast reply. I changed the image size, and it is not making any difference.

[tikvah73]

And I also removed the padding off of the site container. 🙂

[Brad Dalton]

You 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.

---

Tutorials for StudioPress Themes.

[tikvah73]

I'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:

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.

[tikvah73]

Oh, and does that mean I should put the padding on the site-container back? I honestly couldn't see that it made any difference.

[Brad Dalton]

Clear 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.

---

Tutorials for StudioPress Themes.

[tikvah73]

I 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?

[Brad Dalton]

Thats right however it will not extend your header image full width outside the site-header container.

---

Tutorials for StudioPress Themes.

[tikvah73]

Okay 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!

[tikvah73]

Okay 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!

[tikvah73]

I'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.

http://homeschoolencouragement.com

[Brad Dalton]

https://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;

}

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Should be ,site-header

You missed the dot.

---

Tutorials for StudioPress Themes.

[tikvah73]

I 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?

[tikvah73]

I 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.

[RobG]

Try 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

[Author]

Posts