Drupal: customize language switcher block

If you are runnning a drupal multilingual site, you might be using i18n with language icons modules.

I’ve received some mails asking how to customize the aspect of the multilang switcher block. Easy!

Log in as admin and navigate to /admin/settings/language/icons
There you will be able to
1) customize the Icon placement (before link (after link) means that the language icon will be placed before (after) the language text, or just replace link which means no text will be displayed, just the language icon ).
2) customize the path to the language icons (default is sites/default/modules/languageicons/flags/*.png
3) customize the size of language icons (default is 16×12)

But you can also customize the way in which those icons are shown. For instance, you can change from vertical list to horizontal list by editing your CSS file and

.block-locale-0 li{
	display:inline;
	list-style-image: none;
}

In my drupal, the language icons are showing in the sidebar, so for displaying an horizontal list, I set:

.sidebar ul li{
/*border-top:1px solid #979ea8;*/
border:0px;
margin-left:5px;
margin-right:5px;
padding-top:6px;
padding-bottom:6px;
list-style-type: none;
list-style-image: none;
/* para que los language icons salgan en horizontal */
display:inline;
}

For not showing the block’s title (inside an h2):

.sidebar h2{
display:none;
}