How to add a Custom Group Badge / Banner to User Info

XF 2 Tip How to add a Custom Group Badge / Banner to User Info

ENXF NET

Administrator
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P.S Member
S.V.I.P Member
V.I.P Member
Collaborate
Registered
Joined
Nov 13, 2018
Messages
19,125
Points
823

Reputation:

LQD submitted a new resource:

How to add a Custom Group Badge / Banner to User Info - A short tutorial on how to add a custom user group badge/banner to the user info area

Display badge with "User banner text" text
View attachment 1233
Go to: AdminCP > Appearance > Templates > and search for the "extra.less" file
Open the file and add this code (Call it anything you want. In the example here, I called it ".mybadge" ):
Code:
/* This will place the badge in the user info in messages */
/* Tweak these numbers to suit your needs */
.mybadge {
     background-image: url('https://www.mywebsite.com/mybadge.png')...

Read more about this resource...
 

ENXF NET

Administrator
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P.S Member
S.V.I.P Member
V.I.P Member
Collaborate
Registered
Joined
Nov 13, 2018
Messages
19,125
Points
823

Reputation:

ENXF NET updated How to add a Custom Group Badge / Banner to User Info with a new update entry:

Simplified the code and added explanations on how to position and resize the image

Simplified the code and added explanations on how to position and resize the image.
Also added two options for mobile view:

Option #1 for mobile view - Remove background image but leave group name
Option #2 for mobile view - Keep background image but resize it

Read the rest of this update entry...
 

ENXF NET

Administrator
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P.S Member
S.V.I.P Member
V.I.P Member
Collaborate
Registered
Joined
Nov 13, 2018
Messages
19,125
Points
823

Reputation:

Shadowless

Member
Registered
Joined
Dec 27, 2019
Messages
11
Points
13

Reputation:

why it does not work... i`m using full link of image
background-image: url('http://site.com/dev.png');


xenforo - v2.1.6 Patch 1
 

ENXF NET

Administrator
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P.S Member
S.V.I.P Member
V.I.P Member
Collaborate
Registered
Joined
Nov 13, 2018
Messages
19,125
Points
823

Reputation:

send me link forum
 

Skynet

Collaborate
Collaborate
Registered
Joined
Sep 30, 2019
Messages
56
Points
63

Reputation:

Maybe because this Tutorial is for Xenforo 2.0? Im not sure.
 

Shadowless

Member
Registered
Joined
Dec 27, 2019
Messages
11
Points
13

Reputation:

i edited it and now works..

////////////////////////////////////// START - Group Banner/Badge CSS //////////////////////////////////// /* Adds userBanner to memberHeader-banners and memberTooltip-banners */ .mybadge{ background-image: url('http://site.com/mybadge.png'); display: inline-block; background-position: 1.5% 0%; // adjusts image position (x% y%) background-size: 45px; // adjusts size of background image background-repeat: no-repeat; // keeps image from repeating text-indent: -7px; // shifts text left or right padding-top: 50px; // adjusts distance from image to text (group name) text-align: left; } /* Adjusts image for message-userBanner only */ .mybadge.message-userBanner { background-image: url('http://site.com/mybadge.png'); display: block; background-repeat: no-repeat; // keeps image from repeating background-size: 45px; // adjusts size of background image background-position: 50% 0%; // adjusts image position (x% y%) text-indent: 0px; // shifts text left or right padding-top: 45px; // adjusts distance from image to text (group name) text-align: center; } /* Adjust size and position, and/or remove image in mobile view */ @media (max-width: 650px){ .mybadge.message-userBanner.userBanner { // background-image: none; // *** to remove background image remove "//" in front of code *** display: inline-block; background-size: 35px; // adjusts size of background image background-position: 0% 0%; // adjusts image position (x% y%) text-indent: -7px; // shifts text left or right padding-top: 37px; // adjusts distance from image to text (use with image) // padding-top: 0px; // if image is set to "none", remove "//" and remove line above) text-align: left; } } ///////////////////////////////////// End - Group Banner/Badge CSS /////////////////////////////////
 

Sycentis

Collaborate
Collaborate
Registered
Joined
Jul 23, 2019
Messages
20
Points
38

Reputation:

Can anyone here help me with it. I have tried to do this method too and it doesn't work for me. I also tried shadowless' method but its not working too...
 

xauUUL

I got less but I got best!
Collaborate
Registered
Joined
Jun 22, 2021
Messages
118
Points
43

Reputation:

solved
 
Last edited:

xauUUL

I got less but I got best!
Collaborate
Registered
Joined
Jun 22, 2021
Messages
118
Points
43

Reputation:

solved
 
Last edited:
View previous replies…
Top