Easy Google Translate [Beta]

[Retread]

I've removed the attachments with the pbp files from this Thread.

I submitted this to the ProBoards Library and it was rejected.  Apparently the external resource (google widget) doesn't work asynchronously.  I've removed this from my forum and recommend that anyone using this does the same.

-- Retread

Disclaimer: This is an Alpha version. Buyer beware!


This plugin places the Google Translate widget in the Global Header along with text and some styling.



Controls are provided to change the text and modify the styling of the text and box.

Latest Version:

Restructured CSS to allow for a single array of three radio buttons to select the Styling mode.

Styling tab

SPOILER: Click to show

Components

SPOILER: Click to show

<style>
   .translate-box {
       background-image: url('//storage.proboards.com/forum/images/gradients/light.png');
       background-repeat: repeat-x;
       background-position: left center;
   }
   .transbox-preset {
       font-family: "Geneva";
       font-size: 11px;
       color: #202020;
       background-color: #4fb5fc;
       border-style: ridge;
       border-width: 5px;
       border-color: #4fb5fc;
       border-radius: 3px;
       padding: 3px;
       text-align: center;
       margin-bottom: 10px;
   }    
   .transbox-colors {
       font-family: "Geneva";
       font-size: 11px;
       color:#$[plugin.settings.txt_color];
       background-image: url('//storage.proboards.com/forum/images/gradients/light.png');
       background-color: #$[plugin.settings.bkground_color];
       border-style: ridge;
       border-width: 5px;
       border-color: #$[plugin.settings.brder_color];
       border-radius: 3px;
       padding: 3px;
       text-align: center;
       margin-bottom: 10px;
   }
   .transbox-full {
       font-family: "$[plugin.settings.font_family]";
       font-size:$[plugin.settings.font_size];
       color:#$[plugin.settings.text_color];
       color:$[plugin.settings.text_color_name];
       background-image: url('$[plugin.settings.background_image]');
       background-image: $[plugin.settings.gradients];
       background-color: #$[plugin.settings.background_color];
       background-color: $[plugin.settings.background_color_name];
       border-style: $[plugin.settings.border_style];
       border-width: $[plugin.settings.border_width];
       border-color: #$[plugin.settings.border_color];
       border-color: $[plugin.settings.border_color_name];
       border-radius: $[plugin.settings.border_radius];
       padding:$[plugin.settings.padding];
       text-align:$[plugin.settings.text_alignment];
       margin-bottom: $[plugin.settings.bottom_margin];
   }  
   .translate-box > div {
       float: left;
   }    
</style>

<div class="translate-box ui-helper-clearfix $[plugin.settings.mode_switch]">
   <div id="google_translate_element"></div>
   <div style="margin-left:10px;">$[plugin.settings.text_for_google_box]</div>
</div>

<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

---

---

---

Previous versions:

---

This is v0.0.1 it's a mess because I forgot to save the default values. Don't even think of using it.

SPOILER: Click to show

If one of the Plugin writers could look this over and give me some advice on any wrong turn I have made, I would appreciate it.

btw, it was necessary to put a # preceding the color variables. Is there a better way to do that?

Components, Global Header:

SPOILER: Click to show

<style>
   .translate-box {
       font-family: "$[plugin.settings.font_family]";
       font-size:$[plugin.settings.font_size];
       color:#$[plugin.settings.text_color];
       background-image: url('$[plugin.settings.background_image]');
       background-repeat: repeat-x;
       background-position: left center;
       background-color: #$[plugin.settings.background_color];
       border-style: $[plugin.settings.border_style];
       border-width: $[plugin.settings.border_width];
       border-color: #$[plugin.settings.border_color];
       border-radius: $[plugin.settings.border_radius];
       padding:$[plugin.settings.padding];
       text-align:$[plugin.settings.text_alignment];
       margin-bottom: $[plugin.settings.bottom_margin];
   }
   .translate-box > div {
       float: left;
   }
   
</style>

<div class="translate-box ui-helper-clearfix">
   <div id="google_translate_element"></div>
   <div style="margin-left:10px;">The Google Translate function has been provided as a courtesy/convenience.<br/>However, we respectfully insist that all posts be made in English.</div>
</div>

<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

I installed the plugin on a different forum. I forgot to save the defaults. Ugh!

---

Here's version 0.0.2

Also added some fields where the colors can be defined by name (or rgb values).

And I moved the text and text alignment to a different tab.

---

Version 0.0.3

Changed text alignment to a dropdown and added notes on using the color name fields.

)

---

v 0.1.0:

Now with 3 modes of styling

• Preset
• Change Colors Only
• Full Controls

Added dropdowns for selection of Gradients and Border style.

Styling Controls

SPOILER: Click to show

Components (Global Header)

SPOILER: Click to show

