• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
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.png Screen Shot 2016-06-02 at 17.33.57.png
 
Last edited:
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.png
 

OUTL4W

Active member
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
 

OUTL4W

Active member
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.png
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;
}
 
@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