• 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

Exemption

Active member
#1


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);
}
 

Exemption

Active member
#3
Add margin-bottom to .message .messageUserBlock .userBanner.


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);
}
 

Amaury

Well-known member
#4
You have two instances of .message .messageUserBlock .userBanner, and one of them already has margin: 0 auto. That's likely overwriting your margin-bottom.
 

Exemption

Active member
#5
You have two instances of .message .messageUserBlock .userBanner, and one of them already has margin: 0 auto. That's likely overwriting your margin-bottom.
Hmm well when I remove the margin: 0 auto and out margin: 5px it does this

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);
}