Do you have a multilingual website (e.g. EN, DE) and want to style elements differently on an English page than on the German page?


To do so:

1. Add your custom CSS code under: Settings - Design – CSS

2. Add a Marketing Flexi Class Box to the corresponding page and place the elements inside the Class Box which you want to style differently


Example: Text Color


Goal:

Make a specific text blue on the English page.

Make the same text red on the German page.


Solution:

Each page’s body tag has a "lang-xx" class, where xx is the language. This means: All English pages have the class lang-en, all German pages have the class lang-de, etc.


You can address and style this class in your custom CSS code.


Demo: https://per-lang-css-demo.incms.net/ 


See screenshot on the demo page to check out the corresponding CSS code:

/* color in blue for english */

/* color in red for german */


As you can see from the screenshot, we use the class lang-color to style the text color. You can name this class as you like. Please make sure that you add a Marketing Flexi Class Box with this class to the page where you want to style elements differently and place all these elements (here: text) inside this Class Box.


Example: Hide an image


Goal:

Show a specific image on the English page.

Hide the same image on the German page.

(Or vice versa)


Solution:

Each page’s body tag has a "lang-xx" class, where xx is the language. This means: All English pages have the class lang-en, all German pages have the class lang-de, etc.


You can address and style this class in your custom CSS code.


Demo: https://per-lang-css-demo.incms.net/ 


See screenshot on the demo page to check out the corresponding CSS code:

/* hide in english */

/* hide in German */


As you can see from the screenshot, we use the classes lang-hide-en and lang-hide-de to hide images. You can name these classes as you like. Please make sure that you add a Marketing Flexi Class Box with this class to the page where you want to hide the image and place the image (or other elements) inside this Class Box.