WordPress.org

Ready to get started?Download WordPress

Forums

Google Language Translator
[resolved] modifying css (16 posts)

  1. sionlanini
    Member
    Posted 10 months ago #

    Hi there,

    I'm trying to modify the look of the gadget with CSS in a child theme:

    .goog-te-gadget {
    padding-top: 5px;
    }

    It seems like the plugin loads the css for the plugin after loading css from childtheme.

    Is there any way around this?

    Thanks

    Sion

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

  2. Rob Myrick
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Sion, sorry for the late reply - would you mind sharing your website here, so that I can take a look for you? I will do my best to help you.

    Rob Myrick

  3. sionlanini
    Member
    Posted 9 months ago #

    Hi Rob,

    Thanks for your message. The website is at http://www.worldatplay.org.uk/wordpress

    I'm trying to get the plugin to sit neatly next to the 'Back to top' link and inline with the rest of the footer items.

    Any ideas?

    Thanks :)

    Sion

  4. Rob Myrick
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Sion, I apologize for the delay in my response. Would you be able to add the translator to the page, and then I can try and manipulate the styles so that I can provide a solution for you.

    Let me know and I will take a look.

    Thanks!

  5. sionlanini
    Member
    Posted 9 months ago #

    Hey there!

    The translator is at the bottom of the page at http://www.worldatplay.org.uk/wordpress

    Can you not see it?

    Cheers

    Sion

  6. apostlepoe
    Member
    Posted 9 months ago #

    For what it's worth, I can't see the translator either.

  7. Rob Myrick
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Sion, this is a CSS issue. The id #catapult-cookie-bar the footer of your site has position:fixed added to it, which means the black bar in the footer sits on top of everything else. I can fix this if you want.

    To make it fast, I would need access to the site please.

    You can contact me here at http://www.studio88design.com/get-in-touch/

    I will try and solve your original positioning issue all at once.

  8. sionlanini
    Member
    Posted 9 months ago #

    Aw shucks, sorry guys. Forgot the cookie declaration plugin was showing up for you.

    I've changed it appear on the top now, so you should hopefully be able to see the translate plugin now in the bottom right. Thanks for your offer to help though.

    I'm looking to have the 'Google Translate' text, the drop down box and the 'back to top' link alongside each other in the same vertical alignment as the social media links on the left.

    Do you know how I could do this?

    Thanks for your perseverance!

    Sion

  9. Rob Myrick
    Member
    Plugin Author

    Posted 9 months ago #

    Sion, there are a few changes here that would need to be edited in the plugin. It's going to take more time to explain all of this than for me to do it. Are you sure that you can't create a simple user access for me to help you on this? It would be very much appreciated, but I will still type all of it out if you are reluctant. Let me know.

    Thanks!

  10. Rob Myrick
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Sion, let's start with this:

    Add this to your theme style sheet:

    #google_language_translator {
      width:310px !important;
      clear:none;
      margin-top:-15px;
    }

    Then go to "Appearance > Plugins" and click on "Edit" next to the Google Language Translator plugin.

    Go to line 1720 in googlelanguagetranslator.php and find this:

    .goog-te-gadget .goog-te-combo { margin-top:-7px !important; }

    And then change it to this:

    .goog-te-gadget .goog-te-combo { margin-top:-3px !important; }

    This should solve your issue. The styles for .goog-te-gadget .goog-te-combo will not stay in place the next time you update the plugin, so please keep these handy so that you can add the styles back when the plugin is updated again in the future.

  11. sionlanini
    Member
    Posted 9 months ago #

    Hi rm2773,

    Thanks for taking the time to explain - I have learned so much over the past month from supportive community members so really appreciate your patience!

    I have made the modifications as instructed in my child theme's style.css and in the google-language-translator.php file, but it appears that the button and the 'back to top' part of the theme are still on different lines.

    Do you know whether it's possible to get them on the same lines?

    Thanks

    Sion

  12. Rob Myrick
    Member
    Plugin Author

    Posted 9 months ago #

    Sorry about that, Sion....I just realized that all of these styles will need to be added to the plugin in order for it to work. So please remove those styles from the theme's CSS file, but keep those styles I mentioned to place in the plugin.

    We are going to add some additional styles to line 1726 in googlelanguagetranslator.php. Please find this on line 1726:


    #google_language_translator {
    clear:both;
    width:auto !important;
    text-align:right;
    }

    Then change it to this below:


    #google_language_translator {
    width:310px !important;
    clear:none !important;
    text-align:right;
    }

    That should be better! Let me know if that works....

  13. sionlanini
    Member
    Posted 9 months ago #

    Hurray! That seems to work - thanks so much for your help :)

    So for future plugin updates I need to:

    Go to line 1720 in googlelanguagetranslator.php and find this:
    .goog-te-gadget .goog-te-combo { margin-top:-7px !important; }

    And then change it to this:
    .goog-te-gadget .goog-te-combo { margin-top:-3px !important; }

    And then find this on line 1726:
    #google_language_translator {
    clear:both;
    width:auto !important;
    text-align:right;
    }

    Then change it to this below:
    #google_language_translator {
    width:310px !important;
    clear:none !important;
    text-align:right;
    }

    Thank you!

  14. Rob Myrick
    Member
    Plugin Author

    Posted 9 months ago #

    That great! I'm so glad it worked!

    And yes, just make those modifications after an update and it will work great.

    I'm sorry to sound frustrated in my previous message - I thought it would be more work to type it out, but it actually wasn't that bad. :)

    Thanks for using the plugin. Please don't hesitate to vote on the plugin if you like using it!

    Rob

  15. Rob Myrick
    Member
    Plugin Author

    Posted 9 months ago #

    Hi Sion, one more suggestion,

    You might change the width of the CSS code from 310px to slightly larger. I just noticed when translating language, that the select box clashes with the branding text located to it's left. Increasing the width will keep them separated.

    Maybe add this CSS instead of what I told you above:


    #google_language_translator {
    width:330px !important;
    clear:none !important;
    margin-left:-30px !important;
    text-align:right;
    }

    Good luck!

  16. sionlanini
    Member
    Posted 9 months ago #

    Hi rm2773

    Thanks for the extra tip - it was displaying OK on mine but good to make sure it looks neater across more platforms.

    Thanks again very much for your help,

    Sion

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.