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

It's a wrap

Tags:
  1. Brogan

    Brogan XenForo Moderator Staff Member

    Brogan submitted a new resource:

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

    Read more about this resource...
     
    Last edited: Jun 22, 2013
  2. CyberAP

    CyberAP Well-Known Member

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

    Lisa Well-Known Member

    If you currently want to pull the default layout, you do :)
     
    Sounnd likes this.
  4. CyberAP

    CyberAP Well-Known Member

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

    Lisa Well-Known Member

    Ahhh okay. Since most people will use extra.css, this is currently the only way it'll work in that particular case.
     
  6. CyberAP

    CyberAP Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    The border in the default userBanner class is transparent.
     
  8. CyberAP

    CyberAP Well-Known Member

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

    xIsabel38 Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    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: Jun 22, 2013
    Lisa likes this.
  11. Mike

    Mike XenForo Developer Staff Member

    You're still applying a color, except it's currentColor (rather than transparent) which gives more unexpected results.
     
    Steve F likes this.
  12. Brandon Sheley

    Brandon Sheley Well-Known Member

    Maybe I'm blind but I don't see any changes between the two screenshots?
     
    Danita likes this.
  13. CyberAP

    CyberAP Well-Known Member

    Look at borders.
     
    Brandon Sheley likes this.
  14. xIsabel38

    xIsabel38 Well-Known Member

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

    Shelley Well-Known Member

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

    Screenshot_6.png
     
    OnSceneReporter likes this.
  16. xIsabel38

    xIsabel38 Well-Known Member

     
  17. Shelley

    Shelley Well-Known Member

    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.

    Screenshot_9.png
    Screenshot_10.png
    Screenshot_8.png
     
  18. xIsabel38

    xIsabel38 Well-Known Member

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

    Shelley Well-Known Member

    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;
    }
     
  20. xIsabel38

    xIsabel38 Well-Known Member

    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.
     

Share This Page