XF 2.0 Issues with custom rank banner

[SkillsAura]

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:

{{ 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]

Try this

userBanner userBanner--Trial

 

[SkillsAura]

Try this

userBanner userBanner--Trial

Still isn't working.

 

[Mian Shahid]

Try this :-

userBanner userBanner.Trial

 

[SkillsAura]

Try this :-

userBanner userBanner.Trial

Still nothing, unfortunately.

Do you know if my actual code for it is correct? I found it online, I'm not fluent in CSS

 

[Mian Shahid]

This will work

.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

 

[Mian Shahid]

You can use few additional properties

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

 

[SkillsAura]

This will work

.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.

// 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;
    }

 

[Mian Shahid]

userBanner userBanner--Trial

And what about command quoted above?

 

[SkillsAura]

And what about command quoted above?

I used that one, yes.