Different Headers & Different Sizes for Different Pages

[moxiegirl]

Or the post that could have been titled Diff'rent Strokes? 

Working on Prose Theme and I would like a header on the Home page to be 940 x 656.

On all the other pages I would like a header image to be 940 x 129.

Your help would be divine in accomplishing this 🙂 Muchas gracias!

 

[asdweb]

You can do this with the style sheet.

Post a link to your site so we can see what may need to be changed.

---

Amy Susan Design.com @AmySusanDesign

[moxiegirl]

I'm working it offline so it's not live right now.

[Tony @ AlphaBlossom]

Hello,

It's hard to say exactly which is the best way without seeing your site, but you can set your background image for all pages, probably:


#header {
background-image: ~ your image here
background-repeat: no-repeat;
background-position: center center;
height: 129px;
}


Then for your home page:

.home #header {
background-image: ~ larger image here;
height: 656px;
}


The .home #header will work on the home page only. That's very rough since I can't see what's going on, but it should be enough to get you going.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[moxiegirl]

Okay, I published the website and that didn't exactly work (so that isn't live).

Website is http://www.mupplebee.com/

When I used the code provided, it used the larger image, and cropped it to the smaller image's height. Also the part about signing up for my newsletter then went and cramped over to the right hand side of the pink area.

Thanks for your help, I do appreciate it

[Tony @ AlphaBlossom]

You'll need two different css rules, one for the home header, and one for the rest of the headers.

So it should be:


#header {
max-width: 940px;
margin: 0 auto;
width: 100%;
height: 150px;
background: url("http://www.mupplebee.com/wp-content/uploads/2013/02/SHORTERIMAGE.png") no-repeat scroll 0 0 transparent;
}


.home #header {
height: 656px;
background: url("http://www.mupplebee.com/wp-content/uploads/2013/02/WebsiteHeader.png") no-repeat scroll 0 0 transparent;
}


You may need to add !important at the end of one or both of the .home #header rules (before the semicolon). That should do what you need.

The newsletter is outside of the header, so it should be affected...hard to tell without seeing it 🙂

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Brad Dalton]

CSS would be the best way to go however you could also use conditional tags for this but you might need to add code for flexible header heights or it might resize them. http://codex.wordpress.org/Custom_Headers

$args = array(
	'flex-width'    => false,
	'width'         => 940,
	'flex-height'    => true,
	'height'        => 100,
	'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );

Then you can add the different headers with conditionals

<?php if (is_home() ) { ?>
<div><a href="http://domain.com/wp-content/uploads/2013/02//header-large.png" width="940" height="656" /></a></div>
<?php } ?>

<?php if (!is_home() ) { ?>
<div><a href="http://domain.com/wp-content/uploads/2013/02//header-small.png" width="940" height="100" /></a></div>
<?php } ?>

You could add this to a custom function or using the SImple Hooks plugin

You might also need to edit the default height in the child themes style.css file.

There's also a plugin named wp display headerthat may work for you.

---

Tutorials for StudioPress Themes.

[moxiegirl]

Yes! Got it with the CSS.

At first it still wasn't working until I remembered to changed the default header to the smaller image (as it is on all the pages except the home page). Then I went in to change the default height as well to the height of the smaller image. 

Thank you!!! This community rocks!

[Author]

Posts