What is kind of complex from a designer point of view is the control of the appearence of the language selector, aka the list of flags that the user can select to switch language.

Right now a basic Language selector looks like this

Which is fine but sometime could be not the way the designer has imagined the site. I’m talking about something like this:

As you can see the images AND the order are different.

The “right” way to do this would be something easy for a developer, but very complicated for a designer with css/html skills.

Let’s take a look to the code of the Language Selector:

        

                
                    
                        
                    language name 
        

        
    

It works but it shows some problems:
- the image are hard coded (width=”14″ height=”11″)
- there is no class attached to the <li> element to control the order of the flags

Removing the image, adding a class to the <a> element AND to the <li> element, and cooking some css gives you control on the images and the order of the flags.

This is the plone.app.i18n.locales.languageselector modified:

        

                
                    

                    language name 
        

        
    

And this are some basic css:

#portal-languageselector li
display:inline;
position:relative;
margin-bottom:0;
}

#portal-languageselector li.it {
float:left;
}

#portal-languageselector li.en {
float:right;
left:-38px;
}

#portal-languageselector li.es {
float:right;
left:24px;
}

#portal-languageselector li.fr {
float:right;
left:26px;
}

#portal-languageselector a
height:20px;
width:20px;
display:block;
}

#portal-languageselector a.English {
background: transparent url(gb.gif) no-repeat 0 0;
}

#portal-languageselector a.Français {
background: transparent url(fra.jpg) no-repeat 0 0;
}

#portal-languageselector a.Español {
background: transparent url(esp.jpg) no-repeat 0 0;
}

#portal-languageselector a.Italiano {
background: transparent url(ita.jpg) no-repeat 0 0;
}

Of course you need to upload the images as well, but that’s the easy part. And it’s also easy add hover and selected effect to the flags using the appropriate css.

Thanks to teix for the code hint. This is my first plone post in english, so please don’t be to hard on me. The version of LinguaPlone used in this example is 3b4.

Trieste Human Traffic from Martino Stenta on Vimeo.