modifying css

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

Hi Rob,

Thanks for your message. The website is at https://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

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!

Hey there!

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

Can you not see it?

Cheers

Sion

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

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 https://www.studio88design.com/get-in-touch/

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

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

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!

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.

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

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….

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!

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

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!

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