- verified-badge-phpbb.jpg (70.7 KiB) Viewed 507 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 (279.18 KiB) Viewed 507 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 (378.54 KiB) Viewed 507 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;
}
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");
}
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");
}Example of issuing verification badges to multiple different groups:
Code: Select all
.username-coloured[style="color: #0095f6;"]:after, .username-coloured[style="color: #AA0000;"]:after {
..............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 (19.51 KiB) Viewed 484 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 {
.............