WordPress.org

Ready to get started?Download WordPress

Forums

Google Language Translator
[resolved] Change CSS based on language (4 posts)

  1. csnodgr2
    Member
    Posted 8 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, http://powerplaykc.info/north/

    *Language flags are in upper right of banner.

    Thanks,
    Cody

    http://wordpress.org/plugins/google-language-translator/

  2. Rob Myrick
    Member
    Plugin Author

    Posted 8 months ago #

    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

  3. Rob Myrick
    Member
    Plugin Author

    Posted 8 months ago #

    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.

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

  4. Rob Myrick
    Member
    Plugin Author

    Posted 3 months ago #

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

    Thanks! Rob

Reply

You must log in to post.

About this Plugin

About this Topic

Tags