translate - FORUM - Ning Creators Social Network2024-03-28T23:20:55Zhttps://creators.ning.com/forum/topics/feed/tag/translateQuick Hack of Language Translator on Ning Words and Placement (code included)https://creators.ning.com/forum/topics/quick-hack-of-language-translator-on-ning-words-and-placement-cod2019-03-21T20:00:43.000Z2019-03-21T20:00:43.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>If you're like me you believe your top of screen real estate to be very important.. and adding google translate can occupy a little too much, especially for mobile users. This is why the default google translate element is too long. Here is how we hack the size and the words. To be clear this is what we are changing:</p><p><a href="{{#staticFileLink}}1542569030,RESIZE_710x{{/staticFileLink}}" target="_blank" rel="noopener"><img class="align-center" src="{{#staticFileLink}}1542569030,RESIZE_710x{{/staticFileLink}}" width="196"/></a></p><p>In order to shorten this to something less long insert the following code into your custom code bottom of page section at the end.</p><p><script><br/>x$(document).ready(function(){<br/> x$('#google_translate_element').bind('DOMNodeInserted', function(event) {<br/> $('.goog-te-menu-value span:first').html('Translate');<br/> });<br/>})<br/></script></p><p>and you'll get this: <a href="{{#staticFileLink}}1542629465,RESIZE_180x180{{/staticFileLink}}" target="_blank" rel="noopener"><img class="align-center" src="{{#staticFileLink}}1542629465,RESIZE_180x180{{/staticFileLink}}" width="131"/></a></p><p> </p><p>I even figured out that you can use an emoji in place of translate like so: <a href="{{#staticFileLink}}1542658891,RESIZE_180x180{{/staticFileLink}}" target="_blank" rel="noopener"><img class="align-center" src="{{#staticFileLink}}1542658891,RESIZE_180x180{{/staticFileLink}}" width="72"/></a></p><p> </p><p> </p><p>Placement of Translate element is also very important and after many trials this is where I have decided it is best placed for both desktop and mobile and this is the CSS I used. Place this inside the Design Studio advanced CSS (dark theme for translate element optional, obviously):</p><p>#google_translate_element {<br/> position: absolute;<br/> top: 5px;<br/> z-index: 99999;<br/> left: 10px;<br/>}</p><p>@media (max-width: 667px) {<br/> #google_translate_element {<br/> top: 55px;<br/> right: 160px;<br/> }<br/>}</p><p><br/>/* start dark google translate theme */<br/>div#google_translate_element div.goog-te-gadget-simple {<br/> background-color: #333;<br/> border-color: #222;<br/>}</p><p>div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {<br/> color: #ccc;<br/>}</p><p>div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {<br/> color: #eee;<br/>}<br/>/* end dark google translate theme */</p><p> </p><p> </p><p><a href="https://creators.ning.com/members/JFarrow" target="_blank" rel="noopener">Let me know</a> if you are having challenges with your Translation of Ning communities.</p></div>How to add Google Translate to your Ning site.https://creators.ning.com/forum/topics/how-to-add-google-translate-to2010-08-26T17:26:52.000Z2010-08-26T17:26:52.000Zgabet123https://creators.ning.com/members/gabet123<div><p>Greeting everyone,</p>
<p> </p>
<p>I run a site called <a rel="nofollow" href="http://hodinfo.com" target="_self">HODINFO</a>  I have many members from other countries and have been looking for a good translation service that will continue to translate between pages of my site. Attached is the code required to make this happen. All you have to do is put a text box on the right side of your network so that it will appear on all pages. Then click the attachment below called googletranslate.txt right click and view source then copy and paste the code into that text box via the html section and hit save. Viola you now have google translate on your network.</p>
<p> Update 06/26/2012 just use the code between the lines.</p>
<p>-------------------------------------------------------</p>
<p><div id="google_translate_element"></div><br />
<script type="text/javascript"><br />
function googleTranslateElementInit() {<br />
new google.translate.TranslateElement({<br />
pageLanguage: 'en'<br />
}, 'google_translate_element');<br />
}<br />
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"><br />
</script></p>
<p>-------------------------------------------------------</p>
<p>Update 07/29/2012</p>
<p>Add Google translate to Ning Mobile <a href="http://creators.ning.com/forum/topics/ning-mobile-and-google-tranlate">http://creators.ning.com/forum/topics/ning-mobile-and-google-tranlate</a>   Awesome work <a href="http://creators.ning.com/profile/MistySummers">Misty Summers</a> !!!</p>
<p>Cheers,</p>
<p> </p>
<p>Gabet123</p>
</div>