Creating custom User banner styling

Creating custom User banner styling

Brogan

XenForo moderator
Staff member
Brogan submitted a new resource:

Creating Custom user banner styling - More or less

By default, XF comes with the following user banner styles:

View attachment 209097

Creating custom styling using the Other, using custom CSS class name option is fairly straightforward.

This guide will explain how to.

The easiest way by far to add new prefix styling and to ensure it inherits all of the core styling is to edit the app_user_banners.less template.

Look for the section in the template highlighted in the screenshot below:

[ATTACH...

Read more about this resource...
 

Abu Ghaith

Well-known member
thank you @Brogan for this nice guide ..
Q : if the app_user banners.less file replaced by another one when an XF have an new update we lose the modification?
 

Brogan

XenForo moderator
Staff member
In most cases the changes can be merged.

Just keep a backup copy should you need to revert and edit again.
 

Rettep

Member
Hey!

If I want to have multiple custom icons how do I stack them?

I tried just copying the template and changing the values but then no icons work all of a sudden.
 

Cannabis Ape

Active member
Ok, I don't understand the first part in terms of, what is the difference with just choosing the green banner that is already there.
 

Brogan

XenForo moderator
Staff member
There's no difference.

You can use the preset options, or create your own if those options don't appeal.
 
/* ### User Banners ### */
.userBanner.userBanner--shieldadmin
{
&:before {
.m-faBase();
.m-faContent(@fa-camera);
padding-right: 4px;
}
}
.userBanner.userBanner--starmember
{
&:before {
.m-faBase();
.m-faContent(@fa-var-star);
padding-right: 4px;
}
}
The above cancels out each other if they don't both have the same font awesome icon. Also, only fa-var-star works nothing else for some reason.

I figured it out, it appears to be the the use of "fa-var," for example, fa-var-camera. Why is this? I don't see any icons labeled far-var.
 
Last edited:

Slayeon

Member
Hello, I cant seem to figure out how to add the code so that the banners are disabled on mobile. When I add this code it just disables it for mobile and pc. I copied the code from this thread and tried it, I copied from other posts of people who got it to work and tried it and I also tried on my own and it wont work.

@media (max-width: 165px){
.admin.message-userBanner.userBanner {
font-size: 0px;
background-image: none !important;
}
 

OUTL4W

Active member
maybe?
Code:
@media (max-width: 650px){
.userBanner {display: none !important;}
}
 
Last edited:

Brogan

XenForo moderator
Staff member
This added to the extra.less template will prevent banners showing anywhere at the defined viewport size.

Less:
@media (max-width: 400px)
{
    .userBanner
    {
        display: none !important;
    }
}
 

Hoib3rgA

Member
Thanks for this helpful resource!

What do i have to do, when i just want to show an image instead of the banner?
Is it possible, to show just this image instead of the banner => "(forum-url)/images/banner/green-key.gif"

kr Chris
 

Brogan

XenForo moderator
Staff member
Something like this probably:

Less:
.myClass
{
    text-indent: -10000em;
    background: url("path/to/image.png") no-repeat;
    height: 20px;
    width: 50px;
}

Adjust the CSS to suit.

You don't use the core classes - just add it like this:

1611083072209.png
You will still need to enter the banner text to get it to display (the text won't show).
 

Faust

Well-known member
I tried it. But seems adding an icon doesn't work at all. Cancel all other code which I have in extra less, any idea?
 
Top