php - vBulletin CSS & HTML

Question

I've been trying to set up my user-rank images into CSS sprites.. and I've worked out so far this code: in additional.css:

#ranks li {
    background: url(/rank-sprite.png) no-repeat top left;
}
.sprite-admin{ background-position: 0 0; width: 157px; height: 44px; } 
.sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; } 
.sprite-bugabuser{ background-position: -414px 0; width: 157px; height: 44px; } 
.sprite-coder{ background-position: -621px 0; width: 157px; height: 44px; } 
.sprite-donator{ background-position: -828px 0; width: 157px; height: 44px; } 
.sprite-exdonator{ background-position: -1035px 0; width: 157px; height: 44px; } 
.sprite-hondonator{ background-position: -1242px 0; width: 157px; height: 44px; } 
.sprite-legdonator{ background-position: -1449px 0; width: 157px; height: 44px; } 
.sprite-member{ background-position: -1656px 0; width: 157px; height: 44px; } 
.sprite-middleman{ background-position: -1863px 0; width: 157px; height: 44px; } 
.sprite-moderator{ background-position: 0 -94px; width: 157px; height: 44px; } 
.sprite-mudkip{ background-position: -207px -94px; width: 150px; height: 50px; } 
.sprite-newcomer{ background-position: -407px -94px; width: 157px; height: 44px; } 
.sprite-pikachu{ background-position: -614px -94px; width: 150px; height: 50px; } 
.sprite-recoverer{ background-position: -814px -94px; width: 157px; height: 44px; } 
.sprite-robot{ background-position: -1021px -94px; width: 150px; height: 50px; } 
.sprite-snorlax{ background-position: -1221px -94px; width: 150px; height: 50px; } 
.sprite-superdonator{ background-position: -1421px -94px; width: 157px; height: 44px; } 
.sprite-unicorn{ background-position: -1628px -94px; width: 300px; height: 100px; }

for the actual rank:

But it doesn't work.. it always displays the .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; } one.. which also is the top left one.

Have I done something wrong? Or does it sound like something to do with vBulletin?

Thanks

Answer 1

Write like this:

#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }

Because the power of #ranks li is greater then single Classes like (.sprite-admin etc). So, we have to increase the power of sprite Classes to override the properties.

OR

You can do other thing. Write like this:

li {
    background: url(https://data.bugabuse.net/images/sprites/rank-sprite.png) no-repeat top left;
}

instead of this :

#ranks li {
    background: url(https://data.bugabuse.net/images/sprites/rank-sprite.png) no-repeat top left;
}

Answer 2

不设置背景位置排名

#ranks li {
        background: url(https://data.bugabuse.net/images/sprites/rank-sprite.png) no-repeat;
    }