Navigation buttons do not zoom properly when previewing page

[techenthused73]

You can also cheat and add the following to the website html code to force the high resolution images to be displayed:

<script>
xr_htm_orig=xr_htm;
xr_htm=function(){var o=xr_autoscale;xr_autoscale=true;xr_htm_orig();xr_autoscale=o;};
</script>

This requires to set the retina option explained by Gary in post 8.
And if you are familiar with the registry you can also increase the resolution that Xara uses to export high resolution images. (Although this will increases file sizes and loading times.)
You can find the key in HKEY_CURRENT_USER\Software\<Optional Wow6432Node if you have installed 32 Bit Xara on 64 Bit Windows>\Xara\<your product>\<version>\Options\Filters\HTMLHiResBitmap Dpi.

What do I change in the key? Do I need to do all three things listed above or just one or two.

Thanks for the reply.

[techenthused73]

You can also cheat and add the following to the website html code to force the high resolution images to be displayed:

<script>
xr_htm_orig=xr_htm;
xr_htm=function(){var o=xr_autoscale;xr_autoscale=true;xr_htm_orig();xr_autoscale=o;};
</script>

This requires to set the retina option explained by Gary in post 8.
And if you are familiar with the registry you can also increase the resolution that Xara uses to export high resolution images. (Although this will increases file sizes and loading times.)
You can find the key in HKEY_CURRENT_USER\Software\<Optional Wow6432Node if you have installed 32 Bit Xara on 64 Bit Windows>\Xara\<your product>\<version>\Options\Filters\HTMLHiResBitmap Dpi.

I don't see the retina option in web properties.

[Acorn]

Almost there but not quite - I've set all the background colours to solid and the shadow colours to white and shadow lengths to zero, but there's a rectangular "box" behind each menu button that casts a small shadow below it.
Attachment 118780

There isn't a direct control for this.

You can change the CSS directly in Xara.

You need to look for the mentions of "box-shadow" in this selector:

#menu-bar .active a, #menu-bar li:hover > a {
background: #FFFFFF;
color: #FF0000;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);You can tweak, delete or comment (/* ... */) the lines out.

Acorn

[Acorn]

I don't see the retina option in web properties.

Web Properties > Website > Other - Retina (hi def) images.

Acorn

[letsgofishing]

There isn't a direct control for this.

You can change the CSS directly in Xara.

You need to look for the mentions of "box-shadow" in this selector:

#menu-bar .active a, #menu-bar li:hover > a {
background: #FFFFFF;
color: #FF0000;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);You can tweak, delete or comment (/* ... */) the lines out.

Acorn

Perfect! Many thanks Acorn

[siran]

Just read the following on the Web Designer Features page:
"Premium includes other extra features for power users, such as support for Retina graphics, embedded fonts..."
So I'm afraid you won't be able to use that trick.

[techenthused73]

Ok. Yes I don't have premium. Perhaps I will upgrade to get those features.