Lifestyle Theme Header

[denissemarie]

Hi, the new Lifestyle theme only gives you the ability to change the header with a size of 320x110 but how can I edit the entire header? I can't seem to find the size of the entire header. I want to add a custom one - not just change the image in the center.

Also, where would I add the header in the code?

Thank you in advance.

http://www.artkidstic.net

[Brad Dalton]

You can change the size for the Custom Header uploader.

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header_image'    => '',
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 110,
	'width'           => 320,
) );

You can change these values and also the values for the height and width in the CSS code under the Header section.

---

Tutorials for StudioPress Themes.

[denissemarie]

Hi thank you for your response. I did this and changed it to 920x110 but it still shows a frame around the header I upload. I can't seem to find the size for the entire header. What is the entire width and height?

Thanks again!

[Brad Dalton]

Link to it please so i can inspect the code and help you.

---

Tutorials for StudioPress Themes.

[denissemarie]

Hi the link is http://www.artkidstic.net

[Brad Dalton]

Please add this code at the end of your child themes style.css file:

.site-header {
    background-color: #FFFFFF;
    overflow: hidden;
    padding: 4.8rem;
}

I found this code by inspecting the header using Firebug

---

Tutorials for StudioPress Themes.

[matthewende]

Hi, I am having the same issue with the header. Trying to make it the same size as the original panel but no matter what size I try it won't work. (currently 1068x206)

http://www.mattende.com/mattende

[Brad Dalton]

You do need to modify the CSS code for the header to make this work because there is a fair amount of padding.

I am in the middle of writing a tutorial on this topic and will publish it within a few hours.

---

Tutorials for StudioPress Themes.

[denissemarie]

Thank you again for your help.

Is there any way to find out what the size is of the entire header area? Because what you are saying works but only if the background of the header is white. But if I change the background of the header to another color there is still a border. The reason this matters to me is because I am having a new header designed and the background will not be white.

Please see screenshot where you see border even with the change you listed before:

http://screencast.com/t/2iinSJwt61ma
(this shows the gray border - I would like my header to cover the entire gray area)

I think I found another section where it said a width of 1140 - is this accurate?

Thanks again.

[Brad Dalton]

Its not a problem and easily fixed http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/

1140px is correct.

---

Tutorials for StudioPress Themes.

[denissemarie]

Awesome! Thank you so much.

[matthewende]

Thanks so much Brad, great tutorial!

[dc50093]

The css changes in the tutorial are not working for me and I have a few questions. First, do we drop the code in at the very bottom of Lifestyle's style.css or do we override the pre existing rules that are found a short way up from the bottom? Either way it's not working me and there is a frame around my 1140 x 200 image. I'm building the site locally on a WAMP so I can't provide a link.

[Brad Dalton]

Its hard to say without inspecting your site with Firebug.

You can change the existing CSS rules and add the code at the end of the style sheet.

---

Tutorials for StudioPress Themes.

[Author]

Posts