<style>
   .translate-box {
       font-family: "Geneva";
       font-size: 11px;
       color:#$[plugin.settings.txt_color];
       background-image: url('//storage.proboards.com/forum/images/gradients/light.png');
       background-repeat: repeat-x;
       background-position: left center;
       background-color: #$[plugin.settings.bkground_color];
       border-style: ridge;
       border-width: 5px;
       border-color: #$[plugin.settings.brder_color];
       border-radius: 3px;
       padding: 3px;
       text-align: center;
       margin-bottom: 10px;
   }

   .rumpelstiltskin $[plugin.settings.mode] {
       font-family: "$[plugin.settings.font_family]";
       font-size:$[plugin.settings.font_size];
       color:#$[plugin.settings.text_color];
       color:$[plugin.settings.text_color_name];
       background-image: url('$[plugin.settings.background_image]');
       background-image: $[plugin.settings.gradients];
       background-color: #$[plugin.settings.background_color];
       background-color: $[plugin.settings.background_color_name];
       border-style: $[plugin.settings.border_style];
       border-width: $[plugin.settings.border_width];
       border-color: #$[plugin.settings.border_color];
       border-color: $[plugin.settings.border_color_name];
       border-radius: $[plugin.settings.border_radius];
       padding:$[plugin.settings.padding];
       text-align:$[plugin.settings.text_alignment];
       margin-bottom: $[plugin.settings.bottom_margin];
   }
   .rumpelstiltskin $[plugin.settings.enable_controls] {
       font-family: "Geneva";
       font-size: 11px;
       color: #202020;
       background-image: url('//storage.proboards.com/forum/images/gradients/light.png');
       background-repeat: repeat-x;
       background-position: left center;
       background-color: #4fb5fc;
       border-style: ridge;
       border-width: 5px;
       border-color: #4fb5fc;
       border-radius: 3px;
       padding: 3px;
       text-align: center;
       margin-bottom: 10px;
   }
   
   .translate-box > div {
       float: left;
   }

   
</style>

<div class="translate-box ui-helper-clearfix">
   <div id="google_translate_element"></div>
   <div style="margin-left:10px;">$[plugin.settings.text_for_google_box]</div>
</div>

<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

[Nscalerr 🐺]

**My commnet on this would be that the CSS should be placed in the CSS section in the components area, not in a style. You don't need the <style></style> tags when you use the sections in the components area.

It looks good and works well.


** This is all based on the way the code is posted in the spoiler tags, disregard if you have actually placed the code in the seperate sections.

[Retread]

Aug 3, 2019 21:25:31 GMT -8 Nscalerr 🐺 said:

**My commnet on this would be that the CSS should be placed in the CSS section in the components area, not in a style.

I tried that at first but it wouldn't let me select the variables from the list and use the insert button when I place my cursor in the CSS box.

Is there some trick to that?

[Nscalerr 🐺]

After looking at your second version, I can see what you mean. I have not tried having CSS that can be changed that way, I just work it all out in the component area and not have it able to be changed.

This is my affiliate table plugin, which includes the translate / search table on my forum. Don't steal anything from it, or at least ask first.
Affiliate Table.pbp (24.53 KB)

[Lynx]

Retread,

I think one thing I'd change would be your Text Alignment on your Text tab to be a dropdown rather than a field - as that will keep typos from sneaking in and people asking why it's not working. The bottom field is one I added so you can see (I removed it back out to prevent conflicts):

[Retread]

Good call, Lynx.

I did that and added some notes at the bottom of the styling page regarding the use of the color name fields.

[Retread]

Okay friends, this lily is fully gilded. If I can convince a few people to put their hands on this and try it out then supply some feedback, if there are no problems with it, I'll contact Todge about the correct protocol for uploading to the ProBoards Library.

[Nscalerr 🐺]

I now have version 3 installed in my other second forum.

[Retread]

Nscalerr 🐺, v 0.0.3 does exactly the same thing as all the other versions but the Styling tab in v 0.1.1 has been refined. If you have a few moments to import that to your other forum and take a look at the styling tab and give me your opinion, I'd appreciate the feedback.

[Nscalerr 🐺]

Since I already have it on my main forum, I won't be installing it there, (it won't actually work btw).

My main feedback is the same as from Lynx, the left, center and right alignment needs to be in a drop down list, or you may have problems in the future from people mistyping and then coming to complain when it doesn't work. With a drop down list they can only choose from what is there and not make any typos.

Other than that it is easy to use and works well.

Full control was selected for this version.

[Retread]

Aug 6, 2019 22:27:52 GMT -8 Nscalerr 🐺 said:

My main feedback is the same as from Lynx, the left, center and right alignment needs to be in a drop down list

I had corrected that in an earlier version but somehow that issue returned.

Fixed now in the latest version in the OP.

[Retread]

I've updated the OP.

My apologies to all for any inconvenience I might have caused.