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

XF 1.5 Help with custom user banners

Discussion in 'Styling and Customization Questions' started by Exemption, Aug 11, 2015.

Tags:
  1. Exemption

    Exemption Active Member

    Yes I have already looked at the guide with changing user banners but that is not helping me with this:
    I want my admins banners to be
    [​IMG]
    With solid red and a rounded banner. I am using the same basic theme PixelExit Core but I dont know if Im using the EXACT same as theirs is custom

    When I try it gives me
    [​IMG]

    1) I dont like how the red is shaded and not just solid red
    2) Instead of it a wrapped banner i want it like a rounded circle :D

    Tagging @Verringer maybe you can help :p
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    It is inheriting the default CSS which includes a gradient and wrapping.

    The guide explains how the wrapping works and how not to include it.

    Ultimately though, you just need to create the correct CSS.
     
  3. Exemption

    Exemption Active Member

    And how do I do that?
     
  4. Exemption

    Exemption Active Member

    Last edited: Aug 11, 2015
  5. Chris D

    Chris D XenForo Developer Staff Member

    Possibly not the best person to ask, at the moment :)
     
    Steve F likes this.
  6. Exemption

    Exemption Active Member

  7. Exemption

    Exemption Active Member

    UPDATE:

    Alright I have been messing around with some things in EXTRA.CSS and I am getting a little closer but still very far away from what I really want :D
    Right now I have my banner (RIGHT) a little circular but it is still smaller than the one I am seeking for (LEFT) and the text is a little too bold/big as I would like that smaller ;)
    [​IMG] [​IMG]

    And my EXTRA.CSS is just crammed xD So I need to clean it up a little and also want to remove the gray color background in the userbox below the avatar the contains the name, title, and banner.

    EXTRA.CSS
    Code:
    .userBanner {
    background: transparent url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    margin-bottom: 6px !important;
    font-size: 1px;
    font-weight: normal;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    border: 1px solid transparent;
    }
    
    .messageUserBlock .userBanner {
    margin-top: 0px; !important;
    margin-bottom: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    border: 1px solid transparent;
    }
    
    .messageUserBlock .userBanner:last-child {
    margin-bottom: 0px !important;
    }
    
    .userBanner.wrapped span {
    height: 0px;
    }
    
    .xenOverlay.memberCard .cardUserBanner {
    margin: 4px 0;
    }
    
    .userBanner.bannerStaff {
    background-color: @secondaryMedium;
    border-color: @secondaryMedium;
    color: @contentBackground;
    text-shadow: 0 px 0px 0px @secondaryMedium;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    }
    
    .userBanner.Administrator {
    background: #FF2322;
    font-size: 1px;
    border: 1px solid transparent;
    font-weight: normal;
    webkit-border-radius: 2px;
    moz-border-radius: 2px;
    khtml-border-radius: 2px;
    color: white;
    border-radius: px;
    font-weight: bold;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    }
    
    .userBanner.Donator {
    background: #4D87C1;
    font-size: 1px;
    padding: 3px 5px;
    border: 1px solid transparent;
    font-weight: normal;
    webkit-border-radius: 2px;
    moz-border-radius: 2px;
    khtml-border-radius: 2px;
    color: white;
    border-radius: 2px;
    font-weight: bold;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    }
    
    .userBanner.Moderator {
    background: #277700;
    font-size: 1px;
    padding: 3px 5px;
    border: 1px solid transparent;
    font-weight: normal;
    webkit-border-radius: 2px;
    moz-border-radius: 2px;
    khtml-border-radius: 2px;
    color: white;
    border-radius: 2px;
    font-weight: bold;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    }
    
    .messageUserBlock {
    background: transparent;
    border: none;
    border-radius: 2px;
    Tagging @Brogan :)
     
  8. Russ

    Russ Well-Known Member

    Some simple CSS would do it:

    Code:
    .message .messageUserBlock .userBanner {
    border-radius: 4px;
    box-shadow: none;
    margin: 0 auto;
    background-image: none;
    }
    .message .messageUserInfo .userBanner.wrapped span {
    display: none;
    }
    
    The background color is inherited from: Style Properties -> Message Layout -> User Info Block
     
    Exemption likes this.
  9. Exemption

    Exemption Active Member

    Thanks! What about making the tag a little bigger and the text smaller like the other one?
     
  10. Russ

    Russ Well-Known Member

    Just add padding/font sizing to the:

    .message .messageUserBlock .userBanner
     
  11. Exemption

    Exemption Active Member

    Hmm what are the messages/what do I put for padding and fonting?

    EDIT: Got it! Thanks :D
     
    Last edited: Aug 12, 2015
  12. Exemption

    Exemption Active Member

    Still have the background color
    [​IMG]

    Code:
    .message .messageUserBlock .userBanner {
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    margin: 0 auto;
    background-image: none;
    }
    .message .messageUserInfo .userBanner.wrapped span {
    display: none;
    }
    
    .userBanner.Administrator {
    background: #FF2322;
    color: white;
    }
    
    .userBanner.Donator {
    background: #4D87C1;
    color: white;
    }
    
    .userBanner.Moderator {
    background: #277700;
    color: white;
    }
    
    .message .messageUserBlock .userBanner {
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    margin: 0 auto;
    font-size: 12px;
    font-weight: 1px/bold;
    padding: 4px 6px;
    background-image: none;
    }
    
    .message .messageUserInfo .userBanner.wrapped span {
    display: none;
    }
     
  13. Russ

    Russ Well-Known Member

    For the background color you should ask your style author.
     
  14. Exemption

    Exemption Active Member

    I thought u were the styler for PixelExit Core :eek:
     
  15. Russ

    Russ Well-Known Member

    Ah the link in your was was/is running a different style :)

    Try my solution at the bottom of post 8
     
  16. Verringer

    Verringer Active Member

    .messageUserBlock h3.userText { background-color: rgb(249, 249, 249); } should get rid of it but you should just shoot PE a support ticket. Nice user banners ;)
     
    Exemption likes this.
  17. Exemption

    Exemption Active Member

    Thanks :D
    Hey what text do you use for the banners? For some reason mine seem too bold/big :p
     

Share This Page