Customize your website language selector

How to customize Text United website translation language selector

You can use the alternative version of the code snippet. This snippet packages all the translations withing the JS file and it's size will depend of your project data. Each time you make changes in your project you will need to update the code.

When you generate the code, click on CUSTOMIZE 

The customization options allow for basic changes like text size, color, border and position. If you need to adjust more advanced settings you can edit the CSS as described below.


Advanced customization settings using CSS

In order to customize the appearance of the language selection dropdown generated by Text United on your website, you need to add the appropriate CSS into your website to override the default styling.

The JavaScript snippet of code you embed into your website generates the following markup (depending on the number of target languages as there can be more than one SPAN element):

<div id="text-united-languages" class="text-united-languages">
        <span>[source language]</span>
        <span>[target language]</span>


You can find this element somewhere near the end of your website’s BODY tag after the page has loaded. Every time the page is reloaded the JavaScript code checks the status of available target languages and the state of your website translation project and generates this HTML content only if the translations are published and there’s at least one target language available.

Initially, for every new visitor of your website, the default position of the language selector will be determined by the CSS. But, if a visitor changes the position of the selector, the coordinates of the new position are saved inside the browser memory and preserved for any subsequent visit (until he/she clears the browser cache and cookies).

The default CSS for the language selector can be found in a style tag in the HEAD section and it’s generated at the same time as the HTML markup above:


.text-united-languages {

position: absolute;

z-index: 2147483647;

width: 145px;

font-size: 14px;

color: rgb(255, 255, 255);

background-color: rgb(0, 0, 0);

border: 1px solid rgb(255, 255, 255);

border-radius: 5px;

text-align: center;

right: 15px;

top: 15px;


.text-united-languages > span {

line-height: 35px;

margin: 0px auto;

cursor: pointer;

text-decoration: none;

font-weight: normal;

display: block;


.text-united-languages > span:hover {

font-weight: bold;



You can override this CSS by adding your own, more specific, CSS using the ID selector of the language selection dropdown. As an example, let’s change the background-color of the dropdown to purple and the default position to top-left: 


#text-united-languages {

color: yellow;

background-color: purple;

right: 0;

top: 15px;

left: 15px;


This will result in the language selector looking as shown in the picture below, and it will be located in the top left corner of your website. Don’t forget, your users can still move it around and position it as it suits them best!