How do you use full size header Lifestyle Pro??

[SteveDub]

Hi,

Lifestyle PRO:

Have tried searching but can't seem to find an answer. How do you change the header image so it is full size?? i.e. replace the big block of colour? It seems to only let you upload an image of 320x110. Is this because it re-sizes and you can't put a fixed size image in it's place?

Thanks for your help,
Steve

[Brad Dalton]

Try this http://wpsites.net/web-design/custom-header-image-genesis/

You can change the width in the PHP code located in your child themes functions.php file and also the values under your header section in your child themes style.css file.

---

Tutorials for StudioPress Themes.

[Sam Angel]

I followed the directions from http://wpsites.net/web-design/changing-custom-header-image-sizes-in-different-themes to resize the header in a Lifestyle Pro theme I'm working on.

I set the widget width to 0.

Everything worked fine except for there are blocks of color on each side the the header image that I can't find how to get rid of.

I would like the header to extend out across the color blocks so that the green doesn't show at all.

How can I get this to work?

[Brad Dalton]

Link to your site please.

---

Tutorials for StudioPress Themes.

[SteveDub]

Thank you for your help guys, I will try and have a look at this today as haven't had chance yet.

[Brad Dalton]

Here's the solution you can paste at the end of your child themes style.css file before the Media Queries.

.site-header {
	background-color: #fff;
}

Source http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/

---

Tutorials for StudioPress Themes.

[Sam Angel]

Here's the link: http://members.staceymyers.com/sara/

I'm not sure why the header isn't taking up all of the space inside the header area either. I would like it to extend as far out as the menu bars. When I looked the dimensions were 320 width for the header and 600 width for the header widget so I made my header image 920 width. I would have thought it would take up the entire space by making it that wide. Why didn't it?

[Sam Angel]

If this info:

.site-header {
background-color: #fff;
}

was for me. I tried it and it didn't do anything that I could see after inserting it so I took it back out.

[Brad Dalton]

Try this:

.site-header {
background-color: #ffffff!important;
}

The reason the other code didn't work was because its being over-ridden by the class for the color style options.

Actually, this code is better because it uses the color style class:

.lifestyle-pro-green .site-header {
background-color: #fff;
}

As far as the padding and width etc, you'll find the solution in the tutorial i linked too above.

---

Tutorials for StudioPress Themes.

[Sam Angel]

Thank you so much! Everything is working now and looks great!

[SteveDub]

Thanks for all your help guys, glad you got your site sorted Sam looks good now! Exactly what I'm trying to do, although still with no success, I am going to re-read through these posts and look at the links again!

Is there a specific size you have made your Header Image Sam?? OR does this not matter once the new code is implemented and will this rezise anything to full width??

Thanks for your patience people 🙂
Steve

[Sam Angel]

Steve,

I originally made it to 920x150 but after following the directions from http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area I made it to be 1140x200 and it worked.

Sam

[SteveDub]

Yep that's done the trick awesome 🙂

Thank You very much everyone,
Steve

[SteveDub]

Have just checked this change on an iPad and it doesn't render the header image correctly, it cuts off part of it and doesn't reveal the full size banner. Although seems to look ok on a couple of different PC screen sizes.. any ideas??? This does concern me as obviously the usage of tablet/mobile devices is huge now! I'm wondering whether I need to update to a newer Child Theme that supports this better?

Advice appreciated as usual 🙂

Thanks,
Steve

[Brad Dalton]

You will need to modify the CSS code in the Media Queries for the header elements to fix that.

Its a pretty basic modification.

Just reduce the padding and margins for the site header and other header elements if needed.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

This is the modifed CSS for the Media Queries i tested:

