Move Floating Widget

That and I’m not a huge fan of ORANGE I assume the color change can be facilitated in the Custom CSS.

Hi demoman2k10,

Yes, this would all be done via CSS:

Here is the code that will move the current orange floating widget to the left side, and this also controls the colors:

#glt-translate-trigger {
  position: fixed;
  bottom: 0px;
  top: auto;
  left: 20px;
  z-index: 200002;
  padding: 6px 20px 3px;
  font-size: 16px;
  font-family: Arial;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px -1px 0px rgba(0,0,0,0.25);
  text-decoration: none;
  text-align: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-left-radius: 5px;
  -moz-border-top-right-radius: 5px;
  box-shadow: 0px 0px 9px rgba(0,0,0,0.3) -webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
  box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  background: linear-gradient(center top, #fbb450, #f89406);
  background: -webkit-gradient(linear, center top, center bottom, from(#fbb450), to(#f89406));
  background: -webkit-linear-gradient(#fbb450, #f89406);
  background: -moz-linear-gradient(#fbb450, #f89406);
  background: -o-linear-gradient(#fbb450, #f89406);
  background: -ms-linear-gradient(#fbb450, #f89406);
  background: linear-gradient(#fbb450, #f89406);
  background: -o-linear-gradientcenter (center top, #fbb450, #f89406);
}

The colors will definitely be more complicated, since we are using linear-gradients here.

Let me know if I can be of further help.

Thanks! Rob

Thanks rob,
Dropped that in to the Custom CSS and the Orange Widget appears now as a LONGER BAR all across the bottom much like a footer. It does originate on the LEFT just doesn’t stop.

It appears to be still forcing a right: 20px; from within the program.
Putting right: 1px or right:0px doesn’t remove it.

Color part was easy just alot of lines to change.

Had to comment out line #6
in /plugins/google-language-translator/css/toolbar.css
then it worked. Attempted placement in theme’s custom CSS as well as your’s in the PLUG in and it required this change to move the Widget to the left. Was able to change the colors with the provided code. Maybe a PRO version addition?? Color change for widget and relocation to several locations around the browser?

Hi Rob Myrick how do they translate occur right or left top corner.

Hi demoman2k10,

Thanks for posting your solution here. I’m trying to do the same as you. Can I ask what the content was on line #6 of toolbar css that you commented out? I think I need to do exactly that too but I’m a css novice so want to make sure I comment out the right line.

Any advice appreciated.

Thanks!

Hi everyone,

Thanks so much for using the plugin. I’m sorry that I have been so absent here over months of time.

I have modified the code from above to fix the issue:

#glt-translate-trigger {
  position: fixed;
  bottom: 0px;
  top: auto;
  left: 20px;
  right:auto !important;
  z-index: 200002;
  padding: 6px 20px 3px;
  font-size: 16px;
  font-family: Arial;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px -1px 0px rgba(0,0,0,0.25);
  text-decoration: none;
  text-align: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-left-radius: 5px;
  -moz-border-top-right-radius: 5px;
  box-shadow: 0px 0px 9px rgba(0,0,0,0.3) -webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
  box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  background: linear-gradient(center top, #fbb450, #f89406);
  background: -webkit-gradient(linear, center top, center bottom, from(#fbb450), to(#f89406));
  background: -webkit-linear-gradient(#fbb450, #f89406);
  background: -moz-linear-gradient(#fbb450, #f89406);
  background: -o-linear-gradient(#fbb450, #f89406);
  background: -ms-linear-gradient(#fbb450, #f89406);
  background: linear-gradient(#fbb450, #f89406);
  background: -o-linear-gradientcenter (center top, #fbb450, #f89406);
}

This is off the top of my head. Let me know if it works!

Hi @angelisiorgo,

I will experiment with the floating widget and try and get this CSS code for you. This is definitely an option that I should add soon. I will try and post this by Monday sometime, at latest.

Thanks!

Hi Rob,

Thanks very much for the code. That worked a treat for me and now the translate widget is on the left.

Much appreciated.
Thanks!

Your welcome ??