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.
 
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; }
 
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.
 
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.
 
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.
 
Go to the usergroup you want to add a banner to - AdminCP > Users > List User Groups

userBanner.webp

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