Permanetly change the close.png icon

[Egg Bramhill]

I dislike the default close icon that Xara uses to close a pop-up layer if Close Automatically is unchecked.

I can always replace it in the index_htm_files folder, however each time I republish it will revert back to the Xara default.

How would I change it permanetly by overwriting it in Xaras root file. Can anyone point me in the right direction please?

[Chris M]

I find using the 'layer_name(lock)' method, quick, simple and infinitely customisable.

Create layer and name it whatever, but add (lock) at the end of the name
Add content to your layer with the addition of a closing button, shape, text etc
Select your closing button
Go to Utilities > Web Properties > Link (tab) > Link To Web Or Email Address (radio Button) and type popup:close

On MouseOff, select the opening button, shape, text etc. to open the layer
Go to Utilities > Web Properties > Link (tab) > Pop-Up Layer (radio button) and use the drop-down menu to choose your layer
Under Settings, leave Close Pop-Up Automatically ticked and set any Transitions you may want

This way you can use a different closing graphic for each layer. Example below

>>> Menu Lock.web <<<

[Egg Bramhill]

Excellent Chris. Far better than changing the default icon. Thank you.

[Acorn]

Egg, a long time ago I just hide the close icon.

In HTML Code (body):

<script>
$('img.xr_ap[src*="close.png"]').hide();
</script>

I then put a shape with popup:close on the page.

This way the close action can appear anywhere.

Acorn

[Egg Bramhill]

Two ways to do it now ;-) Cheers Acorn.

[Acorn]

Egg, sorry - three:

jQuery - customised Close icon.xar

The Method

• Design a 32px close icon
• Group if needed
• Add Name of 'closer'
• In Web Properties > Website Code(body), put:

<script>

$('img.xr_ap[src*="close.png"]').attr('src', $('#closer').attr('src').replace('@2x', ''));

</script>

The @2x part ensures any Retina is omitted from your closer icon, otherwise it will double in size.
The jQuery seeks out all Xara close icons and replaces each with the custom one across all layers.

It would be very simple to include CSS to pulse or rotate non-circular shpaes to make you closer distinctive.

It requires jQuery, although it could be coded to not use it.
Drag the closer icon off the page and toy restore the Xara one.

I also used a Reveal web animation to prevent the close icon master shape form being visible.
If too confusing, just hide it under something else.

Acorn

[Egg Bramhill]

That works excellently too Acorn. Added to my goodies folder along with Chris's