Post by Retread on Aug 3, 2019 17:36:21 GMT -8
I've removed the attachments with the pbp files from this Thread.
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.
Restructured CSS to allow for a single array of three radio buttons to select the Styling mode.
Styling tab
Components
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.
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:
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
Added dropdowns for selection of Gradients and Border style.
Styling Controls
Components (Global Header)
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
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
Components
<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.
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:
<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
Components (Global Header)
<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>