Creating custom User banner styling

[Paul B]

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]

The "view attachment" link seems to be broken.

 

[AbuGhaith]

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]

In most cases the changes can be merged.

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

 

[Rettep]

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]

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]

There's no difference.

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

 

[InsertUserNameHere]

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

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]

Anyone know how to help??

 

[OUTL4W]

try?

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

 

[Slayeon]

try?

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

Nothing changed at all

 

[OUTL4W]

maybe?

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

 

[Paul B]

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

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

 

[Hoib3rgA]

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]

Something like this probably:

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

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]

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

 

[Tom McIntyre]

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]

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