Creating custom user group banner CSS

[Paul B]

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

 

[CyberAP]

Actually you don't need .userBanner class in a custom banner selector, so we may just remove it.

 

[Lisa]

Actually you don't need .userBanner class in a custom banner selector, so we may just remove it.

If you currently want to pull the default layout, you do

 

[CyberAP]

If you currently want to pull the default layout, you do

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.

 

[Lisa]

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]

BTW setting a specific color for background and border in default userBanner may be considered as a bug.

 

[Paul B]

The border in the default userBanner class is transparent.

 

[CyberAP]

The border in the default class is transparent.

But that color is defined. It should be like this:

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

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?

 

[Paul B]

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.

 

[Mike]

But that color is defined. It should be like this:

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

 

[Brandon Sheley]

Maybe I'm blind but I don't see any changes between the two screenshots?

 

[CyberAP]

Maybe I'm blind but I don't see any changes between the two screenshots?

Look at borders.

 

[xIsabel38]

So I tried this in EXTRA.css:

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

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

 

[Shelley]

Did you add the title to the field (User Banner Text) ? if not it won't display.

 

[xIsabel38]

Did you add the title to the field (User Banner Text) ? if not it won't display.

And I used "admin" as the custom CSS class name in user group permissions...

 

[Shelley]

Works fine when I tried it on mine.Try checking your extra css for typos or missing "}" "{" ";" this could cause for it not to display and other elements.

 

[xIsabel38]

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

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

But this is what I get:



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

 

[Shelley]

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

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

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

 

[xIsabel38]

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:


If I write the title as "short title" then the image will display as this:

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.