LifeStyle Theme Header

[Kathleen87]

Hi:

The LifeStyle Theme header is only 320 x 110 pixels. You put in an image and then the background color that is comes with - blue, green, mustard, etc. that it comes with is left behind it.

We have a larger image we want to use as our header. We don't want any background colors and we want our image to be most of the width of our site. It looks like the width of the header section above the menu in the demo is 1068 x 175 pixels. Is there a way we can get the theme to take an image of 1068 x 175 pixels instead of the 320 x 110 pixels which it only allows for?

Is there a code I can put into the editor or can you direct me where to go into the editor to make the changes?

Thank you,
Kathleen

[AnitaC]

Check out Brad's instructions here.

---

Need help with customization or troubleshooting? Reach out to me.

[Kathleen87]

Hi:

The answer he gave does not work.

He says to go to the end of the theme and do this:

@media only screen and (max-width: 767px) {
.site-header {
background-image: url(images/second-header.png);
}
}

My images are not located at images. They are at uploads. wp-content/uploads/2013/12/HeaderCurrentSite1.png

What do I put for the URL part?

@media only screen and (max-width: 767px) {
.site-header {
background-image: url(wp-content/uploads/2013/12/HeaderCurrentSite1.png);
}
}

I tried all scenarios and they do not work. What do I put?

Thanks

[Genesis Developer]

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 'YOUR NEW LOGO WIDTH', 'height' => 'YOUR NEW LOGO HEIGHt' ) );

Update the above code in your functions.php file

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Kathleen87]

Please clarify. You are asking me to go to the functions portion. If you don't put in the correct code you can have the whole site disappear.

I want to have a header that takes up the whole width.

This is the code I was told to use on that site that I was sent to

@media only screen and (max-width: 960px) {
.site-header {
background-image: url('http://www.yourmarketingassistant.com/testthesis/wp-content/uploads/2013/12/HeaderCurrentSite1.png');
}

It does not work.

Now to make it work I go to the functions section and put in this section - this is what is there now -

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => '175', 'height' => '960' ) );

Can you confirm that this is the code that I put in the functions section that will make it work?

[nutsandbolts]

Okay, if you're going to alter your functions, file, I would roll back all the changes you made with Brad's tutorial, otherwise things will look kind of strange.

In functions.php, find the current custom header function. Remove it and replace it with this:

/** Add support for custom header */
add_theme_support( ‘genesis-custom-header’, array( ‘width’ => ’1068′, ‘height’ => ’178′ ) );

That will allow you to upload a header image that is 1068x178 in Appearance > Header, which is the exact size of the header area.

Once you upload it, you'll need to make a number changes to your stylesheet to get it to display correctly. If you can post a link to the site you're working on, I'll try to help you get it sorted.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Kathleen87]

Thank you so much for your help. It is becoming more clear now for how to fix.

The site is:

http://www.yourmarketingassistant.com/testthesis/

The header full image is http://www.yourmarketingassistant.com/testthesis/wp-content/uploads/2013/12/SSandAlogo.jpg

1102 width
350 height

If we cannot get the full height to show and I have to resize the header a bit to show that is fine. If you can just give me the CSS code to get me to show the max of what we can do that will be great.

Thanks so much for your help,
Heather

[nutsandbolts]

Find this in your stylesheet:

.header-image .site-title a {
float: left;
min-height: 110px;
width: 100%;
}

and change it to this:

.header-image .site-title a {
float: left;
min-height: 350px;
width: 100%;
}

That gets most of the header image showing. Then find this one:

.site-header {
background-color: #76d2c5;
padding: 48px;
padding: 4.8rem;
overflow: hidden;
}

and remove all the rules, leaving this:

.site-header {
}

That should fix the header on full size screens, though it will still need considerable work for mobile.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[TraceyR]

Hi Andrea,

I have the same requirement as Kathleen, to have a full-width header - 1068px wide, 275 px high.
(When purchasing this version of Lifestyle PRO it says "custom header" ... but it doesn't say it's so tiny!)

I followed your instructions to
a) modify the functions.php file
b) modify the CSS ".header-image .site-title a" - min height
c) modify the CSS under .site-header (I didn't remove all the rules, only added in the background image & a min-height statement

It works beautifully on my PC (see client's test site at http://thesimplewebinarcompany.com/lulu/ ) but looks bad on mobile - you mentioned above that "extensive work" would be needed to sort out the mobile side ... is there a tutorial anywhere that could point us in the right direction to sort out the CSS etc. for mobiles, please?

I presume the reason the original header is small, is that it's to make it responsive - can we have 2 separate headers to cater for different devices?

thanks
Tracey

[TraceyR]

I've just discovered a link to a tutorial in another post on the forum that helps with making the header mobile-friendly :

Customize Mobile Responsiveness of Lifestyle Pro Theme Header

I created a small version of my header, used this tutorial & added in an extra "background-image" statement & it's looking good on mobile too

all the best
Tracey

[AnitaC]

Ohhhh, I apologize for my link blunder! I must not have copied the correct one. Thanks Andrea for jumping in there.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts