Hiding "Protected" in the heading

josephinejonas2017 · Member · Feb 7, 2017 at 10:45 pm
Copy link

Add topic to favorites
Hello.

Problem:
When using the password protected page feature…
How to remove the “Protected:” text in front of the page title?
So grateful if you could help me out!

Background:

My wife to be and me are developing a site for our wedding, where our guests will find the wedding program and be able to respond to our invitation etc.

Naturally, I want to password protect the site. But I dont want the 120+ guests to all have to become members of wordpress to access my site. I therefore use the “protected page” feature for all my pages.

Problem: all my headings now read “Protected: …” which I don’t really like… so thats the background to my question…

The blog I need help with is: (visible only to logged in users)
aakashpatelsite · Member · Feb 8, 2017 at 10:44 am
Copy link
Hi,
I have visited your site and the word protected is displayed with every heading.
To remove that, just remove the word “protected” from every “h1” tag having class entry-title.

Thanks,
Aakash Patel
kathrynwp · Staff · Feb 8, 2017 at 3:49 pm
Copy link
Aakash – the word “Protected” is automatically added to password-protected posts, so it’s not something that can be removed manually by editing HTML code.

josephinejonas2017 – there isn’t an easy way to cleanly hide just the word Protected, since it’s contained in the same HTML element as the post title. But we can do something a bit hacky to move the title to the left to try to make the word “Protected” go outside the content area. Could you give this a try:
```
/* Homepage panels */

.post-password-required .entry-header .entry-title {
  overflow: hidden;
  text-indent: -3.9em;
}

/* Pages */
.page .site-header .entry-title {
  overflow: hidden;
  text-indent: -3.9em;
}
```
Because of the way the pages are coded differently, I couldn’t find a way to target only password-protected pages ( as we can with the panels on the front page), but it looks like that’s moot since all your pages are protected.

Let me know how it goes.
josephinejonas2017 · Member · Feb 8, 2017 at 8:57 pm
Copy link
Thank you for taking the time to review my problem. Could you please just clarify where I am supposed to insert this code? I recon it’s not a CSS code to be added in the “Theme – Customize – CSS” area?
kathrynwp · Staff · Feb 8, 2017 at 9:24 pm
Copy link
Yep, it is CSS!

You would go into your Customizer‘s Custom CSS panel, delete the previous CSS:
```
.page-id-79 .entry-title {
	display: none;
}
```
… and add the new. I’d like to make a small tweak to what I gave you earlier, too. Can you give this a try and let me know how it goes?
```
.post-password-required .entry-header .entry-title {
    overflow: hidden;
    text-align: left;
    text-indent: -3.9em;
}
.page .site-header .entry-title {
    overflow: hidden;
    text-indent: -3.9em;
}
```
josephinejonas2017 · Member · Feb 8, 2017 at 9:38 pm
Copy link
Thank you.

That partially worked, meaning:
– It worked for all pages when entering the pages directly through the menu. However, it did not work for the same pages that are displayed when scrolling down on the home page… Is there something that could be done to remove it there as well?
kathrynwp · Staff · Feb 8, 2017 at 9:41 pm
Copy link
Hmm – I’m not seeing the word “Protected” on the titles on the front page on this end. Could you try refreshing the page in your browser or clearing the browser cache?

Solve Common Browser Issues

This is what I see: https://cloudup.com/cbAegF_Nghu
josephinejonas2017 · Member · Feb 8, 2017 at 9:44 pm
Copy link
Tried that, but it did not help. The thing is, the “Protected” text does not appear until you enter the password.
josephinejonas2017 · Member · Feb 8, 2017 at 9:56 pm
Copy link
To be more specific on that: it is when the pages are displayed as panels on my home page that the text “Protected” still shows.
kathrynwp · Staff · Feb 8, 2017 at 9:57 pm
Copy link
Ah, thanks for clarifying! Try this for the first chunk of CSS, instead of what I gave you earlier.
```
.home .entry-header .entry-title {
    overflow: hidden;
    text-align: left;
    text-indent: -3.9em;
}
```
kathrynwp · Staff · Feb 8, 2017 at 9:58 pm
Copy link
And keep this part the same as before. (This one only affects single pages.)
```
.page .site-header .entry-title {
    overflow: hidden;
    text-indent: -3.9em;
}
```
josephinejonas2017 · Member · Feb 8, 2017 at 10:04 pm
Copy link
Thank you, that worked. The only thing is that the title on my home page is now for some reason left-alligned… would prefer to have it centered!
kathrynwp · Staff · Feb 8, 2017 at 10:15 pm
Copy link
Could you tell me the specific words you’re seeing left-aligned so I can find them, as I’m not seeing any at the moment. Thanks!

No items found.