XF 1.2 Custom CSS class name for banners

Ranger375

Well-known member
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?
 
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.
 
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.
PrefixStyle.webp

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.
Code:
.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;
}
 
Last edited:
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.
 
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?

banner.webp
 
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?
Code:
.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.
Code:
.bannermil {
color: @textCtrlBackground !important;
background-color: @primaryDarker !important;
border-color: @primaryDark !important;
}
 
Well, at least we reached ahead somewhere haha.

What is your EXTRA.css statements?
Code:
.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.
Code:
.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;
}
 
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.
 
Top Bottom