XF 2.1 Trying to change size of usergroup banners

[djbaxter]

These are using standard definitions but I'm trying to override width of the banner and center them.

I tried adding this to extra.less for the style but it doesn't work:

/* reduce width and center usergroup banners */
.userBanner .userBanner .message-userBanner {
    width: 50% !important;
    margin: 0 auto !important;
}

Any suggestions?

 

[Russ]

No spaces if the classes fall on the same element.

/* reduce width and center usergroup banners */
.userBanner.userBanner.message-userBanner {
    width: 50% !important;
    margin: 0 auto !important;
}

 

[djbaxter]

Removed the spaces but it still doesn't work.

FYI, this site is protected against DDoS by Cloudflare. I don't know if they cache pages or not or for how long if they do.

It's not a browser cache issue - I've cleared that and also double-checked in Edge and Chrome (my default is Firefox).

 

[Russ]

Removed the spaces but it still doesn't work.

FYI, this site is protected against DDoS by Cloudflare. I don't know if they cache pages or not or for how long if they do.

It's not a browser cache issue - I've cleared that and also double-checked in Edge and Chrome (my default is Firefox).

Make sure your banner actually has 2 .userBanner classes in it. I checked one of your sites and the html is:

userBanner userBanner userBanner--orange message-userBanner

While default banners are usually something like:

userBanner userBanner--orange message-userBanner

So maybe:

/* reduce width and center usergroup banners */
.userBanner.message-userBanner {
    width: 50% !important;
    margin: 0 auto !important;
}

would work

 

[djbaxter]

I tried removing the second .userbanner but it didn't help.

Inspector shows <div class="userBanner userBanner userBanner--green message-userBanner" itemprop="jobTitle"> for one of the banners.

 

[Russ]

Then it should work, I checked on your one of your sites and my CSS in inspector works fine. If you want to shoot me a PM with the link I can take a closer look.

 

[djbaxter]

There's also the userBanner--orange you saw.

Here are the two settings:

 

[djbaxter]

PM sent

 

[djbaxter]

For anyone with the same issue, the solution suggested by @Russ works perfectly.

What wasn't working was my brain. That site has two styles. I was editing extra.less in one style and viewing the forum in the other style so of course the changes I was making were not visible