XF 1.5 Custom CSS class name for banners

[Zalbus]

I don't really know CSS. For banners, Can Anyone give me Pink for my thing, I did

• userBanner my-style

It showed White, I would like Pink if you can Please, @Brogan I have read the articles Still confused.

 

[Zalbus]

(I have already googled It Cannot find)

 

[Brad Padgett]

I'm not sure what your asking. It would help if you were more specific. If you want to change the background color of your banner you'll need to find the appropriate selector and use background-color to change it. If the selector is "userBanner" for example you could do this:

.userBanner { background-color: pink; }

 

[Paul B]

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

 

[CarpCharacin]

Add this to your extra.css

.userBanner.my-style
{
color: white;
background-color: pink;
}

 

[Zalbus]

I'm not sure what your asking. It would help if you were more specific. If you want to change the background color of your banner you'll need to find the appropriate selector and use background-color to change it. If the selector is "userBanner" for example you could do this:

.userBanner { background-color: pink; }

Failed, Goes White.

 

[Zalbus]

Add this to your extra.css

.userBanner.my-style
{
color: white;
background-color: pink;
}

Located?

 

[Zalbus]

Failed, Goes White.

As in, Like the Staff member White.

 

[CarpCharacin]

Located?

Add it to your extra.css template for your style. Enter EXTRA.css in the search box in the admin cp and it shoud show up under templates.

 

[Zalbus]

I'm not sure what your asking. It would help if you were more specific. If you want to change the background color of your banner you'll need to find the appropriate selector and use background-color to change it. If the selector is "userBanner" for example you could do this:

.userBanner { background-color: pink; }

Like See a Staff Member banner? I made a User group So that group has a Banner, They give you some colors but you can make you're own I would like pink as one. for a Banner.

 

[Brad Padgett]

Add this to your extra.css

.userBanner.my-style
{
color: white;
background-color: pink;
}

^ @Aureus this is the correct way. I was merely showing you how to use background-color.

You need to replace "my-style" with the userBanner selector that you typed into the box shown in the tutorial.

You can also do it for each usergroup and make a different selector in the box for each one.

 

[Zalbus]

Add it to your extra.css template for your style. Enter EXTRA.css in the search box in the admin cp and it shoud show up under templates.

And what will that do?

 

[Zalbus]

Add this to your extra.css

.userBanner.my-style
{
color: white;
background-color: pink;
}

Added, Now what?

 

[Zalbus]

Added, Now what?

Like what would I type in the thing to make The Banner show as Pink?

 

[Gemma]

Go to the usergroup you want to add a banner to - AdminCP > Users > List User Groups



Give the banner a title, select "other" and give the banner a class name (my-style for the examples others have given in this thread; I've called it staff). Save your changes.

Go to your EXTRA.css template. AdminCP > Appearance > Templates and add the following

.userBanner.staff {
    color: white;
    background-color: pink;
    border-color: white;
}

 

[Zalbus]

Go to the usergroup you want to add a banner to - AdminCP > Users > List User Groups

View attachment 149546

Give the banner a title, select "other" and give the banner a class name (my-style for the examples others have given in this thread; I've called it staff). Save your changes.

Go to your EXTRA.css template. AdminCP > Appearance > Templates and add the following

.userBanner.staff {
    color: white;
    background-color: pink;
    border-color: white;
}

So If I wanted Manager banner to be Pink? I would do

.userBanner.manager{
    color: white;
    background-color: pink;
    border-color: white;
}

 

[Zalbus]

@Brogan After I added the code up above to my EXTRA.CCS What would I do now?

 

[Paul B]

The guide I linked to earlier explains the steps required.