XF 1.5 Custom CSS class name for banners

Aureus

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

Brad Padgett

Well-known member
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:

Code:
.userBanner { background-color: pink; }
 

Aureus

Member
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:

Code:
.userBanner { background-color: pink; }
Failed, Goes White.
 

Aureus

Member
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:

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

Well-known member
Add this to your extra.css
Code:
.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.
 

Gemma

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

userBanner.png

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

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

Aureus

Member
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

Code:
.userBanner.staff {
    color: white;
    background-color: pink;
    border-color: white;
}
So If I wanted Manager banner to be Pink? I would do

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