I think it is hard coded in templater.php
How to add a Custom Group Badge / Banner to User Info
- Thread starter Gator
- Start date
I think it is hard coded in templater.php
Doesn't seem to work for me. I uploaded my user group banners to a directory I created called userbanners and pointed the CSS to them by going to https://codinghelp.site/userbanners/image.png (pointing to each image)
Then I updated the roles in the settings by using the custom CSS class name I created which was adminBadge (for one of them) and nothing updates.
I even tried adding the CSS to the usernameCSS section and that did not work.
Then I updated the roles in the settings by using the custom CSS class name I created which was adminBadge (for one of them) and nothing updates.
I even tried adding the CSS to the usernameCSS section and that did not work.
Hi @Erin Nicole , when I click on the image you provided, I get this which indicates it might be a bad link
I know the image I provided was just a sample. If you want the real one it is https://codinghelp.site/userbanners/admin.png
EDIT: Kept messing up the link. It works now.
You must add it to the "extra.less" (as described in the instructions) in Templates and make sure nothing is mistyped. If you are still unable to get it to work, give me temp access to the template area and I will see what I can do.
Edit: "extra.less"
Last edited:
That's where I have it on all of my themes.
Nothing is mis-typed. Register on my forum and let me know your username and I'll give you access.
Hmm, not working for me. I've tried default background size of 45, and 250 (which is the width of the badge). This is on Extra.Less for the Carbon theme.
This is the badge info on the role:
And this is what I see:
CSS:
////////// START - Group Banner/Badge CSS //////////
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhOwner{
background-image: url('/ranks/Spinosaurus.png');
display: block;
background-size: 250px; // adjusts size of background image
background-position: 1.5% 0%; // adjusts image position (x% y%)
background-repeat: no-repeat; // keeps image from repeating
text-indent: -7px; // shifts text left or right
padding-top: 45px; // adjusts distance from image to text (group name)
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhOwner.message-userBanner {
background-position: 50% 0%; // adjusts image position (x% y%)
text-indent: 0px; // shifts text left or right
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhOwner.message-userBanner.userBanner {
// background-image: none; /* remove the slashes to remove image in mobile view */
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; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}This is the badge info on the role:
And this is what I see:
@KensonPlays Make sure that the "User banner text" block has text inside. Don't ask me why, but they made it that way.
Yea... I honestly hope 2.3 or 2.4 or something will have an easy way to use custom role images without needing to add a bunch of custom CSS.
Glad I could help. Good like with the site.
