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;
}
English
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?