XF 1.5 Help with custom user banners

Exemption · Aug 11, 2015

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

Tagging @Verringer maybe you can help

Paul B · Aug 11, 2015

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 · Aug 11, 2015

Brogan said:
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.

And how do I do that?

Exemption · Aug 11, 2015

Tagging @Chris D and @Jake Bunce @Jeremy for help

Chris D · Aug 11, 2015

Possibly not the best person to ask, at the moment

Exemption · Aug 11, 2015

And tagging @Mike

Exemption · Aug 12, 2015

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

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 · Aug 12, 2015

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 · Aug 12, 2015

Russ said:
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?

Russ · Aug 12, 2015

Just add padding/font sizing to the:

.message .messageUserBlock .userBanner

Exemption · Aug 12, 2015

Russ said:
Just add padding/font sizing to the:

.message .messageUserBlock .userBanner

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

EDIT: Got it! Thanks

Exemption · Aug 12, 2015

Russ said:
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;
}

Russ · Aug 12, 2015

For the background color you should ask your style author.

Exemption · Aug 12, 2015

Russ said:
For the background color you should ask your style author.

I thought u were the styler for PixelExit Core

Russ · Aug 12, 2015

Exemption said:
I thought u were the styler for PixelExit Core

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

Try my solution at the bottom of post 8

Verringer · Aug 12, 2015

Exemption said:

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

Exemption · Aug 12, 2015

Verringer said:
.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

Thanks

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

XF 1.5 Help with custom user banners

Exemption

Active member

Paul B

XenForo moderator

Exemption

Active member

Exemption

Active member

Chris D

XenForo developer

Exemption

Active member

Exemption

Active member

Russ

Well-known member

Exemption

Active member

Russ

Well-known member

Exemption

Active member

Exemption

Active member

Russ

Well-known member

Exemption

Active member

Russ

Well-known member

Verringer

Active member

Exemption

Active member

Similar threads

We value your privacy