[RDF] User Banner Grouping (XenForo2 Addon) - Lifetime Subscription

RDF Official Resource [RDF] User Banner Grouping (XenForo2 Addon) - Lifetime Subscription (1 Viewer) 1.0.0

Thriller Bark

Learning to Drive
General User
Joined
Jun 29, 2019
Messages
13
Reaction score
4
Awards
0
Holy crap I think cloudflare is down - our chat server behind cloudflare just went down, rofl...
-- Double Post Merged: --
Maybe we broke cloudflare trying to fix this issue :lol:.
Yea this is a separate issue lmao
-- Double Post Merged: --
Holy crap I think cloudflare is down - our chat server behind cloudflare just went down, rofl...
-- Double Post Merged: --
Maybe we broke cloudflare trying to fix this issue :lol:.
Try again now, i reverted it back to using our own hosted images as well as applying the CSS class to the usergroup grouping

 
Last edited:

xydrine

Vengeance. Justice. Fire and Blood.
Administrator
/Dev/Ops/
Advanced User
Lifetime Premium Member
Joined
Oct 28, 2010
Messages
26,503
Reaction score
24,572
Awards
0
Location
/dev/null
Try again now, i reverted it back to using our own hosted images as well as applying the CSS class to the usergroup grouping

https://thrillerbark.com/members/less-larsi.12/
OHH okay I think I see what the issue is. It's something to do with where "reborn" is inside of the CSS style sheet.

Inside the user banner group, where you have "reborn" written, can you try changing it to "userBanner reborn" instead?

