XF 2.0 Extra.less Styling After Upgrade From 1.x

beanfan78

Active member
I am stumped and I have been searching for over a day for anything that would help me understand what the difference between what I had working perfectly in 1.5 to what extra.less is in 2.0. I upgraded from 1.5 to 2.0 2 days ago and I have a large list of custom css that isn't working for user banners and thread prefix colors. An example from my extra.css is here:

CSS:
.userBanner.bannerAdmin     { color: white; background-color: #D90000; border-color: #B80000; }
.userBanner.bannerAdmin.wrapped span { background-color: #D90000; }

.prefix.salmon {
    color: white;
    background-color: #FF9999;
    border-color: @primaryDarker;
}
a.prefixLink:hover .prefix.salmon {
    color: white;
    background-color: #FF8888;
    border-color: @primaryLightish;
}

That has worked since 2014. I transferred it over and I have tried changing it many different ways depending on the threads I have read while searching, but I can't get it. I took a couple years off from doing web work so it's probably something simple. I can't find much info out there though on how to write less code or format the extra.less. Here is the screenshot of how I have the custom color called in the ACP.

prefix-color.PNG

If you can tell me what I am doing wrong, or link me to some resources so I can study up I would be so grateful. I am diving into 2.0 as much as I can. I just want to use the 30+ colors I coded and learn all the new things that I can.
 

CMTV

Well-known member
First of all, there is no .bannerAdmin. You should use .userBanner--staff instead:
Less:
.userBanner.userBanner--staff     { color: white; background-color: #D90000; border-color: #B80000; }

If you want a red banner for admins only, you will need to explicitly set an "Admin" banner for "Administrator" user group.

Next, I don't know what .userBanner.bannerAdmin.wrapped is supposed to do.

This part:
Less:
.prefix.salmon {
    color: white;
    background-color: #FF9999;
    border-color: @primaryDarker;
}
should work well in case you have defined @primaryDarker color variable somewhere above.

In general, press F12 in your browser (or right click on element -> "See/Examine the code" and see how banners and prefixed are structured in HTML markup. Use it when writing styling code.
 
Last edited:

beanfan78

Active member
Thanks for the help. Is there a resource that shows the new classes in 2.0 that I am working with? I am using Chrome's inspect tool but I am not seeing it I guess. I changed the code to what you gave me. I didn't see changes in the userBanner, but the salmon color kinda works. Here is what is in the extra.less right now.

CSS:
.userBanner.userBanner--admin     { color: purple; background-color: #D90000; border-color: #B80000; }

.prefix.salmon {
    color: white;
    background-color: #FF9999;
    border-color: blue;
}

Here is the result of salmon:
chat.PNG
 

CMTV

Well-known member
.userBanner--admin
There is no .userBanner--admin class. Only .userBanner--staff.

If you want a red banner for admins only, you will need to explicitly set an "admin" banner for "Administrator" user group.

After that, you can write something like:
Less:
.userBanner.admin { color: purple; background-color: #D90000; border-color: #B80000; }

Is there a resource that shows the new classes in 2.0 that I am working with?
Not sure such a resource exists. Basically, if there is no class you need - you are to add it in ACP (if it can be added).
 

beanfan78

Active member
For the user banners, I go into each user group and give the User Banner Styling custom code, in the admin part I put userBanner userBanner admin . Is that correct formatting? I used the wrapped span a long time ago so the banner would span across the user box and not be a small box.
 

beanfan78

Active member
I changed the extra.less for the admin banner to what you gave me and it worked. So do I even need
Code:
.userBanner--staff
? Or can I just call out the banners for each group? Sorry if I am being dense, I am trying to wrap my head around this so I can rewrite everything today.
 

beanfan78

Active member
Just to confirm, this is correct for the way I would do it for banners...right?

CSS:
.userBanner.admin { color: purple; background-color: #D90000; border-color: #B80000; }
user-banner.PNG

And the result...
admin-banner.PNG
 

beanfan78

Active member
@CMTV thank you for your help. I have the user banners working now and I think I almost comprehend the thread prefixes. I am going to play with this. I really appreciate all the feedback you gave me and hopefully, it's enough to get some of brain cells firing again so I can fix this.
 

beanfan78

Active member
I have the thread prefixes and the user banners done. I was in the groove and wanted to add some hover states to the thread prefixes. The code works great, this is what I have to do the non-hover state:
CSS:
.prefix.salmon {color: #FFFFFF; background: #FF9999; border-color: #FF8888; box-sizing: border-box; padding: 1px .35em; border: 1px solid transparent; border-radius: 4px; font-size: 80%; line-height: 1.26; text-decoration: none;}

So I inspected how xF2 handles the css for hover and tweaked my line going underneath the first to:
CSS:
a.prefix:hover .prefix.salmon {color: FFFFFF; background: #FF8888; border-color: #FF9999; box-sizing: border-box; padding: 1px .35em; border: 1px solid transparent; border-radius: 4px; font-size: 80%; line-height: 1.26; text-decoration: none;}

I can't seem to get it to create a hover effect though. Is this code correct? I am so close!
 

Brogan

XenForo moderator
Staff member
A bit late to the party (I've only just upgraded to XF2 ...) but the simplest way by far to create custom user banner and thread prefix styling is to edit the app_user_banners.less and core_labels.less files directly.

Here I have added 4 new entries to app_user_banners.less corresponding to the various user upgrades I have:
Rich (BB code):
    &.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); }
    &.userBanner--supporter { .m-userBannerVariation(white, #008800); }
    &.userBanner--contributor { .m-userBannerVariation(white, #6600CC); }
    &.userBanner--valuedMember { .m-userBannerVariation(white, #CC0000); }
    &.userBanner--premiumContributor { .m-userBannerVariation(black, #ff9900); }
}


Then add the custom class to the user group like so:
1566155432080.png

That way everything inherits correctly and it actually results in fewer lines of additional code.
 
Top