Google Translator Tool in Xara error

[Miramar]

Hi!
After many attempts I´ve managed to get running Google Translator in Xara.The problem is that it erases all background on page, only text is OK.
How to solve that issue?

[Acorn]

Hi!
After many attempts I´ve managed to get running Google Translator in Xara.The problem is that it erases all background on page, only text is OK.
How to solve that issue?

Post your design file for a look,
Acorn

[Miramar]

Original site to translate www.vinslov.info with wanted background
Planespotting.se (our testsite at the moment) shows what we managed to do and what changed on the site
Thanks!

[Miramar]

Original site to add translation to is www.vinslov.info where the wanted background works fine.
On testsite www.planespotting.se we managed to get translation widget on place but background disappeard.
Thanks!

[Acorn]

No, I don't want to see what you have published, we need to view the design so we can check how you have set up the Google Translate code.

In the meantime, is it possible you dropped the Pasteboard colour onto the Page background and the Pasteboard background?
Try dragging a colour from the colour control bar, across the bottom, directly onto your Page background.

Acorn

[Miramar]

test.xar

Does this help u?

[steve.ledger]

No problems here using the translate widget. Background is no erased.

► http://xara-users.info/gootrans/

The biggest issue with using this widget is that many translated results the text will overflow [not wrap] because Xara HTML is absolute fixed position. Text areas are not flexible,

[steve.ledger]

test.xar

Does this help u?

Your page background disappears even without any google code.

[1] Lock the Page background layer
[2] Right-click the page background and select 'Reset'
[3] Drag and drop a colour to the page background.

This code for the widget:

 <div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'sv', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
        
 <meta name=”google-translate-customization” content=”17fe407db27c713c-e8e709090040b917-g4cb3386767a8afec-1b”></meta>

I added this to the HTML Code (head) of the Website [tab] in Web Properties


Now works fine.

[Acorn]

Your test.xar opens up in Chrome and Firefox with two Translate buttons.
You have two areas of code with DIV tags in the HEAD of your page:

<div id="google_translate_element"></div>

.

In the Web Properties > Page > HTML code (head), you have a DIV tag with:

<div class="fb-share-button" data-href="http://www.vinslov.info" data-layout="button_count"></div>

I think this should be in the HTML code (body).

I removed the page shadow in Page Options and Previewed it in Chrome: no page background and the Translate button appears.
When I delete the Rectangle in the Page Background, on Preview the Translate button disappears and the Page background is there.

So on checking the Head of the rectangle, you have put the translate code there:

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

Doing this replaces the rectangle so it never displays.

Remove this into a small rectangle at the top of your page and put the detail into the HTML code (body).

Acorn

Acorn

[steve.ledger]

No need for a placeholder, Acorn.