This may not work (I can't test it without modifying the stylesheet), but if it does then that will obviously fix the issue. If not, I will take a look at the css stylesheet and figure out where to re-position (or add a new element) the reborn element.
 

Thriller Bark

Learning to Drive
General User
Joined
Jun 29, 2019
Messages
13
Reaction score
4
Awards
0
OHH okay I think I see what the issue is. It's something to do with where "reborn" is inside of the CSS style sheet.

Inside the user banner group, where you have "reborn" written, can you try changing it to "userBanner reborn" instead?

This may not work (I can't test it without modifying the stylesheet), but if it does then that will obviously fix the issue. If not, I will take a look at the css stylesheet and figure out where to re-position (or add a new element) the reborn element.
It did something
Screenshot_20190702-161551_Chrome.jpg
 

xydrine

Vengeance. Justice. Fire and Blood.
Administrator
/Dev/Ops/
Advanced User
Lifetime Premium Member
Joined
Oct 28, 2010
Messages
26,503
Reaction score
24,572
Awards
0
Location
/dev/null
Awesome, okay. Are you by any chance intending to use all of your user banners with the User Banner Grouping addon (assuming we get them working - which we will)?

That, and can you post your entire app_user_banners.less file?

Thanks a bunch!
 

Thriller Bark

Learning to Drive
General User
Joined
Jun 29, 2019
Messages
13
Reaction score
4
Awards
0
Awesome, okay. Are you by any chance intending to use all of your user banners with the User Banner Grouping addon (assuming we get them working - which we will)?

That, and can you post your entire app_user_banners.less file?

Thanks a bunch!
Were i tending to use rank ladder and admin, mod, super mod in the user banner grouping.

@stogeun can you post it? Im on my phone
 

stogeun

Learning to Drive
General User
Joined
Jul 1, 2019
Messages
8
Reaction score
4
Awards
0
Awesome, okay. Are you by any chance intending to use all of your user banners with the User Banner Grouping addon (assuming we get them working - which we will)?

That, and can you post your entire app_user_banners.less file?

Thanks a bunch!
Yes, we intend to use the banners like a title ladder.

The code for our app_user_banner.less is like this:
Code:
.m-userBannerVariation(@color; @bg; @border: false)
{
    color: @color;
    background: @bg;
    border-color: xf-intensify(@bg, 10%);

    & when (iscolor(@border))
    {
        border-color: @border;
    }
}

.userBanner
{
    font-size: 75%;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    padding: 1px @xf-paddingMedium;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;
    display: inline-block;

    strong
    {
        font-weight: inherit;
    }

    // variations
    &.userBanner--hidden
    {
        background: none;
        border: none;
        box-shadow: none;
    }

    &.userBanner--staff,
    &.userBanner--primary
    {
        .m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
    }

    &.userBanner--accent
    {
        .m-userBannerVariation(@xf-textColorAccentContent, @xf-contentAccentBg, @xf-borderColorAccentContent);
    }

    &.userBanner--red { .m-userBannerVariation(white, #d80000); }
    &.userBanner--green { .m-userBannerVariation(white, green); }
    &.userBanner--olive { .m-userBannerVariation(white, olive); }
    &.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
    &.userBanner--blue { .m-userBannerVariation(white, #0008e3); }
    &.userBanner--royalBlue { .m-userBannerVariation(white, royalblue); }
    &.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0); }
    &.userBanner--gray { .m-userBannerVariation(white, gray); }
    &.userBanner--silver { .m-userBannerVariation(black, silver); }
    &.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
    &.userBanner--orange { .m-userBannerVariation(black, #ffcb00); }
}

/* -------------- Staff -------------- */

.admin
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/admin.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.supermod
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/supermod.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.moderator
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/moderator.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
   
}


/* -------------- Mafia & Game Master -------------- */

.mafiacoach
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/mafiacoach.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
   
}

.gamemaster
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/gamemaster.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}


/* -------------- Animated Shop -------------- */

.invisible
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/invisible.gif") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.ghost
{
    background: url("url") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.bats
{
    background: url("url") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

/* -------------- Special Shop -------------- */


/* -------------- Ranks Ladder -------------- */

.reborn
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/reborn.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.vampire
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/vampire.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.zombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/zombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.shadowless
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/shadowless.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.surprisezombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/surprisezombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.servant
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/servant.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.generalzombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/generalzombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.bride
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/bride.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.familiar
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/familiar.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.spidergeneral
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/spidergeneral.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.madscientist
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/madscientist.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.skeleton
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/skeleton.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.legendaryzombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/legendaryzombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.nightmare
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/nightmare.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}
 

xydrine

Vengeance. Justice. Fire and Blood.
Administrator
/Dev/Ops/
Advanced User
Lifetime Premium Member
Joined
Oct 28, 2010
Messages
26,503
Reaction score
24,572
Awards
0
Location
/dev/null
Perfect, thanks guys.

And okay sounds great. Can you change that "userBanner reborn" entry back to "reborn" inside that User Banner group, and then...

Add this to your app_user_banner.less file (at the bottom is fine) just to test:

.userBanner.reborn
{
background: url("https://thrillerbark.com/styles/default/xenforo/ranks/reborn.png") no-repeat;
width: 150px;
height: 62px;
color: transparent;
}

.userBanner.vampire
{
background: url("https://thrillerbark.com/styles/default/xenforo/ranks/vampire.png") no-repeat;
width: 150px;
height: 62px;
color: transparent;
}

The above addition should make that one banner show up for us - if that's the case I can help show you what needs to be changed/added for the rest of them depending how you want it setup.
-- Double Post Merged: --
Sweet that seemed to have worked. It also added a border around it though.

Would you like me to fix up your entire .less stylesheet to work exclusively with the user banner grouping addon (I can fix the border issue as well)...?
 
Last edited:

stogeun

Learning to Drive
General User
Joined
Jul 1, 2019
Messages
8
Reaction score
4
Awards
0
Perfect, thanks guys.

And okay sounds great. Can you change that "userBanner reborn" entry back to "reborn" inside that User Banner group, and then...

Add this to your app_user_banner.less file (at the bottom is fine) just to test:

.userBanner.reborn
{
background: url("https://thrillerbark.com/styles/default/xenforo/ranks/reborn.png") no-repeat;
width: 150px;
height: 62px;
color: transparent;
}

.userBanner.vampire
{
background: url("https://thrillerbark.com/styles/default/xenforo/ranks/vampire.png") no-repeat;
width: 150px;
height: 62px;
color: transparent;
}

The above addition should make that one banner show up for us - if that's the case I can help show you what needs to be changed/added for the rest of them depending how you want it setup.
Nope, it's not showing up if I go to reborn

124463


I tried using the userBanner reborn and it showed like that as well, so I went to try it on the vampire instead and it went like this when I inserted userBanner.vampire


124464

124465
 

xydrine

Vengeance. Justice. Fire and Blood.
Administrator
/Dev/Ops/
Advanced User
Lifetime Premium Member
Joined
Oct 28, 2010
Messages
26,503
Reaction score
24,572
Awards
0
Location
/dev/null
Nope, it's not showing up if I go to reborn

View attachment 124463

I tried using the userBanner reborn and it showed like that as well, so I went to try it on the vampire instead and it went like this when I inserted userBanner.vampire


View attachment 124464
View attachment 124465
You are right, my bad, not sure what I was thinking in that regard.

Would you like me to tweak your entire style sheet to make it work properly?

Posted from my SM-N960U using the RDF Mobile App!
 

Thriller Bark

Learning to Drive
General User
Joined
Jun 29, 2019
Messages
13
Reaction score
4
Awards
0
You are right, my bad, not sure what I was thinking in that regard.

Would you like me to tweak your entire style sheet to make it work properly?

Posted from my SM-N960U using the RDF Mobile App!
Do you mean if we should export the style to an XML file or give you ACP access?
 

stogeun

Learning to Drive
General User
Joined
Jul 1, 2019
Messages
8
Reaction score
4
Awards
0
You are right, my bad, not sure what I was thinking in that regard.

Would you like me to tweak your entire style sheet to make it work properly?

Posted from my SM-N960U using the RDF Mobile App!
you mean the app_user_banner.less?
 

xydrine

Vengeance. Justice. Fire and Blood.
Administrator
/Dev/Ops/
Advanced User
Lifetime Premium Member
Joined
Oct 28, 2010
Messages
26,503
Reaction score
24,572
Awards
0
Location
/dev/null
you mean the app_user_banner.less?
Yep - and negative Thriller - I can just give you a modified version of the app_user_banner.less file which will make it so the user banners work properly with the user banner grouping addon and I'll also show you what I modified so you can see how they are used in here.

Here let me do that real quick, give me a few moments please.
-- Double Post Merged: --
Okay, here's the new app_user_banner.less:

CSS:
.m-userBannerVariation(@color; @bg; @border: false)
{
    color: @color;
    background: @bg;
    border-color: xf-intensify(@bg, 10%);

    & when (iscolor(@border))
    {
        border-color: @border;
    }
}

.userBanner
{
    font-size: 75%;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    padding: 1px @xf-paddingMedium;
    border: 0px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;
    display: inline-block;
    //box-sizing: border-box;

    strong
    {
        font-weight: inherit;
    }

    // variations
    &.userBanner--hidden
    {
        background: none;
        border: none;
        box-shadow: none;
    }

    &.userBanner--staff,
    &.userBanner--primary
    {
        .m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
    }

    &.userBanner--accent
    {
        .m-userBannerVariation(@xf-textColorAccentContent, @xf-contentAccentBg, @xf-borderColorAccentContent);
    }

    &.userBanner--red { .m-userBannerVariation(white, #d80000); }
    &.userBanner--green { .m-userBannerVariation(white, green); }
    &.userBanner--olive { .m-userBannerVariation(white, olive); }
    &.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
    &.userBanner--blue { .m-userBannerVariation(white, #0008e3); }
    &.userBanner--royalBlue { .m-userBannerVariation(white, royalblue); }
    &.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0); }
    &.userBanner--gray { .m-userBannerVariation(white, gray); }
    &.userBanner--silver { .m-userBannerVariation(black, silver); }
    &.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
    &.userBanner--orange { .m-userBannerVariation(black, #ffcb00); }
}

/* -------------- Staff -------------- */

.userBanner.admin
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/admin.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.supermod
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/supermod.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.moderator
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/moderator.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
    
}


/* -------------- Mafia & Game Master -------------- */

.userBanner.mafiacoach
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/mafiacoach.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
    
}

.userBanner.gamemaster
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/gamemaster.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}


/* -------------- Animated Shop -------------- */

.userBanner.invisible
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/invisible.gif") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.ghost
{
    background: url("url") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.bats
{
    background: url("url") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

/* -------------- Special Shop -------------- */


/* -------------- Ranks Ladder -------------- */

.userBanner.reborn
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/reborn.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.vampire
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/vampire.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.zombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/zombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.shadowless
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/shadowless.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.surprisezombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/surprisezombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.servant
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/servant.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.generalzombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/generalzombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.bride
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/bride.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.familiar
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/familiar.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.spidergeneral
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/spidergeneral.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.madscientist
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/madscientist.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.skeleton
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/skeleton.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.legendaryzombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/legendaryzombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.nightmare
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/nightmare.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

/* -------------- User Text Box Block -------------- */
I basically changed all the css elements from, for example, ".nightmare" to ".userBanner.nightmare" and also made a couple changes to the .userBanner element:

border: 0px solid transparent;
display: inline-block;
//box-sizing: border-box;

I have the box-sizing commented out here - it shouldn't be needed to enforce the non-stacking of user banners, but it *may* be - I can't test without the new .less file being updated.

So, to use the new css elements, inside XenForo's NATIVE usergroup userbanner styling, you would change, for example, "nightmare" to "userBanner.nightmare" if you wanted to use the NATIVE XenForo userbanner system. If not (which is what you are saying you want to do - to use our banner system exclusively), you can just set the css for those user banners to the FIRST banner choice (which has no styling on it).

Once you get rid of the XenForo native userbanner styling, you can go into the RDF userbanner grouping userbanner individual banners, and for the custom css element, you would insert "userBanner nightmare" for example...:

Imhghage8.png


That should make the banners work properly with the user banner group addon/etc.

Let me know if all that makes sense/if you need help.

Thanks guys!
 
Last edited:

stogeun

Learning to Drive
General User
Joined
Jul 1, 2019
Messages
8
Reaction score
4
Awards
0
Yep - and negative Thriller - I can just give you a modified version of the app_user_banner.less file which will make it so the user banners work properly with the user banner grouping addon and I'll also show you what I modified so you can see how they are used in here.

Here let me do that real quick, give me a few moments please.
-- Double Post Merged: --
Okay, here's the new app_user_banner.less:

CSS:
.m-userBannerVariation(@color; @bg; @border: false)
{
    color: @color;
    background: @bg;
    border-color: xf-intensify(@bg, 10%);

    & when (iscolor(@border))
    {
        border-color: @border;
    }
}

.userBanner
{
    font-size: 75%;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    padding: 1px @xf-paddingMedium;
    border: 0px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;
    display: inline-block;
    //box-sizing: border-box;

    strong
    {
        font-weight: inherit;
    }

    // variations
    &.userBanner--hidden
    {
        background: none;
        border: none;
        box-shadow: none;
    }

    &.userBanner--staff,
    &.userBanner--primary
    {
        .m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
    }

    &.userBanner--accent
    {
        .m-userBannerVariation(@xf-textColorAccentContent, @xf-contentAccentBg, @xf-borderColorAccentContent);
    }

    &.userBanner--red { .m-userBannerVariation(white, #d80000); }
    &.userBanner--green { .m-userBannerVariation(white, green); }
    &.userBanner--olive { .m-userBannerVariation(white, olive); }
    &.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
    &.userBanner--blue { .m-userBannerVariation(white, #0008e3); }
    &.userBanner--royalBlue { .m-userBannerVariation(white, royalblue); }
    &.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0); }
    &.userBanner--gray { .m-userBannerVariation(white, gray); }
    &.userBanner--silver { .m-userBannerVariation(black, silver); }
    &.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
    &.userBanner--orange { .m-userBannerVariation(black, #ffcb00); }
}

/* -------------- Staff -------------- */

.userBanner.admin
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/admin.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.supermod
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/supermod.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.moderator
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/moderator.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
   
}


/* -------------- Mafia & Game Master -------------- */

.userBanner.mafiacoach
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/mafiacoach.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
   
}

.userBanner.gamemaster
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/gamemaster.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}


/* -------------- Animated Shop -------------- */

.userBanner.invisible
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/invisible.gif") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.ghost
{
    background: url("url") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.bats
{
    background: url("url") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

/* -------------- Special Shop -------------- */


/* -------------- Ranks Ladder -------------- */

.userBanner.reborn
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/reborn.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.vampire
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/vampire.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.zombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/zombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.shadowless
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/shadowless.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.surprisezombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/surprisezombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.servant
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/servant.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.generalzombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/generalzombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.bride
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/bride.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.familiar
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/familiar.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.spidergeneral
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/spidergeneral.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.madscientist
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/madscientist.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.skeleton
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/skeleton.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.legendaryzombie
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/legendaryzombie.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

.userBanner.nightmare
{
    background: url("https://thrillerbark.com/styles/default/xenforo/ranks/nightmare.png") no-repeat;
    width: 150px;
    height: 62px;
    color: transparent;
}

/* -------------- User Text Box Block -------------- */
I basically changed all the css elements from, for example, ".nightmare" to ".userBanner.nightmare" and also made a couple changes to the .userBanner element:

border: 0px solid transparent;
display: inline-block;
//box-sizing: border-box;

I have the box-sizing commented out here - it shouldn't be needed to enforce the non-stacking of user banners, but it *may* be - I can't test without the new .less file being updated.

So, to use the new css elements, inside XenForo's NATIVE usergroup userbanner styling, you would change, for example, "nightmare" to "userBanner.nightmare" if you wanted to use the NATIVE XenForo userbanner system. If not (which is what you are saying you want to do - to use our banner system exclusively), you can just set the css for those user banners to the FIRST banner choice (which has no styling on it).

Once you get rid of the XenForo native userbanner styling, you can go into the RDF userbanner grouping userbanner individual banners, and for the custom css element, you would insert "userBanner nightmare" for example...:

View attachment 124472

That should make the banners work properly with the user banner group addon/etc.

Let me know if all that makes sense/if you need help.

Thanks guys!
oh thank you so much!!! Everything worked nicely ~

But on mobile everything shows like this:
124513


if it's not asking much an you help me out with organizing the banners to be side by side instead? Also one more, my custom title went below there "#1". Do you know of a way to make it always show below the username?
 

xydrine

Vengeance. Justice. Fire and Blood.
Administrator
/Dev/Ops/
Advanced User
Lifetime Premium Member
Joined
Oct 28, 2010
Messages
26,503
Reaction score
24,572
Awards
0
Location
/dev/null
oh thank you so much!!! Everything worked nicely ~

But on mobile everything shows like this:
View attachment 124513

if it's not asking much an you help me out with organizing the banners to be side by side instead? Also one more, my custom title went below there "#1". Do you know of a way to make it always show below the username?
Absolutely no problem at all!

Let me get back to you in about 30 minutes, heading back home right now.
-- Double Post Merged: --
if it's not asking much an you help me out with organizing the banners to be side by side instead? Also one more, my custom title went below there "#1". Do you know of a way to make it always show below the username?
Okay, so inside app_user_banner.less I'm not sure if you reverted some of the changes I mentioned above, under .userBanner { you should have something that says

display: block;

Change that over to

display: inline-block;

And see if that does the proper side-by-side alignment - let me know regarding that please.

If that does it correctly, the only thing left is you want the #1 to be above the user banners (directly below the username), correct?
 
Last edited:

stogeun

Learning to Drive
General User
Joined
Jul 1, 2019
Messages
8
Reaction score
4
Awards
0
Absolutely no problem at all!

Let me get back to you in about 30 minutes, heading back home right now.
-- Double Post Merged: --


Okay, so inside app_user_banner.less I'm not sure if you reverted some of the changes I mentioned above, under .userBanner { you should have something that says

display: block;

Change that over to

display: inline-block;

And see if that does the proper side-by-side alignment - let me know regarding that please.

If that does it correctly, the only thing left is you want the #1 to be above the user banners (directly below the username), correct?
sorry for being late, just got onto the PC.

I didn't change anything from the changes you made. The display still shows as inline-block, but it's still like the print I showed you.

And yes, I wanted the #1 or any custom title I use to be below the username and above the banner ^^
 

xydrine

Vengeance. Justice. Fire and Blood.
Administrator
/Dev/Ops/
Advanced User
Lifetime Premium Member
Joined
Oct 28, 2010
Messages
26,503
Reaction score
24,572
Awards
0
Location
/dev/null
sorry for being late, just got onto the PC.

I didn't change anything from the changes you made. The display still shows as inline-block, but it's still like the print I showed you.

And yes, I wanted the #1 or any custom title I use to be below the username and above the banner ^^
Imsdsdage17.png


I'm looking at the code on your site and it's still showing that element has display: block; set, almost like it's caching, hrm... I am wondering if there's a cloudflare caching issue going on right now - another user here which uses cloudflare is having a similar problem with cloudflare's cache not purging properly on the edge, it would appear to me...
 

stogeun

Learning to Drive
General User
Joined
Jul 1, 2019
Messages
8
Reaction score
4
Awards
0
View attachment 124535

I'm looking at the code on your site and it's still showing that element has display: block; set, almost like it's caching, hrm... I am wondering if there's a cloudflare caching issue going on right now - another user here which uses cloudflare is having a similar problem with cloudflare's cache not purging properly on the edge, it would appear to me...
oh thank you so much!! Really!!

I had to change this on message.less, there it was as block and not inline-block. As for the title, is it there as well where I change it?
 

xydrine

Vengeance. Justice. Fire and Blood.
Administrator
/Dev/Ops/
Advanced User
Lifetime Premium Member
Joined
Oct 28, 2010
Messages
26,503
Reaction score
24,572
Awards
0
Location
/dev/null
oh thank you so much!! Really!!

I had to change this on message.less, there it was as block and not inline-block. As for the title, is it there as well where I change it?
I've actually never seen this done through anything other than in app_user_banners.less - this should be the proper place that modifications to the userbanner CSS is done, for both normal XenForo userbanners and our addon's. If you change it in there it should work and fix the issue.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 0)

Unregistered User Ad


ATTENTION: Want ads to disappear? Register for an account here - it's free and NO ADS ARE DISPLAYED TO REGISTERED MEMBERS! Thanks!

Donation drives

RDF Server & License Fees (JULY 2019) (ACTIVE)

This donation drive covers the server and licensing fees for RDF for the month of July 2019...
Goal
$643.00
Earned
$229.00
This donation drive ends in

Latest threads

Latest posts

Social Group Activity

Forum statistics

Threads
84,033
Messages
1,257,785
Members
19,491
Latest member
dereileak
Top