Lifestyle Pro Custom Header scaling

[Steve@316 Design]

How can I have the custom headers for the Lifestyle Pro theme scale like the Modern Portfolio theme?

LSP - Theme - http://stevenlatinofishing.com/
Modern Portfolio theme - http://www.316design.com/

Thank You,
Steve

---

Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™

[nutsandbolts]

If you remove the header image from Appearance > Header, you can add it manually by putting this in your stylesheet:

.site-title a {
background: url(http://stevenlatinofishing.com/files/2013/10/HEADER-Steven-Latino.jpg) no-repeat !important;
background-size: contain !important;
}

That will give you some padding issues to contend with, but it will force the header image to resize depending on browser width.

---

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

[Steve@316 Design]

Thank you, but it's not something I want to do manually every-time I use this theme, which is a lot.
I'd like it to work like the Modern Portfolio theme – http://www.316design.com/

---

Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™

[nutsandbolts]

I'm really not sure how to respond to that - you're looking for a custom solution that would take quite a bit of development time. That's not really an appropriate request for the support forums since we are unpaid volunteers... I would recommend hiring a dev if you need that functionality.

---

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

[Steve@316 Design]

Maybe I should have added this: I use this theme in a WPMS install on many sites of the WPMS install. I dont want to have to "add it manually" to the style sheet each time. That would also mean having to use a different copy of the theme for each website.

Did you happen to look at the difference in the two sites and how the header images is scaling for smaller devices?

When using the Modern Portfolio theme – http://www.316design.com/ I just add a custom header the same way we have for several theme versions but for some reason (I don't know why) the way the header is scaling on the Lifestyle Pro theme is sort of odd. When viewed on smaller devices it has a large amount of space around the header.

See attached. It appears the header is actually NOT scaling at all on the Modern Portfolio theme which is fine & what I'd like for the Lifestyle Pro theme.

Also, I've been part of the Forums since the Revolution days and certainly understand & respect the volunteer help in the forums.

---

Steve Adams | 316 Design | 619.726.9923
We live the lifestyles that we promote.™

[lily]

@nutsandbolts - when I used your code it created a header within the header. Basically both pictures stacked on top of each other, one 1/3 of the size of the other. Any advice on what I might have done wrong?

[nutsandbolts]

Hi Lily,

You may need to remove the custom header function from functions.php, then go to Genesis > Theme Settings to choose "image logo" from the header dropdown. This will tell Genesis to look in your style.css for your header image.

---

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

[Author]

Posts