Polylang trick with multiple languages

[alfredino]

Hi,
first of all, thank you very much for this simple guide. I was able to setup widgets translation without buying the pro version that is too expensive for my hobby website (I hate subscription model).
Your guide is for two languages, but I managed to get it works for three. So my questions are:

• I modified the CSS file by adding this and it works:

body.en .widget-es {
    display: none;
}
body.en .widget-fr  {
    display: none;
}

In theory something like the following, should works too, but it does not. What is the best way to have multiple languages?

body.en .widget-es, .widget-fr {
    display: none;
}

• In the widget I have one heading (h2 or h3) followed by an element (gallery, picture, table). However, the vertical alignment of the heading is the same for the second and third languages (es and fr) while it is different for the first one (en). Do you know why?

I am using latest wordpress 6.8.2 with PHP 8.4.12.
Thank you

 

[BikeGremlin]

Hi,
first of all, thank you very much for this simple guide. I was able to setup widgets translation without buying the pro version that is too expensive for my hobby website (I hate subscription model).
Your guide is for two languages, but I managed to get it works for three. So my questions are:

• I modified the CSS file by adding this and it works:

body.en .widget-es {
    display: none;
}
body.en .widget-fr  {
    display: none;
}

In theory something like the following, should works too, but it does not. What is the best way to have multiple languages?

body.en .widget-es, .widget-fr {
    display: none;
}

• In the widget I have one heading (h2 or h3) followed by an element (gallery, picture, table). However, the vertical alignment of the heading is the same for the second and third languages (es and fr) while it is different for the first one (en). Do you know why?

I am using latest wordpress 6.8.2 with PHP 8.4.12.
Thank you

Hi,

Glad you made it work.

This is my article explaining CSS, CSS selectors etc:
HTML and CSS explained – WP workshop [05]
Your second code example probably doesn't work because of the selector used. This could/should work:

body.en .widget-es,
body.en .widget-fr {
    display: none;
}

Probable reason your code didn't work?

body.en .widget-es = ".widget-es inside body.en"
.widget-fr = "all .widget-fr elements everywhere" (not only when scoped under body.en)

 

[alfredino]

Hi,

Glad you made it work.

This is my article explaining CSS, CSS selectors etc:
HTML and CSS explained – WP workshop [05]
Your second code example probably doesn't work because of the selector used. This could/should work:

body.en .widget-es,
body.en .widget-fr {
    display: none;
}

Probable reason your code didn't work?

body.en .widget-es = ".widget-es inside body.en"
.widget-fr = "all .widget-fr elements everywhere" (not only when scoped under body.en)

Thank you for the link and suggestion. Your code is more elegant than my first version, but both work the same way. However, I have the same alignment issue, but I do not think it is related to your "trick".