Creating custom User banner styling

Paul B · Aug 25, 2019

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...

randomchance · Aug 25, 2019

The "view attachment" link seems to be broken.

AbuGhaith · Oct 28, 2019

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?

Paul B · Oct 28, 2019

In most cases the changes can be merged.

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

Rettep · Nov 13, 2019

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 · Dec 13, 2019

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.

Paul B · Dec 13, 2019

There's no difference.

You can use the preset options, or create your own if those options don't appeal.

InsertUserNameHere · Aug 8, 2020

/* ### 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.

Slayeon · Nov 27, 2020

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;
}

Slayeon · Dec 4, 2020

Anyone know how to help??

OUTL4W · Dec 5, 2020

try?

Code:

@media (max-width: 650px){
.message-userBanner.userBanner {display:none;}
}

Slayeon · Dec 9, 2020

OUTL4W said:
try?

Code:

@media (max-width: 650px){ .message-userBanner.userBanner {display:none;} }

Nothing changed at all

OUTL4W · Dec 9, 2020

maybe?

Code:

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

Paul B · Dec 9, 2020

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 · Jan 19, 2021

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

Paul B · Jan 19, 2021

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:

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

Faust · Mar 26, 2021

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?

Martyn · Mar 28, 2021

how about making it central? or am i missing something?

Tom McIntyre · Aug 11, 2021

Under xf1.5 I had several of these set up with gradients to recognize award winners. How would I set up a gradient as the background color?

Or, would it be easier to just set up another .less file and reference it?

Manna Central · Aug 31, 2021

HI @Brogan,

Is there a way to embolden the text on a staff banner?

Just I would like the text to stand out a bit more.

Thanks in advance.

Keith

Creating custom User banner styling

XenForo moderator

Member

Well-known member

XenForo moderator

Member

Active member

XenForo moderator

Member

Member

Member

Active member

Member

Active member

XenForo moderator

Active member

XenForo moderator

Well-known member

Active member

Active member

Member

Similar threads

We value your privacy