[Support request] How to show a closed padlock to the left of post titles

[webcréateur]

Hi there,

For certain contributions we have to show a closed padlock to the left of the titles, e.g.: https://fontawesome.com/v4.7.0/icon/lock

This closed lock should only be displayed only for a specific taxonomy term.

As soon as the user is logged in, the lock should be displayed open.
https://fontawesome.com/v4.7.0/icon/unlock

How can we best implement this with GP Pro and WPSP Pro?
https://prnt.sc/qp4toi

I have tested the following, unfortunately without success:
https://wordpress.stackexchange.com/questions/181630/change-css-when-user-is-logged-in

[Tom]

Hi there,

Can you link me to the page where these posts are viewable? It depends on whether the posts themselves have a class assigned to them with the taxonomy you’re trying to target. Which taxonomy is the target?

I should be able to write up some CSS to do this 🙂

[webcréateur]

Hi Tom,

That would be so great. 🙂

I added the Link (only admin can see).

.htaccess protection credentials:

User: uz
Password: Tester2020skJOP!

Thank you.

[Tom]

Where on that page can I see this?: https://prnt.sc/qp4toi

I’m not seeing it at the moment.

Let me know 🙂

[webcréateur]

If you open the link I posted (only admin can see) …

https://prnt.sc/qp4toi
This is the entry post title of that post.

Not visible for you?

[Tom]

Can you disable any caching/minifying plugins, for now? Your site doesn’t seem to have any CSS applying to it right now, so it’s just a big white page.

[webcréateur]

That’ s odd. I just disabled every caching plugin …

Could you also please try another browser?

[Tom]

I’m seeing it now 🙂

So, you’re currently adding “Plus” using a pseudo selector.

Do you have the lock icon as an icon font or an SVG? It might be difficult to achieve, as you’re already using the pseudo on the Plus.. If we include the icon font with the “Plus”, they will be the same color..

We could apply the “Plus” to the <a> pseudo selector instead, and then using the <h2> pseudo for the lock?

[webcréateur]

So, you’re currently adding “Plus” using a pseudo selector.

Yes, David helped to archive that:
https://generatepress.com/forums/topic/post-badges-wp-show-posts/

We could apply the “Plus” to the <a> pseudo selector instead, and then using the <h2> pseudo for the lock?

This sounds like a good solution for us.

Many thanks in advance. 🙂

[Tom]

Something like this should work:

body:not(.single) article[class*="post-badges"] h2 a:before, 
body[class*="badge-"] h1 a:before {
    float: left;
    color: #fff;
    padding: 0 7px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 3px 10px 0 0;
    font-size: .6em;
    letter-spacing: .7pt;
    line-height: 1.7;
    content: 'Plus'!important;
    background-color: red;
}

body:not(.single) article[class*="post-badges"] h2:before, 
body[class*="badge-"] h1:before {
    content: "lock";
    color: #000;
}

body:not(.single).logged-in article[class*="post-badges"] h2:before, 
body[class*="badge-"].logged-in h1:before {
    content: "unlock";
}

You’ll just need to replace the “lock” and “unlock” with the font icons.

[Author]

Posts