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

[beanfan78]

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:

.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.



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]

What exactly is working wrong with the code above?

 

[beanfan78]

The code above doesn't change anything using the default theme.

 

[CMTV]

First of all, there is no .bannerAdmin. You should use .userBanner--staff instead:

.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:

.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.

 

[beanfan78]

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.

.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:

 

[CMTV]

.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:

.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]

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]

I changed the extra.less for the admin banner to what you gave me and it worked. So do I even need

.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]

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

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

And the result...

 

[beanfan78]

@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]

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:

.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:

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!

 

[Paul B]

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:

    &.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:


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