XF 1.4 What went wrong?

[TheGreek]

Hey all,

So I'm trying to set up some user banners. This is what I have in my Extra.css:
.userBanner.bannerAdministrator
{
color: white;
background-color: blue;
border-color: blue;
}

And for the name for the banner on the User Group Pages, it's userBanner Administrator.

But it won't take into effect the CSS. What am I doing wrong?

 

[Steve F]

https://xenforo.com/community/resources/creating-custom-user-group-banner-css.2000/

 

[TheGreek]

https://xenforo.com/community/resources/creating-custom-user-group-banner-css.2000/

Hi Steve, yes I checked that out. I'm not sure why so this is probably me, but I can't see what I'm missing.

 

[TheGreek]

Turns out I had the wrong extra.css the whole time. Now quick question, how can I make user banners to look like this?

 

[Paul B]

Just adapt the CSS to suit - that's more or less how I have them on my site using:

.userBanner
{
    background: transparent url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 1px 4px;
    font-size: 10px;
    font-weight: bold;
    box-shadow: none;
}

.userBanner.wrapped span
{
    height: 0px;
}

.userBanner.bannerStaff
{
    background-color: @secondaryMedium;
    border-color: @secondaryMedium;
    color: @textCtrlText;
    text-shadow: 1px 1px 1px @primaryLighterStill;
}

The last block needs to be added for each custom banner class.

 

[TheGreek]

Just adapt the CSS to suit - that's more or less how I have them on my site using:

.userBanner
{
    background: transparent url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 1px 4px;
    font-size: 10px;
    font-weight: bold;
    box-shadow: none;
}

.userBanner.wrapped span
{
    height: 0px;
}

.userBanner.bannerStaff
{
    background-color: @secondaryMedium;
    border-color: @secondaryMedium;
    color: @textCtrlText;
    text-shadow: 1px 1px 1px @primaryLighterStill;
}

The last block needs to be added for each custom banner class.

So do I just put that in, and it should be good?

 

[Paul B]

You will need to adapt it to suit your particular requirements.

 

[TheGreek]

You will need to adapt it to suit your particular requirements.

Okay thanks again Brogan, now how would I throw in color for the background?


background-color:#0080FF;?

 

[Paul B]

Yes.

 

[TheGreek]

Yes.

When adding the CSS you gave me and adding the background, color it appears as such.

 

[TheGreek]

What else would need to be done?

 

[TheGreek]

How can I also change the Staff banner to look like it?

 

[TheGreek]

Bump.