XF 1.2 Custom CSS class name for banners

[Ranger375]

I don't really know CSS. Can anyone give me template of sorts that I can paste into my extra.css and swap the colors out accordingly for the usergroup banners?

 

[Ranger375]

I am just trying to change the banner color, instead of using the few colors provided. I have screen shots above of what it is looking like for me, since I am just using the standard choices at the moment. I could PC you the link if it it is still necessary though.

 

[SakYant]

I cannot seem to figure this out either. A how to guide for beginners would be nice

 

[Paul B]

I'm not sure what the problem is.

Enter this in the custom CSS field:


Enter this in EXTRA.css:


The result is this:


Just change the styling to suit.

 

[Ranger375]

I'm not sure what the problem is.

Enter this in the custom CSS field:
View attachment 49610

Enter this in EXTRA.css:
View attachment 49611

The result is this:
View attachment 49612

Just change the styling to suit.

Yeah I've done that and posted screen shots above. It doesn't appear as a banner ribbon on the posts; it appears pretty much how it looks in your example.

 

[Paul B]

Just edit the css to how you want it to appear.

 

[mauzao9]

One thing about this i'm trying to understand is Mike said we can have that banners to user titles (trophy based) and i was searching only the user groups do have such function. What am i missing?

 

[Ranger375]

That was my point for this thread. I have no idea how to make it look like the ribbons that are stock.

 

[Mike]

One thing about this i'm trying to understand is Mike said we can have that banners to user titles (trophy based) and i was searching only the user groups do have such function. What am i missing?

I don't think I ever said that...

That was my point for this thread. I have no idea how to make it look like the ribbons that are stock.

Apply the "userBanner" class and your custom class.

 

[Lisa]

Apply the "userBanner" class and your custom class.

Applying "userBanner" before (or even after) the custom class results in nothing showing up at all for me.

 

[Mike]

What have you entered as the class name(s) and what CSS are you applying?

 

[Lisa]

What have you entered as the class name(s) and what CSS are you applying?

I experimented after reading this thread and basically decided just to do a basic colour change. Used the class "adminribbon". I can make it work without using "userBanner", but it's not a standard process for people who just want a different colour from the options available. To actually come close to reproducing the default I had to add:-

.adminribbon  {
    color: white;
    background-color: red;
    border-color: rgb(129, 169, 225);
}
 
.adminribbon.wrapped {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    position: relative;
}

.messageUserBlock .adminribbon {
    display: block;
    margin-bottom: 5px;
    margin-left: -12px;
    margin-right: -12px;
}
.adminribbon.wrapped span {
    position: absolute;
    top: -4px;
    width: 5px;
    height: 4px;
}
.adminribbon.wrapped span.before {
    border-top-left-radius: 3px;
    left: -1px;
}
.adminribbon.wrapped span {
    background-color: rgb(129, 169, 225);
}
.adminribbon.wrapped span.after {
    border-top-right-radius: 3px;
    right: -1px;
}

Which, for me is not a big deal, but for a standard user is going to be a struggle when all they want is a colourchange

 

[Paul B]

This gives the overlap but not the wrapped bits and there appears to be an issue with the CSS.








Still looking into it.

 

[Shelley]

to get the wrapped to show i had to do the following.

.userBanner.my-style { color: red; background-color: yellow;}
.userBanner.my-style.wrapped span { background: #7f6300;}

 

[Paul B]

All of that shouldn't be required, it should work as the prefix custom classes do whereby you only need to add the prefix class along with your custom class, e.g. prefix my-prefix

I've mentioned it to Mike.

 

[Ranger375]

Thanks, that is exactly the issue ive been dealing with

 

[Lisa]

All of that shouldn't be required, it should work as the prefix custom classes do whereby you only need to add the prefix class along with your custom class, e.g. prefix my-prefix

I've mentioned it to Mike.

Yep, which, if memory serves, is how it works with Prefixes.

 

[Paul B]

Yes, I can't get it to work using userBanner my-style as the custom class and .userBanner.my-style in EXTRA.css.

 

[mauzao9]

I don't think I ever said that...

"You'll also note that you have the option to override standard user titles with banners.", if that isn't referring to Trophy User Titles, i'm confuse.

Edit: Oh, that replace trophy titles with group banners if there is one, my hopes got flushed away, i must create group promotions based in trophy points again.

 

[Paul B]

Mike's looking at the code now to see if he can make any changes.

Once that's done I'll create a resource guide for easy reference.

 

[Mike]

I've made a change for beta 2 so that you don't have to explicitly specify the wrapped "wings" color. It will simply inherit the background color. However, this isn't exactly how the default ones all appear though it's close.

Just to paste an example here:

.userBanner.bannerGray       { color: black; background-color: gray; border-color: #AAA; }
.userBanner.bannerGray.wrapped span { background-color: #AAA; }

Note that the background colors are different, so if you want exactly this behavior, you will need to specify both the banner and the wrapped span.

However, as of beta 2...

.userBanner.bannerGreen      { color: white; background-color: green; border-color: green; }
.userBanner.bannerGreen.wrapped span { background-color: green; }

The second line there is superfluous because the wings have the same background color as the banner itself.