Individual header/post customization

kjeg2015 · Member · Oct 2, 2015 at 8:29 pm
Copy link

Add topic to favorites
Hello (:

Is there a code for removing the entire heading, including logo, on single posts only?
– If I want to remove it on 2 or 3 posts, how do I customize the code?

Also, how do I customize single posts only, background colours etc? Maybe I missed out on something again ():

Thank you for the help!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 2, 2015 at 10:25 pm
Copy link
Hi, the following CSS would remove remove the header image and leave the content and navigation.
```
.single .header {
    display: none;
}
```
If you wish to target only specific posts or pages, in the opening body HTML tag on those pages you will find a unique page or post id CSS selector. In the case of this post, Dette er TreningOnline, you will see this unique CSS selector
postid-17
You can then use that to specifically design that post by preceding the selector from the CSS with that unique selector like this.
```
.postid-17  .header {
    display: none;
}
```
The above hides the header image on only the Dette er TreningOnline single post page.
kjeg2015 · Member · Oct 3, 2015 at 9:10 am
Copy link
Thanks!

It worked on that spesific post but when I paste the same CSS-code again and change the post-id to f.ex 228 for this other post nothing happens :
http://treningonline.no/2015/09/16/styrkeprogram/

I also tried the same thing for this post :
http://treningonline.no/min-side/
Replaced post-id 17 with 668 – nothing happens

(((:
thesacredpath · Member · Oct 3, 2015 at 9:24 am
Copy link
Hi, styrkeprogram has a post id of 28, not 228. If you use 28, it will work just fine.

On min-side, that is a page, so you have to adjust the selector because pages and posts have different unique CSS body classes. In this case, you would use
.page-id-50

I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

If you look in the opening body tag in the HTML section in the inspector, you will find something like this for pages
<body class="page page-id-50 page-template...
and something like this for posts
<body class="single single-post postid-28...
kjeg2015 · Member · Oct 3, 2015 at 4:42 pm
Copy link
That was exactly what I was looking for.

In the inspector I can actually pre-customize my stuff, and then copy paste..

Thank you, that was extremly helpful!
kjeg2015 · Member · Oct 3, 2015 at 9:51 pm
Copy link
You opened up a new world to me!

check out my animated header!

Thanks!
kathrynwp · Staff · Oct 5, 2015 at 2:21 pm
Copy link
Glad Richard was able to help!

No items found.