How to display/hide content in a specific language?

In this article, you will find how to display and/or hide some content in a specific language

If you need to display some content only in a specific language, for example, a button with a link, you can follow the steps below:

1. Create 2 different elements

By creating two different elements in your original website, you can define two different links, for example. The first one will follow the second one. However, the two elements will never be displayed at the same time, thanks to a CSS workaround.

2. Add a CSS selector for each element

You'll have to add a specific CSS selector (class or ID) for each element. For example, "link-en" for the icon you want to link to the English URL and "link-es" for the icon linked to the Spanish URL. If you don't know what a CSS selector is, you will find more information below.

3. Add some custom CSS

To do the last step, go to your Weglot Dashboard > Settings > Language Switcher and enter this code into the "Custom CSS" field:

html:not([lang="en"]) .link-en, html:not([lang="es"]) .link-es {   display: none!important; }

Here, the :not() property is a negation pseudo-class that matches an element that is not represented.
For example, the condition html:not([lang="es"]) simply means " when the language is not Spanish"

Don't forget to replace the right languages and the right classes in the code above with your respective languages. Also, make sure the 'en' and 'es' abbreviations are the ones you're truly using.

To find the language code of your original language, you'll have to go to your source code. The code is displayed at the top:

Not sure how to access your source code? Find more information below.

Then, if your original language is English with an en-US short code, here is the final code you'll have to use:

html:not([lang="en-US"]) .link-en,html:not([lang="es"]) .link-es {   display: none!important;}

Finally, if you'd like to apply the code for a third language such as German, you can add just one line of custom CSS. It will look like this:

html:not([lang="en-US"]) .link-en,html:not([lang="es"]) .link-es, html:not([lang="de"]) .link-de, {  display: none!important;}

4. Additional information

What is a CSS selector?

CSS selectors are used to "find" (or select) the elements you want to style, edit, or in our case, hide.

When you add content to your original website, you should be able to add a CSS selector to it.

For example, you should be able to either:

- Find a dedicated field depending on which CMS, app, or plugin you are using to create the content:

- Manually add the class or the ID by yourself directly in the HTML, so it looks like this:

After that, you'll have to use CSS rules to hide the element that should not be displayed according to the selected language.

How do I access my source code?

To access your source code, you can right-click anywhere on your website homepage and click on "View Page Source":