• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Creating custom user group banner CSS

Creating custom user group banner CSS

It's a wrap

Brogan

XenForo moderator
Staff member
#1
Brogan submitted a new resource:

Creating custom user group banner CSS - It's a wrap

These instructions will explain how to create your own custom CSS for user banners.

Choose a class name for your custom class, in this example we are using my-class.
Add it to the custom CSS field for the user group, like so:

View attachment 49647

If you want the banners to wrap around the message user info block then you must also use the userBanner class, as shown above.

Note that there are no . before the class names and they are separated by a space.

Then add the class and your code to EXTRA.css.
Read more about this resource...
 
Last edited:

Lisa

Well-known member
#5
It depends where you add a code for your custom banner. If it's loaded after user_banners.css then you have no problem. I am not using extra.css so it works fine for me.
Ahhh okay. Since most people will use extra.css, this is currently the only way it'll work in that particular case.
 

CyberAP

Well-known member
#8
The border in the default class is transparent.
But that color is defined. It should be like this:

Code:
.userBanner
{
  background: url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top;
  border: 1px solid;
}
Yes, it'll result in a black border, but it doesn't matter because there is no point in using just .userBanner class for a banner.
 

xIsabel38

Well-known member
#9
Is it seriously this simple? What's the catch?

So this is for 1.2 I know.. but is this the same way I could do Thread Prefixs in 1.1.5?
 

Brogan

XenForo moderator
Staff member
#10
Yes, the concept is the same as thread prefixes.

This will only work from 1.2.0 Beta 2 as the current CSS doesn't apply the wings/wrapping using just the userBanner class.
 
Last edited:

Mike

XenForo developer
Staff member
#11
But that color is defined. It should be like this:

Code:
.userBanner
{
  background: url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top;
  border: 1px solid;
}
Yes, it'll result in a black border, but it doesn't matter because there is no point in using just .userBanner class for a banner.
You're still applying a color, except it's currentColor (rather than transparent) which gives more unexpected results.
 

xIsabel38

Well-known member
#14
So I tried this in EXTRA.css:

Code:
.admin
{
background: url("@imagePath/xenforo/ranks/admin.png") no-repeat;
  width: 140px;
  height: 28px;
}
And I used "admin" as the custom CSS class name in user group permissions but I don't see any changes.

So I tried making a small test using this instead:

Code:
.userBanner.test
{
color: red;
background-color: black;
border-color: red;
}
And for the user group permission I used "userBanner test" as the class name but again nothing. Any ideas what I am doing wrong?
 

xIsabel38

Well-known member
#18
Yeah I managed to figure some of it out, but what I'm really trying to do is use an image. It doesn't display without the title. But when I add the title it only displays up to the length of the title and the actual title overlays ontop of the image.

I have this in EXTRA.css
Code:
.admin
{
background: url("@imagePath/xenforo/ranks/admin.png") no-repeat;
  width: 140px;
  height: 28px;
}
But this is what I get:

Untitled2.png

It's hard to see there but the title is ontop of the image, shown here:

Untitled3.png
 

Shelley

Well-known member
#19
Yeah I managed to figure some of it out, but what I'm really trying to do is use an image. It doesn't display without the title. But when I add the title it only displays up to the length of the title and the actual title overlays ontop of the image.

I have this in EXTRA.css
Code:
.admin
{
background: url("@imagePath/xenforo/ranks/admin.png") no-repeat;
  width: 140px;
  height: 28px;
}
But this is what I get:

View attachment 52339

It's hard to see there but the title is ontop of the image, shown here:

View attachment 52340
Hopefully I understand what you mean and not mis-reading what you are wanting to do. Try adding color: transparent; so it looks like so. that will hide the text.

Code:
.admin
{
background: url("@imagePath/xenforo/ranks/admin.png") no-repeat;
  width: 140px;
  height: 28px;
  color: transparent;
}
 

xIsabel38

Well-known member
#20
Alright, lets see if I can explain this right. At first I couldn't get anything to show up but I kept messing around with it myself until I got it working. So now it does show up. However, the problem is that the entire image isn't showing up. It's only showing up for as long as the title is.

Like if I wrote the title as "this is a very very long title" then the image will display as this:
Untitled2.png

If I write the title as "short title" then the image will display as this:
Untitled3.png
Also, I used the transparency color however, if I highlight over the image, the title is still visible.

I'm trying to get the entire image to show which is 140x28 and I'm trying to completely remove the title.