XF 2.0 Issues with custom rank banner

SkillsAura

New member
Hello, I'm having issues in regards to having custom banners for people with certain ranks. This is an issue I've had prior to installing a theme, so I don't believe it's due to my theme.

I've tried the following in both the EXTRA.css and EXTRA.less:
CSS:
{{ include('xenfocus_base.less') }}
{{ include('xenfocus_theme.less') }}

// Place your custom code below
.userBanner.Trial
{
color: transparent;
background-image: url('https://i.imgur.com/uvzJerW.png');
display: block;
height: 25px;
width: 121.5px;
margin-top: -4px;
}

For the banner, I've clicked Custom class and tried simply "Trial", "userBanner Trial", "userBanner trial", etc, however it doesn't show the image.

What's the correct way to do so?
 

Mian Shahid

Well-known member
This will work

CSS:
.userBanner--Trial {
    background-image: url("https://i.imgur.com/FT2odEM.png");
    color: transparent;
    display: block;
    height: 25px;
    width: 120px;
    margin-top: -4px;
    }

Command

userBanner userBanner--Trial

set height, width & margin accordingly
 

SkillsAura

New member
This will work

CSS:
.userBanner--Trial {
    background-image: url("https://i.imgur.com/FT2odEM.png");
    color: transparent;
    display: block;
    height: 25px;
    width: 120px;
    margin-top: -4px;
    }

Command

userBanner userBanner--Trial

set height, width & margin accordingly
Even after changing dimentions, still doesn't work.

CSS:
// Place your custom code below
.userBanner--Trial {
    background-image: url("https://i.imgur.com/FT2odEM.png");
    color: transparent;
    display: block;
    height: 250px;
    width: 800px;
    margin-top: -4px;
    }
 
Top