You can use the alternative version of the code snippet. This snippet packages all the translations within the JS file, and its size will depend on your project data. Each time you make changes to your project, you must update the code.
When you generate the code, click on CUSTOMIZE.
The customization options allow basic changes like text size, colour, border and position. You can edit the CSS as described below to adjust more advanced settings.
Advanced customization settings using CSS
To customize the appearance of the language selection dropdown generated by Text United on your website, you need to add the appropriate CSS to your website to override the default styling.
<div id="text-united-languages" class="text-united-languages">
<span>[source language]</span>
<span>[target language]</span>
</div>
After loading the page, you can find this element near the end of your website’s BODY tag. Every time the page is reloaded, the JavaScript code checks the status of available target languages and the state of your website translation project. There’s at least one target language available. It generates this HTML content only if the translations are published.
Initially, for every new visitor to your website, the CSS will determine the default position of the language selector. 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 they clear 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!
Comments
0 comments
Article is closed for comments.