• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Silver User Ranks (CSS & small file size)


Well-known member

Silver user ranks made with CSS. The background gradient image is only 179 bytes which is good for fast browsing and saving bandwidth.


Follow the steps here. Next, upload the attached UserRankSilver.png to styles/default/xenforo/gradients.

Then simply replace the CSS you added in step 2 of the other thread with this:

                                display: block;
                                width: 108px;
                                margin: -2px 0 5px 6px;
				padding: 4px 0 2px 0;
				border: 1px solid #bbb;
				border-radius: 4px;
				background: #fff url('@imagePath/xenforo/gradients/UserRankSilver.png') repeat-x top;
                                text-align: center;
                                font: 9px arial,sans-serif;
				text-decoration: none;
                                text-transform: uppercase;
				color: #000;
				text-shadow: 1px 1px 0 #fff;
				outline: 0;
And you're done.



Well-known member
I like your CSS code, but i would prefere Shellys userbars sorry :)
No prob ;) CSS can never do what a full image can do, so you really can't compare. CSS however has benefits for anyone who does not care about images with all the bells and whistles. Tbh I think that using simple, light images is the new way of designing the web. How many complex looking buttons (or ranks) do you still see on the major websites?

Thanks for the feedback :)