Topic: Use Sprite for your dating website - flag, language select
I give an example for Flag / Language selector that I made for myself
A. You need add 2 images in your server
This one blank image on left corner > http://www.matrimo.ro/images/blank.gif
and this sprite for Flags http://www.matrimo.ro/images/lang.png
B. Then in Vldpersonals in Control panel » Content » Banner groups » Banners » Edit field
Add this (replace the right links) :
<p align="right">
<a href="http://www.matrimo.ro" title="agentie matrimoniala">
<img src="http://www.matrimo.ro/images/blank.gif" class="flag flag-ro" alt="agentie matrimoniala" width="24" height="24" /></a>
<a href="http://www.matrimo.eu" title="Matchmaking Romania">
<img src="http://www.matrimo.ro/images/blank.gif" class="flag flag-en" alt="matchmaker agency" width="24" height="24" /></a>
<a href="http://www.matrimo.fr" title="agence matrimoniale">
<img src="http://www.matrimo.ro/images/blank.gif" class="flag flag-fr" alt="agence matrimoniale" width="24" height="24" /></a>
<a href="http://www.matrimo.it" title="agenzia matrimoniale">
<img src="http://www.matrimo.ro/images/blank.gif" class="flag flag-it" alt="agenzia matrimoniale" width="24" height="24" /></a>
<a href="http://www.matrimo.es" title="agencia matrimonial">
<img src="http://www.matrimo.ro/images/blank.gif" class="flag flag-es" alt="agencia matrimonial" width="24" height="24" /></a>
<a href="http://www.matrimo.de" title="partnervermittlung">
<img src="http://www.matrimo.ro/images/blank.gif" class="flag flag-de" alt="partnervermittlung romania" width="24" height="24" /></a>
<a href="http://www.matrimo.be" title="huwelijk">
<img src="http://www.matrimo.ro/images/blank.gif" class="flag flag-nl" alt="huwelijk rumania" width="24" height="24" /></a>
</p>
C. Then in templates/your template/media/site.css
add this:
.flag {
background: url("http://www.matrimo.ro/images/lang.png") no-repeat scroll 0 0 transparent;
height: 24px;
width: 24px;
}
.flag.flag-ro {
background-position: 0 0;
}
.flag.flag-en {
background-position: -25px 0;
}
.flag.flag-fr {
background-position: -50px 0;
}
.flag.flag-it {
background-position: -75px 0;
}
.flag.flag-es {
background-position: -100px 0;
}
.flag.flag-de {
background-position: -125px 0;
}
.flag.flag-nl {
background-position: -150px 0;
}
div#header div.banner {
float: right;
width: 254px;
padding-right: 3px;
}
as you see the banner width size was increased to 254px.You can do same for you design. This will improve the pages load speed and limit the HTTP requests.