Creating custom user group banner CSS

[triforceguy1]

When using an image for a custom banner, what are the recommended dimensions?

EDIT

Also, I've tried doing an image background but it doesn't seem to work at all, could I get a bit of help please?

    .userBanner .toad
{
color: white;
background: url("http://www.nintybuzz.com/wp-content/uploads/2016/06/Toad.png") no-repeat;
}

 

[OUTL4W]

in your 2nd image...remove the period's
so the field should look like this:
userBanner toad

 

[triforceguy1]

in your 2nd image...remove the period's
so the field should look like this:
userBanner toad

Okay, so I did that an a banner is appearing but no image is appearing

 

[KevinEssence]

Is there a way to use the same banners but with your own custom color?

 

[Amaury]

If you're referring to the default banner, then yes, you can just use CSS to target the banner.

 

[triforceguy1]

Hello,

I've been experimenting a bit and are good some good results so far, but I just can't figure out how to add padding to the left and right of the background image (to give it a bit of room on the left and to stop the text from overlapping it) or how to center the text on the vertical line.

Here's the code I have so far along with a screenshot:

    .userBanner.goombario
{
font-size: 115%;
color: white;
background: url("@imagePath/xenforo/ranks/Goombario.png") no-repeat #B87236;
height: 40px;
}

 

[OUTL4W]

Add
padding-left: 5px;


Then maybe add another style property:
.goombario {
padding-left: 3px;
padding-right: 3px;
}
Change the px to desired number.

 

[triforceguy1]

Add
padding-left: 5px;


Then maybe add another style property:
.goombario {
padding-left: 3px;
padding-right: 3px;
}
Change the px to desired number.

That didn't work, maybe I'm doing something wrong (not that great at css to be honest)

.goombario {
padding-left: 3px;
padding-right: 3px;
}
  
    .userBanner.goombario
{
font-size: 115%;
color: white;
background: url("@imagePath/xenforo/ranks/Goombario.png") no-repeat #B87236;
height: 40px;
padding-left: 5px;
}

Also, how do I center everything in the banner on the horizontal line

 

[OUTL4W]

you would have to link me to the profile in order to experiment.

 

[triforceguy1]

you would have to link me to the profile in order to experiment.

Which profile? The user profile I'm testing it on?

 

[OUTL4W]

Which profile? The user profile I'm testing it on?

Yes

 

[triforceguy1]

Yes

sure - http://www.nintybuzz.com/forum/members/flint-cragley.57181/

 

[triforceguy1]

Have you had any luck experimenting at all?

 

[OUTL4W]

Have you had any luck experimenting at all?

sorry for the late reply...but was camping all weekend

I simply added
padding-left: 20px;

.userBanner.goombario {
    font-size: 115%;
    color: white;
    background: url("styles/default/xenforo/ranks/Goombario.png") no-repeat #B87236;
    height: 40px;
    padding-left: 20px;
}

 

[triforceguy1]

sorry for the late reply...but was camping all weekend
View attachment 136664
I simply added
padding-left: 20px;

.userBanner.goombario {
    font-size: 115%;
    color: white;
    background: url("styles/default/xenforo/ranks/Goombario.png") no-repeat #B87236;
    height: 40px;
    padding-left: 20px;
}

Awesome, it works on the mini profile, but it still overlaps on the profile page

 

[Tattooed Theist]

Hey guys, I should have come here first for support but I made a thread asking for support on this.
I'm having a slight issue, https://xenforo.com/community/threads/user-banner-question.123266/

 

[Britney]

Hello

Is there anyone who might be able to help me out on how to make a group banner similar to this:

This is the addon: https://xenforo.com/community/resources/gamer-profiles-pixelexit-com.3678/


But How could you apply this as a member group? The idea is to have the text of the name of the group on the tooltip. But I cannot find were to change that.

 

[bobs409]

Does this work on version 2.0? I upgraded today but it was turned off and I don't see a way to get it back.

Thanks,

Bob

 

[TürkBinGazi]

@bobs409 it's a work..

Open the Extra.less template and paste the following code.

.mstf    {font-weight: bold;font-family: Tahoma, Helvetica, Arial, sans-serif; text-shadow: #000000 0px 0px 1px; color: #000000;}
.afis0    {border-color: #8F343A;background-color: #8F343A;}
.afis1    {border-color: #8F343A;background-color: #8F343A;}
.afis2    {border-color: #26A65B;background-color: #26A65B;}
.afis3    {border-color: #1C86EE;background-color: #1C86EE;}
.afis4    {border-color: #CC6600;background-color: #CC6600;}
.afis5    {border-color: #176093;background-color: #176093;}
.afis6    {border-color: #7AF26D;background-color: #7AF26D;}
.afis7    {border-color: #8E44AD;background-color: #8E44AD;}
.afis8    {border-color: #FFBE1C;background-color: #FFBE1C;}
.afis9    {border-color: #CF4D35;background-color: #CF4D35;}
.afis10  {border-color: #000000;background-color: #000000;text-decoration: line-through;}
.afis11  {border-color: #E0EEEE;background-color: #E0EEEE;}

Open the usergroup and paste the following code into the part using the Other, custom CSS class name
code for administrator group

mstf afis0

code for administrator moderator

mstf afis1

this way you can add unlimited

AND Legendary Rainbow Staff Banner

Open the Extra.less template and paste the following code.

.userBanner--staff    {font-weight:bold;background-image: linear-gradient(210deg, #8F343A, #26A65B, #1C86EE, #FFBE1C, #176093, #7AF26D, #8E44AD, #CC6600, #CF4D35, #E0EEEE)!important; background-size: 1200% 1200%!important; -webkit-animation: TurkBinGazi 15s ease infinite!important; -moz-animation: TurkBinGazi 15s ease infinite!important; -o-animation: TurkBinGazi 15s ease infinite!important; animation: TurkBinGazi 15s ease infinite!important;}


@-webkit-keyframes TurkBinGazi {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-moz-keyframes TurkBinGazi     {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-o-keyframes TurkBinGazi        {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@keyframes TurkBinGazi         {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}

Example image:
​

 

[bobs409]

@bobs409 it's a work..

I finally got around to trying this and it does show up on the member profile page but nowhere else. I'd like it to show with the forum posts & replies.

Any idea on how to make that happen?

Thank you,


Bob