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

XF 1.5 Spacing between banners

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

  1. Exemption

    Exemption Active Member

    [​IMG]

    My EXTRA.CSS
    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;
    }
    
    .userBanner.Staff {
    background: lightgreen;
    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;
    }
    
    .messageUserBlock .userText {
    background-color: rgb(249, 249, 249);
    }
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Add margin-bottom to .message .messageUserBlock .userBanner.
     
  3. Exemption

    Exemption Active Member

    [​IMG]

    And I did that but that didnt work
    Code:
    .message .messageUserBlock .userBanner {
    border-radius: 4px;
    margin-bottom: 15px;
    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;
    }
    
    .userBanner.Staff {
    background: lightgreen;
    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;
    }
    
    .messageUserBlock .userText {
    background-color: rgb(249, 249, 249);
    }
     
  4. Amaury

    Amaury Well-Known Member

    You have two instances of .message .messageUserBlock .userBanner, and one of them already has margin: 0 auto. That's likely overwriting your margin-bottom.
     
  5. Exemption

    Exemption Active Member

    Hmm well when I remove the margin: 0 auto and out margin: 5px it does this
    [​IMG]
    Code:
    .message .messageUserBlock .userBanner {
    border-radius: 4px;
    margin-bottom: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    margin-bottom: 5px;
    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;
    }
    
    .userBanner.Staff {
    background: lightgreen;
    color: white;
    }
    .message .messageUserBlock .userBanner {
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    font-size: 12px;
    font-weight: 1px/bold;
    padding: 4px 6px;
    background-image: none;
    }
    
    .message .messageUserInfo .userBanner.wrapped span {
    display: none;
    }
    
    .messageUserBlock .userText {
    background-color: rgb(249, 249, 249);
    }
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    It nay be worth reading up on CSS so you can see how to combine margin 0 auto with margin bottom 5px.

    CSS Margin
     

Share This Page