Creating custom user group banner CSS

[DistortedDorian]

In the default style the banners start directly under the user title.
Moving it up would obscure the title but use this code:

.messageUserBlock .userBanner
{
    margin-top: -5px;
}

Adjust to suit.

Thanks for the reply, but that code doesn't seem to change anything, the banner is still at the same place (look at the attached image).
I want the banner to hop up a little to make it look better.
I played around with the code you gave for a little while and did this:

.messageUserBlock .userBanner {
    margin-top: 0px !important;
}

Working perfectly now!

 

[Riaz]

Im pretty bad with CSS, so would anyone help me create

this type of Banner?

 

[herocus]

Is it possible to pull the information of the title ladder to the banner?
What I mean is, currently the member has the text 'member' based on title ladder under his name.
What I need is to have his text 'member' pulled into the banner we just created, then when the member has different title ladder, this will also be in the banner automatically. (see attchment picture)

 

[OnSceneReporter]

Is it possible to pull the information of the title ladder to the banner?
What I mean is, currently the member has the text 'member' based on title ladder under his name.
What I need is to have his text 'member' pulled into the banner we just created, then when the member has different title ladder, this will also be in the banner automatically. (see attchment picture)

I'm a noob, but I was just some playing around and these are my observations:

When you add a section to "Extra.css" like this

.userBanner.bannerleadadmin
{
color: white;
height: 24px;
width: 124px;
}

You need to write a title in the User Group like so,

The text in UserBanner Text will show up in the banner. But this is applied to a group.

I bet that you could use the User Group Promotions feature...

... to make criteria like that of the title ladder promotion to automatically promote users to the group with that styling banner. You can probably then delete the text of the title ladder.

Again, I am noob. This is just something I have observed and I am playing around with. I don't know if this is the best way.

 

[OnSceneReporter]

I figured out how to have multiple banners show, it's in Options >Users.

So now I have multiple banners show, which is what I want. However, on the member profile page, they stack vertically...

Is there a way to force them to line up side by side on the member profile page?

 

[Mike]

Lining up side by side is the standard behavior, so I'd have to guess this is something changed in your style.

 

[OnSceneReporter]

I am not using .userBanner.title, because it seemed to create a strange shadow or pad that also is displayed on the side of posts.

.userBanner.bannerleadadmin
{
    background: url('styles/excelsion custom/userbanner/bannerleadadmint2.png') no-repeat;
    color: transparent;
    text-align: center;
    height: 24px;
    width: 124px;
    display: block;
}

Is there a way to stop that from happening?

 

[TickTackk]

Could it be that the image has some extra space left? Link?

 

[OnSceneReporter]

Could it be that the image has some extra space left? Link?

No, I designed the image. There are no extra pixels. When I don't use .userBanner, that space doesn't appear... but then of course, the banners don't end up on the same line either.

 

[TickTackk]

Could you apply the css again which is not working and give the link to your forum?
Read my post below.

 

[Mike]

It's because you have display block specified. You'll need to use the browser dev tools to analyze the CSS and determine what works in the various scenarios (post full size, post on a phone, member view/card, etc).

 

[TickTackk]

Add this to extra.css

.userBanners em{display: inline-block;}

Then it should look like this

 

[Riaz]

Im pretty bad with CSS, so would anyone help me create

this type of Banner?

Bumping this in case anyone would wanna help meh <3

 

[Daphonic]

Was curious on this if you could use a Graphic for the background?

.userBanner.test
{
background-color: #7050bf;
border-color: #000000;
color: #ffffff;
text-shadow: 1px 1px 1px #000066;
}

something like background="xenforo/graphics/banner1.png type thing?

 

[Paul B]

It's just CSS so yes, you should be able to use background or background-image.

 

[Cryppptic]

Hello, I have a little question. If I wanted to add a tiny symbol to the banner like a diamond for a donator so to say, how would one do that?

 

[eriche]

I was trying to follow this tutorial - but I don`t get the banner wraped around like shown in the screenshots.
Mine Looks like this

What are I am doing wrong?

thx Erich

 

[Paul B]

The banners wrap by default if using the standard classes.

You appear to have some customisations applied to the default classes, possibly from a custom style or modification.

 

[VinnyS]

Hi
Here is the code that we must put in to make the banner

.userBanner.my-style
{
color: white;
background-color: green;
}

Now instead of putting the white can we put #ffffff for white?

 

[VinnyS]

I was trying to follow this tutorial - but I don`t get the banner wraped around like shown in the screenshots.
Mine Looks like this
View attachment 99164
What are I am doing wrong?

thx Erich

lol try this did you type userbanner or userBanner?
Vinny