Creating custom user group banner CSS

[Amaury]

You can name it however you wish - that is the CSS class name.

Ah. So where did your "my-style" class name come from?

(Sorry if this is a stupid question.)

 

[Paul B]

I called it that.

You just give it any name you want and use the same CSS class name in EXTRA.css.

 

[Amaury]

I called it that.

You just give it any name you want and use the same CSS class name in EXTRA.css.

Okay, just to make sure I'm understanding you correctly, I can put whatever I want in there without doing anything else first? For example, amaury_is_awesome? In your example, I thought "my-style" was being called from somewhere, but I guess not, huh?

 

[Paul B]

Look at the main resource content again.

You will see the correlation between that field and what must be entered in EXTRA.css.

 

[Amaury]

Look at the main resource content again.

You will see the correlation between that field and what must be entered in EXTRA.css.

Sorry, Brogan. I still don't know all the ropes of XenForo.

I see that EXTRA.css and the custom CSS field both share .userBanner my-style, so it looks like the "my-style" in the custom CSS is being called from EXTRA.css? I'm probably still not understanding, though.

 

[Paul B]

You create the class in EXTRA.css.

You apply that class to the user group using the field.

 

[Amaury]

You create the class in EXTRA.css.

You apply that class to the user group using the field.

Thank you, Brogan!

 

[Amaury]

@Brogan

I got administrators. What do you think?

.userBanner.administrators {
    color: #FFFFFF;
    background: #FFB030;
    font-weight: bold;
    font-size: 12pt;
}

Again, thanks for the help!

 

[Pierre Boulanger]

Hi Brogan,

Its possible to remove "Member & staff member" and keep only the red Administrator?

 

[Paul B]

Uncheck it:

 

[Pierre Boulanger]

Uncheck it:
View attachment 67159

Where is this??

 

[Pierre Boulanger]

Where is this??

Found it!!

Thanks

 

[xIsabel38]

Hmm, hopefully someone can help here. I entered this as my extra.css

/* Custom Banners */
.userBanner.support
{
color: #FFF;
background-color: #330022;
border-color: #FFF;
}
/* End Custom Banners */

And it works fine, however the upper part of the banner... it's be better to just show you.


How would I fix this?

 

[DaiAku]

Hmm, hopefully someone can help here. I entered this as my extra.css

/* Custom Banners */
.userBanner.support
{
color: #FFF;
background-color: #330022;
border-color: #FFF;
}
/* End Custom Banners */

And it works fine, however the upper part of the banner... it's be better to just show you.
View attachment 68338

How would I fix this?

Just started playing with this and ironically I am at the same spot as @xlsabel38

Where is the class definition for .userBanner?
How can we set the color of the wrap around part of the scroll as shown in post above?

Thanks!

 

[Paul B]

Try .userBanner.wrapped span

 

[DaiAku]

Hi @Brogan !

Sorry I am pretty new at this.

Try .userBanner.wrapped span

what would the css look like? - this?:

/* Custom Banners */
.userBanner.wrapped.support
{
color: #FFF;
background-color: #330022;
border-color: #FFF;
span: #FFF;
}
/* End Custom Banners */

Thanks!

 

[DaiAku]

Ok, the answer is:

/* Custom Banners */
.userBanner.support
{
color: #FFF;
background-color: #330022;
border-color: #FFF;
}
/* End Custom Banners */
.userBanner.support span {background-color: #FFF;}

Thanks to Mike from @Audentio!

I am sure this is what Brogan was trying to say too but I was too new to understand his answer.

 

[xIsabel38]

Well then my thanks go to @Audentio too.

 

[DaiAku]

Well then my thanks go to @Audentio too.

These guys are great and just finished some awesome work for our site that we launch in about 1 week. I am going to a write-up in the next few days. If you are looking for some really good styling @Audentio is without question awesome!

 

[Lemminator]

i i have this problem it is not covering



what i do wrong ?

i the extra.css i wright this

.userBanner.admin
{
color: white;
background-color: green;
border-color: green;
}