• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 Custom CSS class name for banners

#1
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
#3
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; }
 
#6
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.
 
#10
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
#11
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
#15
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;
}
 
#16
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;
}