Display Posts Visibility

Feature
1

Hello,

I just want to share you guys this little css tweak for show the posts visibility to everyone. On our forum users sometimes couldn’t recognize the visibility the actual created post. Is it a private message or a public conversation? So they published personal data and so on public lots of times…

Now i made it more obvious to everyone with a little css code which is add the posts visibility to the all post. There are 3 different type of visibility. Public, Community (which is the restricted categories) and Private.

Add this to admin/
Desktop/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 Public";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f023 \00a0 Private";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f0c0 \00a0 Community";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

Mobile/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 Public";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f023 \00a0 Private";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f0c0 \00a0 Community";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

Common/ </head> section :arrow_down:
The font-family: 'Font Awesome\ 5 Free', var(--font-family); contains Font Awesome icon so you should add it in </head> section to show this icons.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>

Screenshot 2021-03-03 at 19.23.09 Screenshot 2021-03-03 at 19.24.01 Screenshot 2021-03-03 at 19.24.36

If you want to disable icons you just use this version. :arrow_down:

Without icons

Add this to admin/
Desktop/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Public";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Private";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Community";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

Mobile/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Public";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Private";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Community";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

And nothing to add the </head> section. :slight_smile:

Thank you :slight_smile: It’s help to our community I hope if you have the same problem this will help. :slight_smile:

You can check how works it in live. https://vaperina.cc and click any topic. You will see the public visibility badge on posts. In Hungarian language. :slight_smile:

6 Likes