• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Creating custom user group banner CSS

Creating custom user group banner CSS

In the default style the banners start directly under the user title.
Moving it up would obscure the title but use this code:
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:
Code:
.messageUserBlock .userBanner {
    margin-top: 0px !important;
}
Working perfectly now!
 

Attachments

herocus

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

Attachments

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

Code:
.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.
 
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?
 
Last edited:
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.
Code:
.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?
 

Mike

XenForo developer
Staff member
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).
 

Daphonic

Active member
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?
 
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
Usergroup_Banner_noWrap_around.jpg
What are I am doing wrong?

thx Erich
 

Brogan

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

Active member
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?