Silver User Ranks (CSS & small file size)

[dutchbb]

​

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

Install:

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:

.userrank
{
                                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.

 

[Peggy]

Nice job dutch.

 

[ArnyVee]

Good job Dutch!

It's great to have the CSS-based images instead of actual images to speed things up a bit

 

[Michael Dance]

I like your CSS code, but i would prefere Shellys userbars sorry

 

[dutchbb]

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

 

[ArnyVee]

I agree that the CSS approach is definitely the way to go.

 

[manik]

Very nice touch, Thanks friend.