Creating custom User banner styling

[Paul B]

Probably something like:

.userBanner--staff
{
    font-weight: bold;
}

 

[Manna Central]

Probably something like:

.userBanner--staff
{
    font:weight: bold;
}

Many thanks

Small error though, I think it should be:

.userBanner--staff
{
    font-weight: bold;
}

Thanks again,

Keith

 

[Paul B]

Doh!

Yeah, typo - corrected.

 

[BubbaLovesCheese]

Would I be able to add customization at the end of the app_user_banner.less template?

// ctaSupporter banner custom

.userBanner.userBanner--ctaSupporter {
    background: linear-gradient(to bottom, #18e991, #14b571 100%);
}

Or does it have to go in the extra.less template?

 

[Paul B]

You can put it there, yes.

However, if that template is updated in a future release then it will be marked as outdated and you will have to merge.

It won't cause any issues though and will function the same.

 

[Agentos]

How do I add Material Icons instead of Font Awesome?

 

[ArtG]

Hi @Brogan

I don't think the question was answered before and I'm having the same issue with 2.2.12.

Here is what I got:

/* #### User Banners #### */
.userBanner .userBanner--scPOTM
{
&:before {
.m-faBase();
.m-faContent(@fas-fa-camera);
padding-right: 4px;
}
}

I'm trying to get it to show a camera before the title. It isn't working. Any thoughts?

 

[Gemma]

I'm trying to get it to show a camera before the title. It isn't working. Any thoughts?

Instead of

.m-faContent(@fas-fa-camera);

Use

.m-faContent(@fa-var-camera);

Also, if you were using one of the brand icons you could change .m-faBase(); to .m-faBase('Brands'); then use something like .m-faContent(@fa-var-instagram);

 

[ArtG]

Thanks @Gemma!

 

[hqarrse]

Thanks for all the comments in this thread which have been very useful for me. I've used the CSS below to produce a default banner for my admin staff but would like to centre the image/title below the avatar. Any advice on how to do this would be gratefully received

.rank-admin {
        background: url('images/ranks/5gongadminw1.gif') no-repeat;
        background-position: center bottom;
        width:86px;
        height:60px;
    }

 

[BubbaLovesCheese]

Honestly, I would ask ChatGPT for something like that. People are great and obviously they can give great help and advice when they are around, but if I have a small CSS/HTML centering issue or tweak, I go to ChatGPT first. It pretty much works 100% of the time for small things.

 

[Paul B]

The user name, title, and banner are all centred by default.

Presumably you have made changes which is overriding that.

 

[hqarrse]

Thanks for the feedback which is appreciated. I've not made any changes other than the CSS above which is then used by the user group banner styling.



Removing width:86px from the CSS allows it to be centred but the image then gets chopped on small screens!



About the best solution I can find is the one below which isn't very elegant!

 

[Paul B]

I'm looking at your site now and everything is already centred.

 

[hqarrse]

Thanks for looking into this which is appreciated.

Only a small number of usergroups have custom banners and the one above (MIA) isn't one of them! That image is created as shown below



Once again this isn't very elegant, and breaks some add-ons, which is why I'm trying to move way from it

 

[STORM0x04]

still working with 2.3 ?

 

[ArtG]

Hi, does this still work with 2.3? @Paul B?

I'm trying to do a new custom banner but it isn't working like it did with 2.2.

 

[Paul B]

It works fine.

 

[zzlpolitics]

Would it be possible to assign a banner to a single user as I only have one other mod at the moment. She has a community role as a news poster so her custom title is Curator/Moderator. She's a super moderator so I don't need to make the custom banner for everyone and also then I'm wicked confused about the fact that she's a super moderator and I didn't assign her that role through putting her in the moderators group. I did it... some other way.

I'm not sure if that makes any sense. Sorry. And thanks.

 

[zzlpolitics]

Hey @Paul B don't know if you saw my earlier message but please disregard my above comment.

I had members contribute to my website so wanted to give them a Supporter banner. I started creating a custom user banner and then it dawned on me that I could just use the preexisting user banner so I selected the skyBlue one as that's our school color and put in Supporter and had a group and poof, everyone has a supporter banner that needs one in sky blue.

Two questions. Is this custom guide in case you want to use different colors than the previously assignable colors? I'm very possibly losing my mental faculties since setting up this forum so I'm not sure what's what anymore

Second, I tried to add a ram icon to my banner using your code but it didn't work. Is this because I can't add an icon to the pre-exisiting banners or did I do something wrong or did I have to enable something to work with Font Awesome? I tried with a non-pro icon too.

Sorry for all the questions. Thanks for any help.

// zzl supporter house icon
.userBanner.userBanner--skyBlue
{
&:before {
.m-faBase();
.m-faContent(@fa-solid fa-house);
padding-right: 4px;
}
}

Btw, adding the above code totally broke the header area of my site.