XF 1.3 How do I make badges for ribbons?

[Devin Curry]

I want to know how i can make it show up like this under my name? I am very bad with CSS and i just cannot figure it out. can someone please help me?

What i want to look like: http://gyazo.com/9a02129676ee12dd2859b344257b2289

 

[Paul B]

http://xenforo.com/community/resources/creating-custom-user-group-banner-css.2000/

 

[Devin Curry]

I have seen that tutorial, and it does not allow me to do what i want to get accomplished.

 

[TsinJu]

If you want to change Banners CSS then the TuT works. you could also add your own Banner Template to add your changes their, but thats also more complicated...
At the end we cant know what you are doing since you dont tell....?!

 

[Devin Curry]

All i want, is to make a small badge banner, not one that wraps around, and to edit the Staff Member banner.

 

[Paul B]

If you don't want the wrapping effect, simply don't include the userBanner class in the custom CSS field and EXTRA.css.

From my own site:


Just adjust the margins and padding to suit.

 

[TsinJu]

for the surrounding effect get rid of all "span" classes like
.userBanner.bannerStaff.wrapped span
.userBanner.wrapped span.after etc

for the width change the margins in .messageUserBlock .userBanner
Rest is up to you.
To know what classes i have to work with i use Firebug with Firefox, but Chrome has it too.
Then search for the class inside Xenforo ACP and you will find what you are looking for.
For the Changes use EXTRA.css

Play around a bit, if you mess something you can revert the Templates back to default.
I also would suggest to create an own style or maybe a TestForum before changing anything on a live forum