Language Selector Styling

Adding your own CSS code or HTML button

Override language selector CSS

You can add your own CSS rules to customize the language button. Weglot automatically adds a button in your page, that is either a dropdown or a list and will look like this:

Dropdown
List
<aside data-wg-notranslate class="country-selector weglot-dropdown weglot-default weglot-invert">
<input id="weglot_choice" type="checkbox" name="menu">
<label for="weglot_choice" class="wgcurrent wg-li weglot-flags flag-0 en" data-code-language="en">
<span>EN</span>
</label>
<ul>
<li class="wg-li weglot-flags flag-0 fr" data-code-language="fr">
<a data-wg-notranslate href="http://example.com/">FR</a>
</li>
</ul>
</aside>

You can use these classes to add your own rules. For example adding this in "Override CSS" to make the language name uppercase. :

.country-selector a {
text-transform: uppercase;
}

Override CSS on the WordPress back office

You can add your custom CSS rules directly on your WordPress back office. To do that, connect you on your WordPress and go to: Weglot > Language button design (Optional) > Override CSS

Override CSS using WordPress Hook

This filter allows you to add custom style by default without going through the settings.

<?php
add_filter( 'weglot_css_custom_inline', 'custom_weglot_css_custom_inline' );
function custom_weglot_css_custom_inline( $css_custom ){
$css_custom .= '.country-selector { background-color: red; }';
return $css_custom;
}

Override HTML using WordPress Hook

<?php
add_filter( 'weglot_button_html', 'custom_weglot_button_html', 10, 2 );
function custom_weglot_button_html( $button_html, $add_class ) {
$button_html = '<div style="border: 1px solid red;"><p>Choose your language:</p>' . $button_html . '</div>';
return $button_html;
}