@media only screen and (max-width: 1023px) {

	.footer-widgets,
	.site-container,
	.wrap {
		max-width: 772px;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.content-sidebar-sidebar .content,
	.content,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content,
	.sidebar-primary,
	.sidebar-secondary,
	.sidebar-sidebar-content .content-sidebar-wrap,
	.sidebar-sidebar-content .content,
	.title-area {
		width: 100%;
	}
	
	.site-header {
		padding: 0;
		padding: 0;
	}
	
	.header-image .site-title a {
		background-position: center !important;
		margin: 0 0 0px;
		margin: 0 0 0rem;
	}

	.genesis-nav-menu li,
	.site-header ul.genesis-nav-menu,
	.site-header .search-form {
		float: none;
	}

	.genesis-nav-menu,
	.site-description,
	.site-footer p,
	.site-header hgroup,
	.site-header .search-form,
	.site-title {
		text-align: center;
	}

	.genesis-nav-menu a {
		padding: 16px;
		padding: 1.6rem;
	}
	
	.site-header .widget-area {
		margin-top: 16px;
		margin-top: 1.6rem;
	}

	.site-header .search-form {
		margin: 16px auto ;
		margin: 1.6rem auto;
	}

	.genesis-nav-menu li.alignleft,
	.genesis-nav-menu li.right {
		display: none;
	}

	.entry-footer .entry-meta {
		margin: 0;
		padding-top: 12px;
		padding-top: 1.2rem;
	}
	
	.home-bottom-left,
	.home-bottom-right {
		width: 332px;
	}
	
	.footer-widgets-1 {
		margin: 0;
	}

	.site-footer {
		padding: 24px;
		padding: 2.4rem;
	}

}

@media only screen and (max-width: 767px) {

	body {
		font-size: 14px;
		font-size: 1.4rem;
	}
	
	.site-container {
		padding: 20px 5%;
		padding: 2rem 5%;
		width: 94%;
	}

	.five-sixths,
	.four-sixths,
	.home-bottom-left,
	.home-bottom-right,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}
	
	.site-title {
		font-size: 44px;
		font-size: 4.4rem;
	}
	
	.genesis-nav-menu a,
	.nav-primary .sub-menu a {
		font-size: 12px;
		font-size: 1.2rem;
		padding: 12px;
		padding: 1.2rem;
	}
	
	.nav-secondary a,
	.nav-secondary .sub-menu a {
		font-size: 11px;
		font-size: 1.1rem;
		padding: 10px 8px;
		padding: 1rem 0.8rem;
	}
	
	.genesis-nav-menu .sub-menu .sub-menu {
		margin: -31px 0 0 199px;
	}
	
	.nav-primary .sub-menu .sub-menu {
		margin: -36px 0 0 199px;
	}
	
	.entry-meta .entry-tags {
	  clear: both;
	  float: left;
	}
	
	.entry-meta .entry-comments a {
		margin: 0 0 10px;
		margin: 0 0 1rem;
	}
	
	.lifestyle-pro-home .featuredpost .alignleft,
	.lifestyle-pro-home .featuredpost .alignright {
		float: none;
		margin: 0 auto;
	}

}

---

Tutorials for StudioPress Themes.

[SteveDub]

Thanks Brad,

Sorry are you saying I need to completely replace the 'Media Queries'? also what are the links that are included, I take it I'm not copying these?

Sorry to ask but I'm a little rusty with code! I did copy and paste but wasn't sure which padding to adjust. It looks fine without doing this change on both my PC monitors, which I thought I had solved it through help here. Sam's (above) works fine and I followed the same instructions someone gave to her, so not sure what I've done different?

Thanks again for your time,
Steve

[Brad Dalton]

Its an example of what i used locally to for testing. You can compare it to your existing code and make the changes in your own files.

---

Tutorials for StudioPress Themes.

[SteveDub]

Thanks Brad, If I'm being honest I'm struggling a little to get my head around this. As I'm so early on in the design process I'm going to start from scratch and start the above tutorial again, maybe I went wrong somewhere?! Like I said it seems Sam did exactly this and her site renders fine on an iPad and Moble device.

Thanks again,
Steve

[Brad Dalton]

It depends on how you want it to look on different sized devices and what size your image is.

Different people want it to look differently on different sized devices so its impossible to cover all bases.

The Media Queries will need to be modified according to how you want it to look.

---

Tutorials for StudioPress Themes.

[Author]

Posts