Community Forums › Forums › Archived Forums › Design Tips and Tricks › Different Pages with Different Headers
Tagged: different headers pages
- This topic has 12 replies, 2 voices, and was last updated 10 years, 8 months ago by kilerb.
-
AuthorPosts
-
September 4, 2013 at 5:51 pm #60730kilerbMember
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; }
September 4, 2013 at 9:58 pm #60765Brad DaltonParticipantThat'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.
September 5, 2013 at 9:36 am #60851kilerbMemberHmmmm, 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!
September 5, 2013 at 10:00 am #60858Brad DaltonParticipantSeptember 5, 2013 at 10:07 am #60862kilerbMemberI did above.
September 5, 2013 at 10:15 am #60866Brad DaltonParticipantSeptember 5, 2013 at 10:18 am #60867kilerbMemberSeptember 5, 2013 at 10:41 am #60875Brad DaltonParticipantYour 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.
September 5, 2013 at 10:54 am #60880kilerbMemberIt 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.
September 5, 2013 at 2:49 pm #60928kilerbMemberAlso... (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!
September 5, 2013 at 8:44 pm #61009Brad DaltonParticipantYou 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.
September 7, 2013 at 3:58 pm #61262kilerbMemberThanks 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;`September 9, 2013 at 5:23 pm #61600kilerbMemberIs it possible to get the top right widget in the header when you do custom headers with this method? Still stuck on that. Thanks!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.