XenForo User Banner Spacing

Discussion in 'Systems Administration' started by brxdleyy, Jul 26, 2018.

Thread Status:
Not open for further replies.
  1. Hello hello,
    I was playing around with XenForo banners via extra.css and managed to get a final result of this:
    [​IMG]

    This was what I was hoping to achieve, my only issue with it is that there is no spacing whatsoever in between the banners/user name.

    Here’s the extra.css code: (it’s messy, oops)
    Code (Text):
    message .messageUserBlock .userBanner {
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    margin: 0 auto;
    background-image: none;
    font-weight: bold;
    }
    .message .messageUserInfo .userBanner.wrapped span {
    display: none;
    }

    .userBanner.Admin {
    background: #ff0707;
    color: white;
    font-weight: bold;
    }

    .userBanner.Contributor {
    background: #ffa100;
    color: white;
    font-weight: bold;
    }

    .message .messageUserBlock .userBanner {
    border-radius: 4px;
    box-shadow: none;
    margin: 0 auto;
    background-image: none;
    }
    .message .messageUserInfo .userBanner.wrapped span {
    display: none;
    }
    .userBanner.Moderator {
    background: #277700;
    color: white;
    font-weight: bold;
    }

    .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;
    }
    .xenith_bg{background:url(https://i.imgur.com/1M4lbYy.jpg) center;background-size:cover}.slink{background:rgba(116,185,255,.825);padding:10px;font-size:15px;color:#FFF;font-family:Montserrat,sans-serif;border-bottom:3px solid #cc0000!important;text-align:center;text-transform:uppercase;font-weight:700;box-shadow:0 2px 5px #888}.hlight{background:#cc0000;display:inline-block;padding:2px 3px;border-radius:0}.sidebar{float:right;font-size:12px;width:250px;margin-top:3.25em}.sidebar .section .secondaryContent{padding:25px;border-style:none;box-shadow:0 2px 5px #888}.nodeList .categoryStrip{font-size:15px;text-decoration:none;color:#FFF;background-color:#3edefe;padding:20px 10px 20px 20px;margin:0;border-bottom:3px solid #309eb2!important;border:0;min-height:6px;position:relative;font-weight:400}.nodeList .categoryStrip .nodeDescription,.nodeList .categoryStrip .nodeTitle a{font-family:Montserrat,sans-serif;font-weight:700;color:#FFF}.nodeList .categoryStrip .nodeDescription{font-size:10px;margin-top:10px;line-height:1.5;text-transform:uppercase}.categoryStrip__collapseToggle{color:#FFF}html{overflow:auto}::-webkit-scrollbar{width:8px; background-color: #333}::-webkit-scrollbar-track{-webkit-border-radius:10px;border-radius:0}::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:0;background:#AA0000}::-webkit-scrollbar-thumb:window-inactive{background:#AA0000}.navTabs .navTab.articles .navLink:before{margin-right:3.5px;content:"\f015";font-family:FontAwesome}.navTabs .navTab.forum .navLink:before{margin-right:3.5px;content:"\f086";font-family:FontAwesome}.navTabs .navTab.iwd_the-staff-team .navLink:before{margin-right:3.5px;content:"\f0c0";font-family:FontAwesome}.navTabs .navTab.members .navLink:before{margin-right:3.5px;content:"\f2bd";font-family:FontAwesome}
    #headerMover
    {
        background-image: url("https://cdn.discordapp.com/attachments/434096511337496586/454533631839567872/bg.png") !important;
        background-color: #222;
        background-attachment: fixed;
      background-position:center top;
      background-repeat: no-repeat;
      height:100%;
      overflow:hidden;
      width:100%;
    }
    #headerMover #headerProxy, #header, #content
    {
        background-color: transparent !important;
    }
    .messageUserBlock h3.userText, .messageUserBlock a.username {
      text-align: center;
    }
    If anyone has a solution, that’d be great!
     
  2. Try this.

    Code (Text):
    .message .messageUserInfo .userBanner.wrapped span {
    display: none;
    margin-bottom: 6px !important;
    }
    I forget where it goes, but play around with the margin-bottom in the classes, one of them should work. I'm not on my computer, so kind of tricky to give you the exact answer without XenForo.
     
  3. This worked! I just copied the margin-bottom part and pasted it in between the classes. Thank you so much!
     
Thread Status:
Not open for further replies.