Change CSS based on language

  • Resolved csnodgr2

    (@csnodgr2)


    11 years, 5 months ago

    My site is in English and I want to offer translation to Spanish. Since Spanish words have more characters than English words I’d like to adjust the CSS when the site is translated into Spanish.

    I tried looking at the source code to see if there was a lang=”” change but there isn’t. Is there any way I can check whether the site has been translated by the plugin so I can setup an if/else statement for my stylesheet?

    Here is the beta site I’m working with, https://powerplaykc.info/north/

    *Language flags are in upper right of banner.

    Thanks,
    Cody

    https://www.ads-software.com/plugins/google-language-translator/

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi csnodgr2,

    There are no CSS classes that change automatically when you translate to Spanish, so pure CSS will not work. HOWEVER, I bet that you could use jQuery to do this.

    For example, when you translate to Spanish, the activated link is this:

    a#Spanish.

    If you add jquery in your code to track when a#Spanish is clicked, you could then add a CSS class to those areas you want to adjust.

    jQuery is cool stuff – I think it could work.

    If you need help, I could probably offer some help for a small charge.

    Let me know how it works out, or if you need help.

    Thanks so much for using this plugin.

    Rob

    I should also mention that there is a different method that can be used to create a centered menu, just in case you are worried about the “blue box” menu located halfway down your page. I can see that the display there is affected when switching to Spanish.

    You can actually create a “widthless” menu that adjusts no matter how wide your menu items get.

    See this article which tells you how to create a menu without having a fixed width, then you can avoid the jQuery coding I mentioned above, and the menu will adjust accordingly to the translated text.

    https://www.markinns.com/articles/full/centering_widthless_floats

    Hi csnodgr2, I can see that you fixed this with another solution – great job! I’m going to close this topic.

    Thanks! Rob

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change CSS based on language’ is closed to new replies.

Tags