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

XF 1.2 Custom CSS class name for banners

Discussion in 'XenForo Questions and Support' started by Ranger375, Jun 19, 2013.

  1. Ranger375

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

    James Well-Known Member

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

    Ranger375 Well-Known Member

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

    James Well-Known Member

    Should be able to target using .userText .userBanner
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    James and Ranger375 like this.
  6. Ranger375

    Ranger375 Well-Known Member

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

    James Well-Known Member

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

    Divvens Well-Known Member

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

    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: Jun 20, 2013
  9. Ranger375

    Ranger375 Well-Known Member

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

    Divvens Well-Known Member

    I just edited my post above :)
     
    Ranger375 likes this.
  11. Ranger375

    Ranger375 Well-Known Member

    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.png
     
  12. Divvens

    Divvens Well-Known Member

    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 likes this.
  13. Ranger375

    Ranger375 Well-Known Member

    Getting closer :D

    banner2.png
     
    Divvens likes this.
  14. Divvens

    Divvens Well-Known Member

    userBanner bannermil wrapped

    Should do it :)
     
  15. Ranger375

    Ranger375 Well-Known Member

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


    banner2.png
     
  16. Divvens

    Divvens Well-Known Member

    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;
    }
    
     
  17. Ranger375

    Ranger375 Well-Known Member

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

     
  18. Divvens

    Divvens Well-Known Member

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

    Ranger375 Well-Known Member

    No dice, but I appreciate the help.
     
  20. Brogan

    Brogan XenForo Moderator Staff Member

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

Share This Page