XF 1.2 Custom CSS class name for banners

[Ranger375]

I don't really know CSS. Can anyone give me template of sorts that I can paste into my extra.css and swap the colors out accordingly for the usergroup banners?

 

[James]

Isn't this an option when you're creating the banners for 1.2?

 

[Ranger375]

Isn't this an option when you're creating the banners for 1.2?

Yeah but I want to use other colors for my banner. So that is the reason for this post since there are limited color choices.

 

[James]

Should be able to target using .userText .userBanner

 

[Paul B]

You can use whatever class names you like.
Just add it to the field.

Here's a resource explaining how to do it for prefixes: http://xenforo.com/community/resources/creating-custom-thread-prefix-css.350/

 

[Ranger375]

So I tried making a banner using this in extra.css, but it isn't displaying as a banner:

.bannermil {
color: @textCtrlBackground;
background-color: @primaryDarker;
border-color: @primaryDark;
}
a.bannerLink:hover .bannermil {
color: black;
background-color: yellow;
border-color: white;
}

It is appearing...just not as a banner.

 

[James]

We need links to your site. That CSS alone won't help much.

 

[Divvens]

So I tried making a banner using this in extra.css, but it isn't displaying as a banner:
It is appearing...just not as a banner.

Are you adding the class name on the banner option? Don't yet have hands on 1.2, but it should be pretty similar to the prefixes from what I've seen.


you need to add bannermil (or your class name) in the option for custom css class name.

Edit: AH! I see, you are adding your css but it isn't displaying same as the banner here on xF forums right? You also need to use the default ribbon css if you are adding your own css (I presume).

Using chrome browser tools, here is the general css rules for banner.

.userBanner.wrapped { 
   -webkit-border-top-right-radius: 0; 
   -moz-border-radius-topright: 0; 
   -khtml-border-top-right-radius: 0; 
   border-top-right-radius: 0; 
   -webkit-border-top-left-radius: 0; 
   -moz-border-radius-topleft: 0; 
   -khtml-border-top-left-radius: 0; 
   border-top-left-radius: 0; position: relative; 
} 

.userBanner { 
   font-size: 11px; 
   background: transparent url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x       top; 
   padding: 1px 5px; 
   border: 1px solid transparent; 
   -webkit-border-radius: 3px; 
   -moz-border-radius: 3px; 
   -khtml-border-radius: 3px; 
   border-radius: 3px; 
   -webkit-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); 
   -moz-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); 
   -khtml-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); 
   box-shadow: 1px 1px 3px rgba(0,0,0,0.25); 
   text-align: center;
}

 

[Ranger375]

Are you adding the class name on the banner option? Don't yet have hands on 1.2, but it should be pretty similar to the prefixes from what I've seen.
View attachment 49392

you need to add bannermil (or your class name) in the option for custom css class name.

I added that class name to the respective field, the only problem is it isn't displaying as a banner, but the colors are showing in the banner location.

 

[Divvens]

I added that class name to the respective field, the only problem is it isn't displaying as a banner, but the colors are showing in the banner location.

I just edited my post above

 

[Ranger375]

Thanks. I didn't change your code, I essentially just pasted it into my extra.css. The banner is appearing as a block for me. Any idea what I am doing wrong?

 

[Divvens]

Thanks. I didn't change your code, I essentially just pasted it into my extra.css. The banner is appearing as a block for me. Any idea what I am doing wrong?

View attachment 49393

Hmm, try this. In the custom css add both classes (with a space between them), your custom class and default class.

So it should be something like:
userBanner bannermil

 

[Ranger375]

Getting closer

 

[Divvens]

Getting closer

View attachment 49398

userBanner bannermil wrapped

Should do it

 

[Ranger375]

userBanner bannermil wrapped

Should do it

userBanner bannermil wrapped didn't work, but when I used userBanner bannermil.wrapped, it appeared transparent (but wrapped) for some reason lol.

 

[Divvens]

userBanner bannermil wrapped didn't work, but when I used userBanner bannermil.wrapped, it appeared transparent (but wrapped) for some reason lol.


View attachment 49399

Well, at least we reached ahead somewhere haha.

What is your EXTRA.css statements?

.bannermil {
color: @textCtrlBackground;
background-color: @primaryDarker;
border-color: @primaryDark;
}

That is mostly what needs to be there in EXTRA.css, you can remove the default classes since they'll work even without them being mentioned in EXTRA.css, and the ".a" rule isn't required as far as I see for the banner since it doesn't contain a hyperlink.

If it continues to be transparent even after removing the unneeded statements from EXTRA.css, add !important to your bannermil rules.

.bannermil {
color: @textCtrlBackground !important;
background-color: @primaryDarker !important;
border-color: @primaryDark !important;
}

 

[Ranger375]

Well, at least we reached ahead somewhere haha.

What is your EXTRA.css statements?

.bannermil {
color: @textCtrlBackground;
background-color: @primaryDarker;
border-color: @primaryDark;
}

That is mostly what needs to be there in EXTRA.css, you can remove the default classes since they'll work even without them being mentioned in EXTRA.css, and the ".a" rule isn't required as far as I see for the banner since it doesn't contain a hyperlink.

If it continues to be transparent even after removing the unneeded statements from EXTRA.css, add !important to your bannermil rules.

.bannermil {
color: @textCtrlBackground !important;
background-color: @primaryDarker !important;
border-color: @primaryDark !important;
}

Still no change, but I appreciate the help none the less. This is what's in the extra.css

.userBanner.wrapped {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
-khtml-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
-khtml-border-top-left-radius: 0;
border-top-left-radius: 0; position: relative;
}

.userBanner {
font-size: 11px;
background: transparent url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top;
padding: 1px 5px;
border: 1px solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
-khtml-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
text-align: center;
}

.bannermil {
color: @textCtrlBackground !important;
background-color: @primaryDarker !important;
border-color: @primaryDark !important;
}

 

[Divvens]

Still no change, but I appreciate the help none the less. This is what's in the extra.css

You can remove the .userBanner and .userBanner.wrapped rules from the extra CSS, since they are a part of default CSS once added as a class it should automatically work. Try to remove them from EXTRA.css (the .userBanner and .userBanner.wrapped rules) and see if it works?

If it doesn't, I can't help further Since I myself don't yet have a copy of 1.2, if I had one I'm sure I could help more, sorry. Though @Brogan or @Shelley may be able to help you out.

 

[Ranger375]

No dice, but I appreciate the help.

 

[Paul B]

Can you link to your site and explain what it is you are trying to achieve?