WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. csnodgr2
    Member
    Posted 10 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 10 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 10 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 5 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