Creating custom User banner styling
- Thread starter Paul B
- Start date
Manna Central
Member
Many thanks
Small error though, I think it should be:
Less:
.userBanner--staff
{
font-weight: bold;
}Thanks again,
Keith
BubbaLovesCheese
Active member
Would I be able to add customization at the end of the app_user_banner.less template?
Or does it have to go in the extra.less template?
Code:
// 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?
ArtG
Well-known member
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?
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?
D
Deleted member 25216
Guest
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);
hqarrse
Active member
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
CSS:
.rank-admin {
background: url('images/ranks/5gongadminw1.gif') no-repeat;
background-position: center bottom;
width:86px;
height:60px;
}BubbaLovesCheese
Active member
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.
hqarrse
Active member
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!
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!
hqarrse
Active member
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
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
zzlpolitics
Active member
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.
I'm not sure if that makes any sense. Sorry. And thanks.
zzlpolitics
Active member
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.
Btw, adding the above code totally broke the header area of my site.
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.
Btw, adding the above code totally broke the header area of my site.
Last edited:
Similar threads
- Question
