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