Skip Navigation

We’re adding an option to set WPML’s language switcher design from within the admin screen. This will include setting all the colors of all elements, so that the language switcher matches the site.

In addition to letting users manually enter their own language switcher colors, we’re going to include several preset color schemes to choose from. The preset schemes we’re thinking about are:

  • White
  • Gray
  • Blue

Would you like to contribute a color scheme?

Here’s your chance. We know we’re not the best graphics artists, but many of you are!

Leave a comment here, including the CSS for WPML’s language switcher and a link to a screenshot showing how it looks in practice. We’ll choose the nicest ones and include in the next release of WPML.

For reference, here is WPML’s default CSS for the drop-down language switcher (taken from res/css):

#lang_sel {height:32px; position:relative; z-index:99;  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:visited {display:block;font-size:12px;text-decoration:none !important; color:#fff; border:1px solid #000; background:#09c; padding-left:10px; line-height:18px;}

/* a hack so that IE5.5 faulty box model is corrected */
* html #lang_sel a, * 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:19px;left:0; width:149px;border-top:1px solid #000;}
/* another hack for IE5.5 */
* html #lang_sel ul ul {top:18px;t\op:19px;}

/* 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:visited {background:#eee; color:#000 !important; height:auto; line-height:1em; padding:3px 10px;border-width:0 1px ">1px 1px 1px;}

/* 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(../img/nav-arrow-down.png) #09c right no-repeat;
#lang_sel a.lang_sel_sel:hover{
    text-decoration: none;

/* 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 img.iclflag{width:18px;height:12px;}

5 Responses to “Want to contribute design for the language switcher?”

  1. Great news Amir, am definitely going to do some. It’s the least I can do to help contribute to your excellent work. I’ll do a bunch over the weekend for your consideration. keep up the great ideas mate!…

    • That’s great and just in time.

      We’re trying to close up everything for a release on Tuesday, so what we get on Monday, we can include.

    • There is no CSS name for transparent color. I’m not sure if it’s at all possible to create a drop-down menu in CSS with transparent background and, if so, what it would involve.

      • i will leave my site open in order to see what i want, check down on the right that the languages appears with a white solid backround, how can i remove that white solid backround and replace it with black or transparent backrount the link is below.

        There is a place in the WPML in wordpress control panel in the language properties which can use css code. i ask if it is possible there to change something in order to achieve the above.