WordPress.org

Ready to get started?Download WordPress

Forums

Google Language Translator
[resolved] adjust width - and center "google-translator" plugin (4 posts)

  1. pgvdploeg
    Member
    Posted 10 months ago #

    I am currently nesting this tool in the sidebar widget.

    However :
    The langiuageselector width is rather small and is always positioned to the left.

    How can I adjust this? I want to adjust the width - and center "google-translator"

    Link: http://www.vdploeg.net/jank/

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

  2. Rob Myrick
    Member
    Plugin Author

    Posted 10 months ago #

    Hi pgvdploeg,

    Thanks for your question. It appears that I have forced the width on the translator in the plugin code. The reason I did this is because I wanted to override styling for those themes that would affect the display of the translator. In this case we will have to remove this "forced" style from the plugin, although this won't necessarily work after updating the plugin in the future.

    I may decide to remove that "forced" style, so that other users don't have this issue.

    For now, here's what will work.

    1) Add this to your THEME style sheet:

    select.goog-te-combo {
        width:97.5% !important;
        border-radius:3px !important;
        -webkit-border-radius:3px !important;
        -moz-border-radius:3px !important;
    }

    2) Navigate to Plugins > Google Language Translator > Edit. Then find the css folder and inside that folder you will find style.css. Click on it to edit that file, then find this on line 1:

    select.goog-te-combo {
      width:143px !important;
      box-shadow:none !important;
      -moz-box-shadow:none !important;
      -webkit-box-shadow:none !important;<br />
      padding:3px !important;
      height:auto !important;
      border:1px solid lightgray !important;
      border-radius:0px !important;
      -webkit-border-radius:0px;
      -moz-border-radius:0px !important;
    }

    4. And replace it with this:

    select.goog-te-combo {
      width:143px;
      box-shadow:none !important;
      -moz-box-shadow:none !important;
      -webkit-box-shadow:none !important;
      padding:3px !important;
      height:auto !important;
      border:1px solid lightgray !important;
      border-radius:0px;
      -webkit-border-radius:0px;
      -moz-border-radius:0px;
    }

    5. That's it! The above code will not center the drop-down box, but to me it seemed to look nice by making it look similar to the other boxes in the sidebar. Please let me know if it works, and if you need guidance to make any other changes, let me know.

    Thanks! Rob

  3. Rob Myrick
    Member
    Plugin Author

    Posted 9 months ago #

    I'm closing this as resolved, as I can see this user has implemented suggested changes to their website.

  4. Watch Teller
    Member
    Posted 8 months ago #

    Thanks Rob again!

    Used Theme CSS code above to adjust the width at "Add CSS Styles" box in version 2.8.

    select.goog-te-combo {
    width:90% !important;
    border-radius:3px !important;
    -webkit-border-radius:3px !important;
    -moz-border-radius:3px !important;
    }

Reply

You must log in to post.

About this Plugin

About this Topic