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 7.27 hours from now. Thank you for your understanding.
Tagged: Translating a theme
This topic contains 5 replies, has 2 voices.
Last updated by morten-sandvallS 4 years, 1 month ago.
Assigned support staff: Diego Pereira.
Author | Posts |
---|---|
June 18, 2018 at 12:11 pm #2419008 | |
morten-sandvallS |
I am trying to: 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, |
June 19, 2018 at 7:07 am #2420859 | |
morten-sandvallS |
Hi Diego, 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? - |
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, |
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 Regards, |
June 20, 2018 at 7:23 am #2423609 | |
morten-sandvallS |
Hi Diego, [lang="dk_DK"] [lang="en_US"] The correct ones is these: [lang="dk-DK"] [lang="en-US"] It works now! |