Hiding headers individually

alittlekinkonline · Member · Oct 23, 2013 at 4:33 am
Copy link

Add topic to favorites
Hi there,

I decided while customizing my website’s appearance that I don’t want the page headers to be visible. I used the appropriate coding…

h1 {
display:none;
}

… and it worked great. The issue that I came across though, is that the titles (which are also the links) to my blog posts are also classified as h1, therefore in hiding headers, I hid those as well, leaving people with no way of viewing a full blog post from the list.

Is there any html code I can use on the specific pages I want the headers hidden from so that it doesn’t hide the headers on my blog page? Or could I add something to the CSS to exempt the piece of code above from being applied to my blog page?
thesacredpath · Member · Oct 23, 2013 at 3:24 pm
Copy link
Hi there, what you can do is use more specific selectors to target specific pages or page types (category/tag/archive/page) by using the body class for that page, which you can find by visiting the page and viewing the source code and looking in the opening body tag. As an example, this is the opening body tag and classes listed in your “Blog” page.

<body class="archive category category-blog category-273 custom-background typekit-enabled mp6 highlander-enabled highlander-light custom-colors" data-twttr-rendered="true">

If you wanted to remove the titles for all archive style pages (archives, categories and tags pages) you would do this.
```
.archive .page-header h1 {
display: none;
}
```
For categories only you would use this selector.
```
.category .page-header h1 {
display: none;
}
```
For a specific page, you can target by page ID such as this. page-id-1 happens to be your “about” page, which you are using for your main page.
```
.page-id-1 .page-header h1 {
display: none;
}
```
thesacredpath · Member · Oct 23, 2013 at 3:28 pm
Copy link
You will also want to review this support page on Advertising as you cannot put your own ads on your site here.
alittlekinkonline · Member · Oct 23, 2013 at 4:34 pm
Copy link
Sorry I’m confused about the advertising thing. I’m already paying to host my site on WordPress… But in order to be allowed to post links to relevant sites, since they’re being classified as ads, I have to host my WordPress site… through another site?
alittlekinkonline · Member · Oct 23, 2013 at 4:36 pm
Copy link
Unfortunately none of the CSS you’ve given me is working for removing the headers, either.
thesacredpath · Member · Oct 25, 2013 at 5:23 pm
Copy link
I don’t see any of the code I gave in your custom CSS. I added the following directly to your CSS in your Customizer as a test and it worked for removing the blog title from the top of the blog page.
```
.archive .page-header h1 {
    display: none;
}
```
If you want to remove the title and the white band, use the following instead.
```
.archive .page-header {
    display: none;
}
```
Your About page, which you have set as your front page, you used the following to remove the title.
```
h1 {
    color: #666666;
    text-align: center;
}
```
That will also change the color of ALL h1 heading elements in the site, so if you use an h1 heading in page or post content, it will be the #666666 color and not show up. You can remove the above from your custom CSS as this, which I had given you previously, removes the title on the main page.
```
.page-id-1 .entry-title {
    display: none;
}
```
alittlekinkonline · Member · Oct 25, 2013 at 5:45 pm
Copy link
I’m sorry, I didn’t leave the coding you gave me in my custom CSS because it didn’t work for me. I tested all of it.

I also didn’t use the coding you pulled from my page to remove the header. That only changed the color and alignment.

I figured out how to remove what I wanted to remove though, with this coding (and I will be applying it with appropriate page id #s to the rest of my pages once I put them up):

.page-id-1 .page-header {
display: none;
}

but that isn’t part of any of the coding you originally gave me. You gave me:

.page-id-1 .page-header h1 {
display: none;
}

Having the h1 in there stopped it from working.
thesacredpath · Member · Oct 25, 2013 at 6:22 pm
Copy link
.page-id-1 .page-header h1 remove the header text.

.page-id-1 .page-header removes the entire header including the white band.
alittlekinkonline · Member · Oct 25, 2013 at 7:08 pm
Copy link
My apologies in not clarifying what I meant.

On my “about” page, there doesn’t/didn’t appear to be a white band with my header. When I tried using that code with “h1” in it, the text did not disappear. Only when I removed the “h1” did it work for me. Either way, I got what I needed, so thank you for helping me sort that out.

I was also wondering if you could please give some insight into the whole advertisement thing, since I am still a bit confused about it. My website is about what I do for a living, and the links I provided are for people to find me elsewhere on the internet. They are directly related to my website content, and when I put them up, it was with the intention of allowing people who viewed my site to get whatever they needed out of it, including the ability to find me through all online platforms I am available on. Would it be better if I placed a title at the top of the right column saying something along the lines of “Find me elsewhere!” rather than just having the links on their own?

I read the page you linked me to regarding advertising policies and am also confused as to why I would need to pay to host my WordPress site through another hosting site in order to display my links, when I’m already paying to host on WordPress.

I have no intention of breaking the rules, and if absolutely necessary I will remove the links until I am able to set things up in a manner that allows me to have them there. I have seen other people in the same line of work as me do the same thing through WordPress and to the best of my knowledge it has never been an issue for them, though.
thesacredpath · Member · Oct 25, 2013 at 7:28 pm
Copy link
Hi, I would suggest contacting support at http://support.wordpress.com/contact and have the Terms of Service folks review your site for you and explain what you are doing.
alittlekinkonline · Member · Oct 25, 2013 at 7:52 pm
Copy link
Thank you very much, I will do that!
thesacredpath · Member · Oct 25, 2013 at 7:56 pm
Copy link
You are most welcome.

No items found.