Creating custom user group banner CSS

Creating custom user group banner CSS

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?

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

Screen Shot 2016-06-02 at 17.33.10.webp Screen Shot 2016-06-02 at 17.33.57.webp
 
Last edited:
If you're referring to the default banner, then yes, you can just use CSS to target the banner.
 
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:

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

Screen Shot 2016-06-21 at 23.53.34.webp
 
Add
padding-left: 5px;


Then maybe add another style property:
.goombario {
padding-left: 3px;
padding-right: 3px;
}
Change the px to desired number.
 
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)

Code:
.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
 
Have you had any luck experimenting at all?
sorry for the late reply...but was camping all weekend
upload_2016-6-26_20-5-1.webp
I simply added
padding-left: 20px;

Code:
.userBanner.goombario {
    font-size: 115%;
    color: white;
    background: url("styles/default/xenforo/ranks/Goombario.png") no-repeat #B87236;
    height: 40px;
    padding-left: 20px;
}
 
sorry for the late reply...but was camping all weekend
View attachment 136664
I simply added
padding-left: 20px;

Code:
.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 :(

Screen Shot 2016-06-28 at 21.54.58.webp
 
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
 
@bobs409 it's a work..

Open the Extra.less template and paste the following code.
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
Code:
mstf afis0
code for administrator moderator
Code:
mstf afis1
this way you can add unlimited

AND Legendary Rainbow Staff Banner

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

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:
rainbowbanner.gif
 
Top Bottom