Ranks CSS Sprite Implementation
Posted October 21st 2011, 11:57am
@ all forum versions; all Browsers
Features: Decreases page loadtime exponentially because of fewer http requests for images; solves age-old multiple ranks requirement from Forumotion users; can be adobted for homepage category icons


1]Create a folder & place all the rank images that have to be used at your forum. (they don't need to be of same dimension)
2]Name of each rank image must be self-explanatory & don't exceed three letters
e.g a vip rank img is to be named vip; newmember rank img as nem...
3]Create a zip file out of that folder (using winrar/izarc)
4]Go to http://spritegen.website-performance.org/ upload your zip file; then chnge the following parameeters

Build Direction: vertical
Horizontal Offset: 4px
Vertical Offset: 4px
Class Prefix (optional): nil (remove any text)
press create sprite image & css

5]On the next page.
Download sprite img to some folder. Then copy 'CSS Rules code' of the form like:

.gen{ background-position: 0 0; width: 100px; height: 30px; }
.hel{ background-position: 0 -80px; width: 100px; height: 30px; }
.hep{ background-position: 0 -160px; width: 100px; height: 30px; }
.jun{ background-position: 0 -240px; width: 100px; height: 30px; }


6]Use the notepad search/replace function to replace all the '.' to '#' such that above code becomes


#gen{ background-position: 0 0; width: 100px; height: 30px; }
#hel{ background-position: 0 -80px; width: 100px; height: 30px; }
#hep{ background-position: 0 -160px; width: 100px; height: 30px; }
#jun{ background-position: 0 -240px; width: 100px; height: 30px; }


7] upload css sprite image downloaded @step5 to servimg & get the direct link of the form

http://i49.servimg.com/u/f49/15/79/08/97/csg-4e11.png


8]Now return to notepad & add these FINAL codes
.formranks {

  padding-left:19%; margin:3px;
}
.formranks ul { list-style:none; }
.formranks li {
  background: url(http://i49.servimg.com/u/f49/15/79/08/97/csg-4e11.png) no-repeat; list-style:none;
}



Now for the Forumotion part

9]Add all the code @notepad to your css, which in our case is

.formranks ul { list-style:none; }
.formranks li {
  background: url(http://i49.servimg.com/u/f49/15/79/08/97/csg-4e11.png) no-repeat; list-style:none;
}
#gen{ background-position: 0 0; width: 100px; height: 30px; }
#hel{ background-position: 0 -80px; width: 100px; height: 30px; }
#hep{ background-position: 0 -160px; width: 100px; height: 30px; }
#jun{ background-position: 0 -240px; width: 100px; height: 30px; }

save it.
10]Navigate to 'Rank administration'
Click to edit required rank(s) (special or whatever)
in 'Rank Title :' of that respective rank; for instance JuniorMember rank we add
<ul class="formranks"> <li id="jun"></li></ul>

for genius rank just change the id
<ul class="formranks"> <li id="gen"></li></ul>

Now if you want to add even three/four ranks
a) Create a new Rank using 'Add new Rank' in Rank administration
b) in the 'Rank Title :' add
<ul class="formranks"><li id="gen"><li id="hel"> <li id="jun"></li></ul>

Three ranks will be show in the id order you wrote without creating new concatenated img everytime


Removing mis-alignments
in my forum profile is centered; but in others it isn't so you have to modify the padding marging according to your own needs
.formranks {

  padding-left:19%; margin:3px;
}


φ
Posts:
Avatar
Guest
Ranks CSS Sprite Implementation
Posted October 22nd 2011, 7:13am
U got demo for it?
φ
Posts: 22
Joined: October 14th 2011, 11:00pm
Ranks CSS Sprite Implementation
Posted October 22nd 2011, 10:44am
see my forum http://engineering.forumotion.info/. See the ranks arent images, they are rather a background
φ
Posts:
Avatar
Guest
Ranks CSS Sprite Implementation
Posted November 1st 2011, 11:15am
after implementing ths everybody should check their rank positions at different resolutions.... :!:
φ
Posts:
Avatar
Guest

Who is online

Users browsing this forum: No registered users and 0 guests