• 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

Exemption

Active member
#1
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

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


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
 

Brogan

XenForo moderator
Staff member
#2
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.
 

Exemption

Active member
#7
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 ;)


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 :)
 

Russ

Well-known member
#8
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

Active member
#9
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
Thanks! What about making the tag a little bigger and the text smaller like the other one?
 

Exemption

Active member
#12
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
Still have the background color


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

Verringer

Active member
#16
Still have the background color


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