Styling the drop-down language switcher
WPML includes very basic customizations for the drop-down language. To further adapt its look to your site, you can use CSS.
To do this, add CSS code to your theme’s style.css file. Make sure that your theme’s CSS is loaded after the call to wp_head() in header.php.
For example, this is our own code for header.php:
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
The first line in this code must appear in every WordPress theme. It initializes WordPress functions and loads plugin header stuff.
The second line calls our theme’s CSS. Since it comes after wp_head, the theme’s design take precedence to the default design.
Sample CSS for a fancy drop-down language switcher
The following CSS is taken from WPML’s ThemeHybrid compatibility package. It creates a fancy drop down menu with rounded edges and a nice frame.
This is how it will look like:
This is the entire CSS code, full with comments that explain what each element does:
#lang_sel {height:32px; position:relative; z-index:999; float: right; margin-right: 10px; margin-top:10px; font-family:arial, sans-serif;}
/* hack to correct IE5.5 faulty box model */
* html #lang_sel {width:12em; w\idth:12em;}
/* remove all the bullets, borders and padding from the default list styling */
#lang_sel ul, #lang_sel li {padding:0 !important; margin:0 !important; list-style-type:none !important;}
#lang_sel li:before{content:'' !important;}
#lang_sel ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#lang_sel li {float:left;width:149px;position:relative;}
/* style the links for the top level */
#lang_sel a, #lang_sel a:link, #lang_sel a:visited {
display:block;
/*background: #fcfcfc;*/
font-size:12px;
text-decoration:none !important;
color:#fff;
border:1px solid #000;
line-height:18px;
border-top: 1px solid #e1e1e1;
border-right: 1px solid #c8c8c8;
border-bottom: 1px solid #bfbfbf;
border-left: 1px solid #e1e1e1;
padding: 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
font: normal bold 12px Verdana, sans-serif;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html #lang_sel a, * html #lang_sel a:link, * html #lang_sel a:visited {width:149px; w\idth:138px;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
#lang_sel ul ul {visibility:hidden;position:absolute;height:0;top:25px;left:0; width:149px;border-top:0;}
/* another hack for IE5.5 */
* html #lang_sel ul ul {top:25px;t\op:25px;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
#lang_sel table {position:absolute; top:0; left:0; border-collapse:collapse;}
/* style the second level links */
#lang_sel ul ul a, #lang_sel ul ul a:link, #lang_sel ul ul a:visited {
font-weight: normal;
/*font-size: 11px;*/
background:#eee;
color:#000 !important;
/*height:auto; line-height:1em; */
/*padding:3px 10px;*/
border-width:0 1px 1px 1px;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0; /* future proofing */
-khtml-border-radius: 0; /* for old Konqueror browsers */
}
/* yet another hack for IE5.5 */
* html #lang_sel ul ul a, * html #lang_sel ul ul a:visited {width:150px;w\idth:128px;}
/* style the top level hover */
#lang_sel a:hover, #lang_sel ul ul a:hover{color:#000; background:#ccc;}
#lang_sel :hover > a, #lang_sel ul ul :hover > a {color:#000; background:#ccc;}
#lang_sel a.lang_sel_sel{
background:url(../images/nav-arrow-down.png) #fcfcfc right no-repeat;
color: #bfbfbf;
}
#lang_sel a.lang_sel_sel:hover{
text-decoration: none;
/*color:#000;*/
}
/* make the second level visible when hover on first level list OR link */
#lang_sel ul li:hover ul,
#lang_sel ul a:hover ul{visibility:visible; }
#lang_sel ul li img {
position: relative;
margin: 0;
padding: 0;
margin-right: -6px;
border: 1px solid #bfbfbf;
top: 2px;
}
#lang_sel ul li ul li img {
margin-right: -2px;
}
Subscribe via RSS
Follow
Ah, there we go.
I hopelessly tried to style the switcher with a div.
Hello, is there any possibillity to change the main color of the dropdownmenu? Since last actualisation I´m not able to do that anymore. But blue is horrible in our site.
With the code above I also got Blue background.
Regards
rudibert
Click on WPML->Languages and scroll down to the language switcher settings (you need to be in Advanced mode to see it).
WPML now includes the GUI settings to control the colors of the drop-down language selector. There are several preset color schemes that you can use, or enter your own colors.
….feeling so silly!!!
Thank U very much amir!
I saw the advanced settings buttton but did not see “that point”.
Is the language_selector.css not working anymore? I did not see any changes in there.
U R GREAT
Thanx
Click on WPML->Languages and scroll down to the language switcher settings (you need to be in Advanced mode to see it).
I’ve been looking for ways to style the switcher for hours! This is definitely a very important feature I think and it needs therefore a much more clear position in the page or a page of it’s own.
So, did you find it eventually and managed to use the language switcher customization?
How do I make language switcher to display language codes instead of language names?
I noticed that in the language switcher options there is a checkbox to “turn” off various items of the language switcher. I wanted to turn ON the Flags but turn OFF the other two options and just have the flags listed.
Also if both flags are listed I would like to remove the box on the header. Something more like footer for formatting.
Thanks…
How can I add the switcher to the HEADER of my web site? I just want a list of flags in the header section, but the widget only goes in the sidebar.
Any ideas?
Embed the code to the header file.
Amir, thank you for a fantastic plug-in.
Could you, pls, help with the language switcher styling.
I spent an hour going through switcher php, but no luck. The languages labels are not aligned if i choose “list” option, I tried to switch to “drop-down” but in this case the 2nd language doesn’t show properly in drop-down list+ no arrow on the right, so it looks like a box rather than drop-down list. I suspect it is an easy fix and will benefit a few of us.
Thank you in advance.
Victoria
Hi everybody,
First, thanks very much for this plugin !!
I’m a begginer with php and i would like to know if someone knows how to put the language switcher into the header ?
Thanks all,
Alex
[...] Du hast auch die Möglichkeit deine eigenen CSS-Styles zu verwenden, dazu gibt es eine hilfreiche Beschreibung mit allen benötigten Syles auf der Webseite von WPML. [...]
Is it possible to have the “This post is also available in…” display in the language that has been currently selected? Seems strange to have it display only in English =)
Yes. You can translate it via the String Translation screen.
My site is both French and English. I inserted the php code provided for the language switcher in my header, works well. The only thing is that I don’t want to see both choice, I want people to see only “francais” when they are on the English page, and vice-versa.
hi, i’m trying for hours to remove the break before the language switcher.
i know there is a div element, i tried everything (margin, padding, display: inline…)
how can i get it to stay in one line with the text beore it?
thank you
sandra
The better place for support questions is in our technical forum:
http://forum.wpml.org