Different Pages with Different Headers

[kilerb]

Hi, I asked this awhile back with the old streamline. Not even sure they had child themes then. The code below worked great in my style.css sheet. I just tried doing this again and it seems to not work. Does this not work with the newest version of streamline? If not, how can I accomplish this? Thanks!

/***** Image Header - Partial Width ********************/

.header-image #header #title-area {
  background: url("images/header.jpg") no-repeat scroll center top transparent; }

	
.header-image.page-id-365 #header #title-area {
  background: url(images/videosheader.jpg) no-repeat scroll center top transparent;
}
 
.header-image.page-id-327 #header #title-area {
  background: url(images/photosheader.jpg) no-repeat scroll center top transparent;
}

.header-image.page-id-56 #header #title-area {
  background: url(images/calendarheader.jpg) no-repeat scroll center top transparent;
}

.header-image.page-id-361 #header #title-area {
  background: url(images/blogheader.jpg) no-repeat scroll center top transparent;
}

.header-image.page-id-389 #header #title-area {
  background: url(images/writingheader.jpg) no-repeat scroll center top transparent;
}

.header-image.page-id-1049 #header #title-area {
  background: url(images/contactheader.jpg) no-repeat scroll center top transparent;
}

[Brad Dalton]

That's right.

The markup has changed so you need to change #header to .site-header.

You can do that very quickly using Notepad ++ and the search > find > replace feature.

You can also use custom fields which is a really cool way to add different headers on any post or page.

---

Tutorials for StudioPress Themes.

[kilerb]

Hmmmm, I used this code and it is not changing the header on the page number I specified. The site is daniellestewart.com

.header-image.page-id-101 .site-header #title-area {
  background: url(images/videosheader.png) no-repeat scroll center top transparent;
}

Thanks!

[Brad Dalton]

Please link to the page.

---

Tutorials for StudioPress Themes.

[kilerb]

I did above.

[Brad Dalton]

I need a url to the page-id-101 please.

---

Tutorials for StudioPress Themes.

[kilerb]

Ah.... http://www.daniellestewart.com/blog/

[Brad Dalton]

Your theme is running XHTML markup so the new class selectors (.site-header) only work for HTML 5 enabled child themes running Genesis 2.0

You will need to use the original code which works on themes running XHTML.

---

Tutorials for StudioPress Themes.

[kilerb]

It says I'm running Genesis 2.01. I don't understand the XHTML thing. Is that something that should've been automatically updated when I upgraded to Genesis 2? It's a pretty fresh install. This site had a virus and we had to start from scratch a couple weeks ago. I probably uploaded 1.9 and then upgraded or something.

[kilerb]

Also... (Continued) The old code does work, but it's only showing up on the left half of the header. Doesn't fill it up completely. Why would that happen? Thanks!

[Brad Dalton]

You will need to follow the tutorial and modify the values for your header CSS.

Genesis 2 doesn't output your markup as HTML 5 unless you convert the CSS and add HTML 5 support to your child theme. I would test this locally first.

---

Tutorials for StudioPress Themes.

[kilerb]

Thanks Brad. So I did what you said in regards to the header and the custom headers only took up half the header area. So I switched the width below to 960px. But, now the social media widget that used to be in the top right corner of the header (actually inside the header area) is now below the header completely. I know I could probably move it above the header with some hooks, but I really liked it when it was inside the header at the top right like before. Is this possible to do with my custom headers? How can I achieve this? Thanks!`/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 335px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 960px;`

[kilerb]

Is it possible to get the top right widget in the header when you do custom headers with this method? Still stuck on that. Thanks!

[Author]

Posts