1

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.