Give Verification Badge on Users with Group Color Method

@halilesen · 16 Apr 2024 · 856 views
Post Reply
User avatar
halilesen
#1 ·
Posts: 57
Joined: 24 Mar 2024, 18:09
Full Name: Halil ESEN
Has liked: 12
Been liked: 9
verified-badge-phpbb.jpg
verified-badge-phpbb.jpg (70.7 KiB) Viewed 856 times

I came up with an idea on how you can simply and effectively give users a verification badge on your phpBB forum. In this topic I will show you step by step how to give a verification badge in phpBB.

First, let's understand the logic. We will create a group and set a group color for it. You will add members to this group that you want to give a verification badge to. Then, with a few lines of CSS code, we will ensure that a verified badge is added almost everywhere the username (if in it group) is seen.

Step 1: Create a Group

phpbb-group-color-verified-badge-verification-badge-phpbb-group-create-a-group.jpg
phpbb-group-color-verified-badge-verification-badge-phpbb-group-create-a-group.jpg (279.18 KiB) Viewed 856 times

Enter the Administration Control Panel > go to the Users and Groups tab > click on the Manage groups link in the Groups menu. Submit a group named Verified Users in Create new group section. On the next page we will select and create the group options.

In the Group details block, select Group type as Hidden. Scroll down the page to the Group wide settings block and type 0095f6 in the group color option. Do not touch anything else and it submit. Thus, we have created the group to add the users you want to give verification badges to.

Step 2: Verified Users should be default group for the users

When the default group of users is Verified Users, usernames are assigned the color of this group. This will allow us to give a validation badge with CSS. But don't worry if some members, like administrators and moderators, need to have a different default group. We can also assign badges to other group color.

phpbb-verification-users-verified-badge-phpbbgroup.jpg
phpbb-verification-users-verified-badge-phpbbgroup.jpg (378.54 KiB) Viewed 856 times

In the same tab, enter member's groups by selecting a member from Manage users page in Users menu or by using the Administer user link in member profiles. Add the member to the Verified Users group and make it the default group.

Step 3: Verified Badge

First, let's change the username color to normal. Because the same color as the badge is relatively unattractive.

Code: Select all

a.username-coloured[style="color: #0095f6;"] {
    color: #141414 !important;
    font-weight: 600;
}
I assumed that your link or username link colors are #141414. If not, you can change them as you wish. Now let's add a badge after the username.

Code: Select all

.username-coloured[style="color: #0095f6;"]:after {
    content: "";
    margin-left: 1px;
    vertical-align: -0.1em;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230095f6' d='M10.95 12.7L9.5 11.275Q9.225 11 8.813 11t-.713.3q-.275.275-.275.7t.275.7l2.15 2.15q.3.3.7.3t.7-.3l4.25-4.25q.3-.3.287-.7t-.287-.7q-.3-.3-.712-.312t-.713.287zm-2.8 9.05L6.7 19.3l-2.75-.6q-.375-.075-.6-.387t-.175-.688L3.45 14.8l-1.875-2.15q-.25-.275-.25-.65t.25-.65L3.45 9.2l-.275-2.825q-.05-.375.175-.688t.6-.387l2.75-.6l1.45-2.45q.2-.325.55-.438t.7.038l2.6 1.1l2.6-1.1q.35-.15.7-.038t.55.438L17.3 4.7l2.75.6q.375.075.6.388t.175.687L20.55 9.2l1.875 2.15q.25.275.25.65t-.25.65L20.55 14.8l.275 2.825q.05.375-.175.688t-.6.387l-2.75.6l-1.45 2.45q-.2.325-.55.438t-.7-.038l-2.6-1.1l-2.6 1.1q-.35.15-.7.038t-.55-.438'/%3E%3C/svg%3E");
}
I have chosen a very nice svg verification badge icon for you. With this code, we have added a badge next to verified usernames. Now all our CSS codes are as follows.

Code: Select all

a.username-coloured[style="color: #0095f6;"] {
    color: #141414 !important;
    font-weight: 600;
}
.username-coloured[style="color: #0095f6;"]:after {
    content: "";
    margin-left: 1px;
    vertical-align: -0.1em;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230095f6' d='M10.95 12.7L9.5 11.275Q9.225 11 8.813 11t-.713.3q-.275.275-.275.7t.275.7l2.15 2.15q.3.3.7.3t.7-.3l4.25-4.25q.3-.3.287-.7t-.287-.7q-.3-.3-.712-.312t-.713.287zm-2.8 9.05L6.7 19.3l-2.75-.6q-.375-.075-.6-.387t-.175-.688L3.45 14.8l-1.875-2.15q-.25-.275-.25-.65t.25-.65L3.45 9.2l-.275-2.825q-.05-.375.175-.688t.6-.387l2.75-.6l1.45-2.45q.2-.325.55-.438t.7.038l2.6 1.1l2.6-1.1q.35-.15.7-.038t.55.438L17.3 4.7l2.75.6q.375.075.6.388t.175.687L20.55 9.2l1.875 2.15q.25.275.25.65t-.25.65L20.55 14.8l.275 2.825q.05.375-.175.688t-.6.387l-2.75.6l-1.45 2.45q-.2.325-.55.438t-.7-.038l-2.6-1.1l-2.6 1.1q-.35.15-.7.038t-.55-.438'/%3E%3C/svg%3E");
}
If you want to validate users with a default group other than the Verified Users group, make sure that group has a group color and change the color in the top CSS code.

Example of issuing verification badges to multiple different groups:

Code: Select all

.username-coloured[style="color: #0095f6;"]:after, .username-coloured[style="color: #AA0000;"]:after {
    ..............
So you put a comma and repeat the selector and change the color.

OR!! As a smarter move, make all default groups you want to validate the same color. This might make more sense.

Add the CSS code to the custom css file if the style you are using has it, or to a file where css is kept. And that's it. Magic! I love CSS.

phpbb-forum-users-verified-badge-phpbb-group-com.jpg
phpbb-forum-users-verified-badge-phpbb-group-com.jpg (19.51 KiB) Viewed 833 times

Over the years I've seen some people on phpBB forums trying to figure out how to give their users a validation badge. In fact, this is how easy it is to give a verification badge in phpBB. I hope this guide will help you and others reading this in the future.

You can ask any question you want. For example, do you want these verification badges to only appear on topics? No problem. Add an .section-viewtopic at the beginning of the second code. So the code will be like this:

Code: Select all

.section-viewtopic .username-coloured[style="color: #0095f6;"]:after {
    .............
This method may be insufficient for some advanced regulations. But I think it's enough for just about any phpBB board.
Post Reply
  • Similar Topics