1. Create (or find) bigger flags than the ones used by qtranslate for each of the languages you’re going to use. Mine are 32px x 32px centered both vertically and horizontally. Note that if you use a different size you will need to change the CSS accordingly, so they fit nicely in your box. Save the flags in your child theme folder, as {language_code}.png (example: en.png, it.png, etc…) in a folder named flags.
2. Add this code in your child theme’s functions.php (just above the ending ?> (if that’s how your functions.php ends – if not, just below the last function)
add_action ('__before_header', 'qtrans_lang_chooser');
function qtrans_lang_chooser() {
ob_start();
echo qtrans_generateLanguageSelectCode('image');
$output = ob_get_contents();
ob_end_clean();
echo $output;
}
3. Place this code in your style.css of your child theme:
ul.qtrans_language_chooser {
background-color: rgba(51, 102, 153,.45);
box-shadow: 2px 5px 7px rgba(0,0,0,.21);
border-radius: 10px;
border: 1px rgba(255,255,255,.5) solid;
left: -17px;
list-style-type:none;
margin: 200px 0 0 3px;
padding: 7px 10px 7px 22px;
position: fixed;
-webkit-transition: background-color linear 200ms;
transition: background-color linear 200ms;
z-index: 201;
}
ul.qtrans_language_chooser:hover {
background-color: rgba(153,204,255,.65);
box-shadow: 3px 8px 10px rgba(0,0,0,.15);
}
ul.qtrans_language_chooser li.active {
display: none;
}
ul.qtrans_language_chooser li a {
height: 32px;
width: 32px;
}
Feel free to play with position and/or colors and/or shadows of normal and :hover states of ul.qtrans_language_chooser.
Finally, add this to the CSS above, for each of your languages, replacing {language_code} with each language’s code:
a.qtrans_flag.qtrans_flag_{language_code} {
background: url(flags/{language_code}.png) no-repeat;
}
Example, for english:
a.qtrans_flag.qtrans_flag_en {
background: url(flags/en.png) no-repeat;
}
Upload style.css, functions.php and the flags folder to your child theme and you’re done.
