Skip Navigation

Home › Support › English Support › [Resolved] Use different CSS styles on different languages

[Resolved] Use different CSS styles on different languages

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to apply CSS styles only to a specific language

Solution:
Use the lang attribute of HTML tag as a selector. E.G.

/*Code for dk_DK language*/
html[lang="dk_DK"] .header-image .site-title > a  {
    color: #333333;
}
/*Code for en_US language*/
html[lang="en_US"] .header-image .site-title > a  {
    color: #00ff00;
}

80% of people find this useful.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Our next available supporter will start replying to tickets in about 0.72 hours from now. Thank you for your understanding.

This topic contains 5 replies, has 2 voices.

Last updated by morten-sandvallS 4 years, 5 months ago.

Assigned support staff: Diego Pereira.

Author Posts
June 18, 2018 at 12:11 pm #2419008

morten-sandvallS

I am trying to:
use [lang="en_US"] in CSS styles to get different styles on the languages

my css looks like this

.header-image .site-title > a [lang="dk_DK"] {
background-image: url(url-1..) !important;
height:17px;
max-height:17px;
display: block;
text-indent: -9999px;
opacity:1 !important;
}

.header-image .site-title > a [lang="en_US"] {
background-image: url(url-2..) !important;
height:17px;
max-height:17px;
display: block;
text-indent: -9999px;
opacity:1 !important;
}

It work fine when i use:


html[lang="en_US"] {
background-color:red !important;
} 

html[lang="dk_DK"] {
background-color:blue !important;
}

Please advise,
June 18, 2018 at 12:53 pm #2419114

Diego Pereira
Supporter

Languages: English (English ) Spanish (Español ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello @morten-sandvalls, welcome back 🙂

You need to use the lang selector next to the html tag. In this case all other CSS selectors must come after the html tag.

To work, your code should be done this way:

html[lang="dk_DK"] .header-image .site-title > a  {
background-image: url(url-1..) !important;
height:17px;
max-height:17px;
display: block;
text-indent: -9999px;
opacity:1 !important;
}
 
html[lang="en_US"] .header-image .site-title > a  {
background-image: url(url-2..) !important;
height:17px;
max-height:17px;
display: block;
text-indent: -9999px;
opacity:1 !important;
}

Note that the selector lines start with the HTML tag and the language attribute.

Please let me know if it worked for you.

Regards,
Diego
June 19, 2018 at 7:07 am #2420859

morten-sandvallS

Hi Diego,
Ok I tried what you suggested but still doesn't work. I was to quick to say that the background image worked, but it doesn't.
BACKGROUND IMAGE
When I use this code

html[lang="dk_DK"] {
background: url(url...) no-repeat top center fixed !important; 
background-size: cover !important;
background-color:#0c2e3a !important;
}

It just removed the background-image and show white background.

When I try with this:

html[lang="dk_DK"] .header-image .site-title > a  {

background-image: url(url-1..) !important;

height:17px;

max-height:17px;

display: block;

text-indent: -9999px;

opacity:1 !important;
}

html[lang="en_US"] .header-image .site-title > a  {

background-image: url(url-2..) !important;

height:17px;

max-height:17px;

display: block;

text-indent: -9999px;

opacity:1 !important;
}

Nothing happens...So maybe it's something else? -
Please advise
June 19, 2018 at 12:27 pm #2421870

Diego Pereira
Supporter

Languages: English (English ) Spanish (Español ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Hi there,

Could you send me a link to the website? I can look at the source code to check the code.

It would also be nice if you can send us access to your WordPress dashboard (website URL, login and password), this way I can adapt the code if necessary. Please use the private field to send the sensitive data.

It would be better if you give me a test site rather than the live site.

IMPORTANT We always recommend to backup a working copy of site files and database before.

Regards,
Diego
June 19, 2018 at 3:44 pm #2422417

Diego Pereira
Supporter

Languages: English (English ) Spanish (Español ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Hi there,

As this is a test website, I did some testing to modify the background of the page to green and yellow (depending of the language). The snippet below worked (it is added in Appearance > Customize > Additional CSS).

html[lang="da-DK"] body{
    background: #00ff00 !important;
}

html[lang="da-DK"] .page-id-10 {
    background: #00ff00 !important;
}

html[lang="en-US"] body {
    background: #00ff00 !important;
}

Apparently you had some styles in the .page-id-10 class, which was overwriting the body background.

You can change the background color for the background you want.

Original Version: hidden link
English Version: hidden link

Regards,
Diego
June 20, 2018 at 7:23 am #2423609

morten-sandvallS

Hi Diego,
Thanks for the reply and all your effort. I found out that the problem was the code for the languages. I used these in my code:

[lang="dk_DK"]
[lang="en_US"]

The correct ones is these:

[lang="dk-DK"]
[lang="en-US"]

It works now!