[SOLVED] How to remove header from posts

ZachS · #1 Dec 6, 2010, 06:14 PM

Hello,

I am wondering if there is any way to keep my header on the main pages but hide it on my blog posts. I am quite new to blogging and using wordpress so I don't really know anything about CSS, just tinkering around.

Thanks,
Zach

lmilesw · #2 Dec 6, 2010, 07:03 PM

You would have to fiddle with conditional statements or perhaps the Dynamic Headers plugin will work for this.

juggledad · #3 Dec 6, 2010, 09:15 PM

You could also use CSS like 'body.page_id_22 #header {display:none}'
Assuming page 22 is your blog page

ZachS · #4 Dec 7, 2010, 03:01 PM

Well, at first I didn't know how to have my blob posts on a separate page but I've figured that out. The CSS insert doesn't seem to be working for me, though. Is there a particular place within the CSS Inserts field I should insert it into?

lmilesw · #5 Dec 7, 2010, 03:06 PM

You can put the code anywhere in ATO>Add HTML/CSS Inserts>CSS Inserts but you have to determine the page ID of the page you don't want the header to show on. I usually do that my looking at the source code for the page and searching for "body class" you should see a page ID with the results. Or you can go to your pages section of WordPress and hover over the page in question and you should see the page ID in the bottom of your browser. There are also some plugins to show IDs of pages and posts.

ZachS · #6 Dec 7, 2010, 05:31 PM

Hmm, I do have the right page number from hovering over the link but still no luck. I don't know what the problem could be.

juggledad · #7 Dec 7, 2010, 07:24 PM

what is the url and exactly (do a cut and paste) did you add to the CSS Inserts?

ZachS · #8 Dec 9, 2010, 09:12 PM

The URL of the page I'd like to remove the header from is: http://www.zachschwanbeck.com/?page_id=34

I tried

Code:

'body.page_id_34 #header {display:none}'

along with a lot of other combinations. I tried pasting it in at the start of and also at the end of the CSS Inserts field. I am now on 3.5.3 if that helps.

Thanks guys

lmilesw · #9 Dec 9, 2010, 10:26 PM

For that page you would use

HTML Code:

body.blog #header {
display: none !important;
}

The way I determined that was to look at the page source and do a search for "body class" without the quotes. the result showed the following. I have included a few other lines for context.

HTML Code:

</script>
</head>
<body class="blog">
<div id="wrapper">
<div id="container">

which told me the class of the page was blog. Then I just added the id of header.

ZachS · #10 Dec 10, 2010, 11:19 AM

Holy cow it works!

I guess when I was figuring out how to put my blog on a separate page I maybe didn't do it quite right. Oh well, it works. Thanks so much!