How to customize the language selector in Text United WordPress plugin

Advanced customization for the WordPress language selector using CSS

In order to change the appearance of a language selector on your website, navigate to:

Setting > Language settings > Language selector.

 

 

Language selector content allows to decide how language names and flags are displayed in the language selector menu on a website. 

Language selector type allows you to customize the type of language selector. 

  • Position in main menu this option will show the language selector in the primary menu of your WordPress theme. The design of this type is inherited from your actual theme and will be placed as the last item in menu.
  • Widget - The widget can be displayed in bottom right or bottom left of your website. Default position of widget type is “fixed” which means that it's always on top of every other website element.
  • Dropup/Dropdown - This widget type list the languages in a drop down menu.

Alternatively, you can place language selector as a shortcode in any place you find suitable in your WordPress theme. To activate this option  select checkbox “Display as shortcode”.

Copy the shortcode [textunited_selector] to your theme or add to the html widget in your theme customization UI like you would do with other wordpress shortcodes.

When the option “display as shortcode” is selected, a language selector will disappear from your website and will be visible only when shortcode is embedded in theme. You can change appearance of embedded shortcode language selector by selecting type of widget in “language selector type”.

Advanced customization settings using CSS

In order to customize the appearance of the language selection for the widget, drop down and drop up options generated by Text United plugin on your website, you need to add the custom CSS into your website theme in customization options > theme section “additional CSS” and override the default styling.

The default CSS for widget type

The default CSS for dropdown, drop up type

#languageWidget .dropbtn {

   color: white;

   font-size: 16px;

   border: none;

   cursor: pointer;

   border-radius: 50%;

   width: 50px;

   height: 50px;

   background-color: #e9553b;

   display: block;

   padding: 5px;

   background-image: url('../img/globe.png');

   background-position: center center;

   background-size: 60%;

   background-repeat: no-repeat;

}

CSS for flags and names container

#languageWidget .dropdown-content {

   position: absolute;

   background-color: #f1f1f1;

   min-width: 50px;

   max-width: 180px;

   width: max-content;

   overflow: auto;

   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

   z-index: 1;

}

#languageWidget .dropdown-content a{

   color:black;

}

.Tudropdown {

   display: inline-block;

   background: #ffffff;

   border: 1px solid #e0e0e0;

   padding: 10px;

   padding-right: 10px;

   font-size: 15px;

   color: black;

   text-decoration: none;

   position: relative;

   min-width: 180px;

}

 

CSS for flags and names container

.Tudropdown .Tudropdown-menu {

   position: absolute;

   background-color: #f9f9f9;

   min-width: 180px;

   box-shadow: 0px 8px 16px 0px       rgba(0,0,0,0.1);

   padding: 12px 16px;

   z-index: 9999;

}

 

.Tudropdown .Tudropdown-menu a {

   color:black;

}

You can override this CSS by adding your own or replacing CSS using the ID selector of the language selection of your choice. In the example below we have changed the background-color of the widget to purple, font color to white and background of language content to red.

Customization example:

Remember to add “!important” on end of every instruction without this parameter overwriting CSS might not work.

CSS for widget

CSS for drop down, drop left

#languageWidget .dropbtn {

background-color: purple !important;

color: white !important;

}

 

#languageWidget .dropdown-content {

background-color: red !important;

}

#languageWidget .dropdown-content a{

   color:white !important;

}

.Tudropdown {

background-color: purple !important;

color: white !important;

}

 

.Tudropdown .Tudropdown-menu {

background-color: red !important;

}

.Tudropdown .Tudropdown-menu a {

   color:white !important;

}

Customization example: