1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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)

Discussion in 'Graphics [Archive]' started by dutchbb, Nov 13, 2010.

  1. dutchbb

    dutchbb Well-Known Member

    SilverRankExample.jpg

    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:

    Code:
    .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.
     

    Attached Files:

  2. Peggy

    Peggy Well-Known Member

    Nice job dutch. :)
     
  3. ArnyVee

    ArnyVee Well-Known Member

    Good job Dutch! :)

    It's great to have the CSS-based images instead of actual images to speed things up a bit :D
     
  4. Michael Dance

    Michael Dance Active Member

    I like your CSS code, but i would prefere Shellys userbars sorry :)
     
  5. dutchbb

    dutchbb Well-Known Member

    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 likes this.
  6. ArnyVee

    ArnyVee Well-Known Member

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

    manik Member

    Very nice touch, Thanks friend.
     

Share This Page