Frustrated with Lifestyle Pro Image Header

[diligence]

Ok... so I'm working on a project for a client, and I have Googled and attempted to implement the code snippets of about 4 different people, modifying functions.php along with style.css, and have failed miserably 🙁

Here is what I have reviewed so far...

https://www.youtube.com/watch?v=Qx9yKZ4GKJ0 (From Karinah.com uses outdated custom.css)

Customize Lifestyle Pro Theme Header Image Area

http://www.howtoblogdesign.com/2014/06/changing-header-image-lifestyle-pro-wordpress/
http://keypresswp.com/getting-your-head-around-header-images/#option6
http://keypresswp.com/full-width-responsive-header-image-lifestyle-pro/

Obviously it's user error on my part, I know, which is why I'm here throwing myself at the mercy of the forum 🙂

Help would be greatly appreciated ???

Thanks in advance...

http://ColombianMatchmaker.com

[Tom]

What is the design spec from the client?

---

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

[carasmo]

To learn about hooks to add more content in the header or other locations in any child theme, the documentation on my.studiopress.com is where to look first. Plus, if I were you, I'd join http://wpsites.net/register/ or similar.

To learn about CSS, there's many tutorials in the wild. You'll need to learn about specificity, parse errors -- { must close }, and what blocks, floats, inline elements are, background-size, and on and on. For this theme, learn about max-width media queries or desktop first media queries.

If you have CSS that comes after other CSS, you must use the same or greater specificity. Since the default theme is not using any body class to modify the colors, set in your theme settings to choose a color theme, then I can just write the same specificity, however if I chose a color theme in my settings I have to use that specificity.

If I chose lifestyle-pro-mustard, then my body class is now .lifestyle-pro-mustard so I must use that class before any child selector and AFTER the CSS I want to overwrite.

.lifestyle-pro-mustard .site-header {
	background: purple;
}

It's easier to use the default colors and just style those.

Here's the CSS used to make the screen shot:

/* ======== customize .site-header and .nav-secondary background =========== */

.site-header {
    background-image: url(http://demo.studiopress.com/lifestyle/files/2013/06/bread-634x360.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.header-full-width .title-area {
    background: rgba(0,0,0,.7);
    padding: 20px;
    display: inline-block;
    width: auto!important;
    float: none;
    border: 1px solid rgba(255,255,255,.7);
}

.nav-secondary {
    background: #000
}

@media (max-width:1023px) { 
	.site-header {
	    text-align: center
	}

	.header-full-width .title-area {
	    padding: 10px
	}

	.site-title {
	    font-size: 30px
	}

	.site-description {
	    font-size: 14px
	}
}

---

Genesis Theme Customization and Help

[carasmo]

The screen shot is different. The CSS in the post is the one to use.

---

Genesis Theme Customization and Help

[diligence]

Tom, as far as a design spec from the client, they just want me to add a full size image header for now.

[diligence]

Carasmo... so basically it looks like I need to go through the "How to Setup My Theme to Look like the demo" video in order to learn how to put in an image header? I have not gone through that video yet. I must have missed (overlooked) that memo, unfortunately.

[Tom]

they just want me to add a full size image header for now.

OK. I wrote the last two tutorials you cited, which have worked easily for many people as written. Where are you having difficulty?

---

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

[diligence]

Tom... your code worked for me! Thanks so much!

As you know, I listed five links above, with yours being the last 2.

The first one was Katrinah's video, which had awesome, implementable content, until it got to the part where she indicated that the customization portion was outdated.

The next two links were code snippets, which apparently left out some instructions, so I implemented them and they didn't work out for me (user error, I'm sure).

When I got to yours, I did NOT implement it. I read through it, and... since your instructions span 2 different articles for the Lifestyle theme... I overlooked the part of EXACTLY where to put the code, trying to coordinate "Option 6 step 3". Moving back and forth between articles was a little hard to follow for someone like me, who is css-challenged and php-challenged 😉

I'm still confused about this part...

"Edit 2015-03-06:

In the media query for 1023px there is a padding declaration that should be deleted, commented out or made zero (style.css at line 1845 [version 3.1]). This change has been made in the above snippet."

So far, I've just ignored it, since you ended by saying that the change has already been made in the above snippet. I didn't see anything that looked identical to it in the above snippet, so I just took your word for it, and it appears to have worked.

In conclusion ... after your latest prompting, I went step by step, and saw that you actually give very specific instructions, that I was able to follow.

THANKS AGAIN !! 🙂

[diligence]

Carasmo... I also plan to go through the Lifestyle Pro demo, on another domain, and try your CSS for changing the header image. Thanks 🙂

[Tom]

@diligence You're welcome! The tut's are in two parts because the CSS is different for individual child themes. The edit was added so people could see that the tut changed with minor changes in Lifestyle Pro. You won't see the identical 'edit' snippet in the tut code because it's meant to undo the effect of the child theme changes instead of implement them.

---

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

[Author]

Posts