Lifestyle Pro – Add Full Sized Header Image

[amyplatt]

I am using lifestyle pro and want to add a custom header. I followed all of the instructions and sized my image to the specific size (320x110) but it seems that the only thing replaced is the middle of the standard header box. I would like to have a full size header image totally replace what is there. You can see it now - http://www.takingitupanotch.com (the yellow-ish color is the header I created, the green/blue is what I can't change).

Thanks!
Amy

http://www.takingitupanotch.com

[AnitaC]

Do you only want to change the "teal" color to your yellow-ish color, or are you trying to make that yellow-ish header fit the entire space?

If you only want to change the "teal" color to match your yellow-ish color - look for this and change the background color:

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

---

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

[amyplatt]

I'm actually trying to make the custom header (yellow-ish piece) be the entire header - so that the text is larger and spread across the whole box, not just that little mid-center box.

Thanks!
Amy

[AnitaC]

Check out Brad's instruction here then.

---

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

[GJudy]

I've been trying Brad's instructions, but I cannot get the function numbers to 'hold' when I change them and click on update.

[abexp]

I would like to add that I am also experiencing the same problem. I was starting another site with my old Lifestyle 2 theme, trying to search for the latest "hack" for getting all the original color options back, when I noticed the new "Lifestyle Pro" and hoped all the bugs were finally fixed in this new version.

When i installed Lifestyle Pro, however, I found there are only a FEW color options...and also ran into this insanely little teeny weeny custom header image. If this is seriously what the developers consider "attractive", I would really like to see a site which is successfully using this little header, because I feel like I'm missing something here.

I don't mind the "work around" (brad's instructions) to what it seems should already have been added into this version...but I'm wondering now if it's really worth the trouble...or whether I should just go back to the Lifestyle 2 version.

I really hate to be so negative, but I'm just really having a hard time understanding. Hope you can help! (And, btw, it appears as if GJudy made her last post a week ago, with no further response.)

[Tom]

@Gjudy Where are you entering numbers and clicking update? Brad's tutorial does not include this type of activity.

@abexp There are six theme color options in Lifestyle Pro. Some themes offer one or three or thirteen. Of course, It's possible to add your own color scheme as well or tweak an existing color scheme to suit your needs. Header image, or logo, size is a function of current web design trends and a great many successful sites use a small, even simple logo. Mashable, CNN, The National Post, IMDB and Costco are examples of larger sites that do this. Many smaller sites try to emulate styles, whatever theme they use. Lifestyle Pro happens to have a relatively big header with a smaller image, perhaps to let the image stand on its own. YMMV. And that's why we have tutorials from Brad. 🙂

Also: Lifestyle 2 is not a responsive design, as I recall. Being three years old, it will have some quirks that have probably been ironed out in newer themes. If you like the layout of Lifestyle 2, have a look at News Pro or choose from over 300 themes (shameless plug: see my sig)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[abexp]

thanks mike! after spending all day yesterday & a good part of the night, i've figured out the MAIN reasoning for "lifestyle pro" is this thing you call "responsiveness"...trying to make the websites adapt to all the new platforms (and i'm sure we're not very far away from those even tinier "dick tracy" watches to be the next popular thing. truth is...i feel like i've gone back a couple of decades, when i made ms frontpage websites and was NEVER sure how they would look on all the different browser versions out there. i know i'm going to have to adapt with the rest of the world, but three years (is lifetime 2 that old?) flies by like three weeks to an old man like me...lol

since i'm not quite ready for all the different platforms, i've gone back to lifestyle 2, for the time being, at least. i really haven't found enough "extras" in the pro version, other than that it's "responsive". i will start studying the "responsiveness" of other websites, though. and i will go take a look at "news pro", although another theme isn't quite in the budget quite yet. i'm still waiting for my adsense revenue to hit DOUBLE DIGITS! lol

much thanks!

[Tom]

Mike says: OK!

I'm glad I mentioned that about the reponsiveness or mobile design in newer themes. Lifestyle 2 was announced May 26, 2011. There are also plugins that can help older, non-responsive themes. See WPTouch in the WordPress repository.

There are also dozens of free themes for you to tinker with. See the feature 'free' on my site, linked below, then filter for Features > Mobile Responsive. Free themes usually don't include author support. Since you're already a StudioPress customer, Pro themes are only ~$34, and other authors have themes around this price point as well. Save a dollar a day for a month and you've made your theme budget 🙂

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[GJudy]

Tom, I followed the instructions at the link mentioned above. http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/
I made the changes in the Theme functions and clicked 'update file'. The changes don't 'take'. The numbers do not change in the functions file, so then they don't change at the header either. I just tried again and got a typical 'error' behavior. When I clicked on 'Update File', the screen bounces to the home page, just as it will when a plugin won't update.

Test domain: http://artists.barjd.com

LifeStyle Pro will permit me to increase the Title and Description font size and center it so that I could get something that works for the client without creating a full width header image. This way we can preserve the responsive aspects and give him a 'look' that he wants. (Not the test site)

To get different colors and add borders, etc., I selected one of the color options and changed the hex numbers within it using the custom css.

[Tom]

I made the changes in the Theme functions and clicked ‘update file’. The changes don’t ‘take’. The numbers do not change in the functions file, so then they don’t change at the header either. I just tried again and got a typical ‘error’ behavior. When I clicked on ‘Update File’, the screen bounces to the home page, just as it will when a plugin won’t update.

... I've just realized that you are describing using the WordPress theme editor to try these changes to your site. This is possible but not the best way to customize a child theme because it's easy to make a minor mistake and 'white screen' your site with an error. Then you'll need to break out FTP, download and edit the file for corrections and upload it back to the server. Using the WordPress editor also makes it easy to modify the wrong file - please be certain that you are editing the child theme functions.php from the dropdown selector "Select theme to edit:".

If you are making changes in this manner (typing them into functions.php in the WordPress editor) and the changes do not remain after saving the update ("screen bounces to the home page"), you would appear to have a server and/or permissions (authorization) or other problem with your webhost/installation. This is also a symptom of not being able to update plugins or make similar changes.

I'd suggest that you get some help from your webhost re: your site setup, then try again. Any new problems should be started in a new forum thread.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Brad Dalton]

Try this of you haven't resolved this http://wpsites.net/web-design/lifestyle-pro-full-size-header-image-spanning-entire-width-of-screen/

---

Tutorials for StudioPress Themes.

[Author]

Posts