Creating custom user group banner CSS

[Paul B]

The staff member banner can be disabled in Options -> User Options.

User titles are set in user groups (using display styling priority) or can be customised per user.

 

[Joykiller]

Is there away to set a max / min of stack able banners to show at any given time? I would assume an if greater than statement then hide?

 

[Paul B]

There are options for controlling which banners are shown, but no way of showing x of y banners.

 

[Martok]

Is there away to set a max / min of stack able banners to show at any given time? I would assume an if greater than statement then hide?

I've made a suggestion regarding this (well, something similar).

http://xenforo.com/community/thread...mixture-of-stackable-and-non-stackable.72534/

Please like the first post in that thread if you agree.

 

[Joykiller]

There are options for controlling which banners are shown, but no way of showing x of y banners.

So there is no way to say limit how many is displayed at any given time?

<xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <h3 class="userText">
            <xen:username user="$user" itemprop="name" rich="true" />
            <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if>
            {xen:helper userBanner, $user, 'wrapped'}
            <!-- slot: message_user_info_text -->
        </h3>
    </xen:hook>

{xen:helper userBanner, $user, 'wrapped'}

I don't need y of banners only x

In red, there is no way to say if, userBanner = greater than 3 hide the rest of the banners that are below those 3's display styling priority? The reason why, I want to only display max of 3 on the forums under the users name, and then allow all to be displayed in their profile.

If you turn off stacking so only 1 is displayed that only shows 1 in the forum profile too, which kinda sucks if you have VIP users who cannot see other ranks they have unlocked etc.

As I mentioned in your thread, Martok:

I do however think they also need to add a maximum amount of stackable banners that is a variable that can be customized by the users. 0 to unlimited or 3 to only display the top 3 style display priority while the rest below that top 3 is hidden only on the forums not on their profile. This would stop making forums look ugly to some.

Did a quick hack up if anyone wants to use it: http://xenforo.com/community/thread...sed-on-different-usergroup.71860/#post-782235

 

[Justin Long]

So I've been trying to use my own images as the custom banners and I cannot get it to work.

I've used this code in my EXTRA.css

.userBanner.admin { background-image: url("image path") no-repeat top; }

and I used "admin" in the custom css class name. I've tried multiple different things, but none seem to work. If anyone could provide assistance, I would be very appreciative.

 

[Justin Long]

Never mind, figured it out. I didn't realize I needed to have text typed in the User Banner Text box in the Edit User Group tab. I figured since I was using my own image that I wouldn't need the text.

Thanks anyway folks. Have a great day/night!

 

[Vultrise]

Hi there.

I made a banner but i was wondering how do i make it display in the Staff Online module? and my member card.

 

[Paul B]

That will require editing the templates and possibly custom CSS.
It's outside the scope of this guide as it only applies to the default display which is in the message user info block.

 

[Vultrise]

That will require editing the templates and possibly custom CSS.
It's outside the scope of this guide as it only applies to the default display which is in the message user info block.

Ok thanks for your help

 

[Cambion]

@Brogan
How would this work if I had 6-8 other user banners i wanted to make custom?
I copied your directions and i was able to do the first one perfectly...However, I am unsure of how to make subsequent custom banners.

 

[Paul B]

You just create a new class for each user group as required and add the CSS to EXTRA.css.

Here's an example from my own site.

.ctaBannerSupporter
{
    background-color: #000099;
    border-color: #000099;
    color: @contentBackground;
    text-shadow: 1px 1px 1px #000099;
}

.ctaBannerContributor
{
    background-color: #6600CC;
    border-color: #6600CC;
    color: @contentBackground;
    text-shadow: 1px 1px 1px #6600CC;
}

 

[Cambion]

Perfect, thanks!

You just create a new class for each user group as required and add the CSS to EXTRA.css.

Here's an example from my own site.

.ctaBannerSupporter
{
    background-color: #000099;
    border-color: #000099;
    color: @contentBackground;
    text-shadow: 1px 1px 1px #000099;
}

.ctaBannerContributor
{
    background-color: #6600CC;
    border-color: #6600CC;
    color: @contentBackground;
    text-shadow: 1px 1px 1px #6600CC;
}

 

[Bob_R]

Is there a way to manipulate the default Staff Member banner as opposed to unchecking it in your AdminCP and creating again via this method.

 

[Paul B]

Yes, you can use .userBanner.bannerStaff in EXTRA.css to style it.

 

[Shelley]

Is there a way to manipulate the default Staff Member banner as opposed to unchecking it in your AdminCP and creating again via this method.

You could use the following .userBanner.bannerStaff class in EXTRA.CSS and modify to your preference.

.userBanner.bannerStaff {
background-color: yellow;
border-color: lime;
color: #ff0000;
}

Edit: Ninja'd

 

[oO5 Dynasty]

i cant get it to wrap around the entire section. Like its not long enough

 

[oO5 Dynasty]

Works fine when I tried it on mine.Try checking your extra css for typos or missing "}" "{" ";" this could cause for it not to display and other elements.

View attachment 52336
View attachment 52337
View attachment 52335

i want a picture one like how you have it.

 

[DistortedDorian]

How can I change the user ribbon/banner heigh, it should be right under the username but it's lower than it should be and therefore it looks a bit weird.

 

[Paul B]

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.