XF 1.5 Setting up custom user banners

[Exemption]

Ok so I want to have my banners like

So I inspected element and got the colors and put

.userBanner.Moderator
{
color: #006600;
background-color: #00CC33;
border-color: #006600;
}

in the extra folder but I got

and I want the background color to be on the ends like the top one ​

 

[Paul B]

See this guide: Creating custom user group banner CSS

 

[Exemption]

See this guide: Creating custom user group banner CSS

Yes I did that but what else do i put in the extra css folder inside of the userBanner thing to make it like that. I followed it but i belive i need another option to get the sides like

 

[Amaury]

That should be all you need. It's how we set banners up on KH-Flare 2014 and they appear like that.

You may have other CSS conflicting with your CSS.

 

[Exemption]

That should be all you need. It's how we set banners up on KH-Flare 2014 and they appear like that.

You may have other CSS conflicting with your CSS.

Any ideas that might be conflicting with it?

 

[Dylan V]

Hi,

Remove everything you did before you apply what I wrote below.

Here:



Put this: userBanner bannerCustom and change Custom with what you want.

Now, go to EXTRA.css and add this:

.userBanner.bannerCustom
{
    color: #000000;
    background-color: #000000;
    border-color: #000000;
}

.userBanner.bannerCustom.wrapped span
{
    background-color: #000000;
}

Change Custom with what you've put on the image above and #000000 with the color of your choice.

This:

.userBanner.bannerCustom.wrapped span

applies to that:

 

[Exemption]

Hi,

Remove everything you did before you apply what I wrote below.

Here:

View attachment 111041

Put this: userBanner bannerCustom and change Custom with what you want.

Now, go to EXTRA.css and add this:

.userBanner.bannerCustom
{
    color: #000000;
    background-color: #000000;
    border-color: #000000;
}

.userBanner.bannerCustom.wrapped span
{
    background-color: #000000;
}

Change Custom with what you've put on the image above and #000000 with the color of your choice.

This:

.userBanner.bannerCustom.wrapped span

applies to that:

View attachment 111042

Amazing it worked! Thanks so much