'no image' Buttons

[Acorn]

I hate the way Xara has just stopped designing components for the web despite adding some powerful innovations to the HTML Filter that generate your website pages.

This is rather noticeable (to me) when an otherwise crisp XDA website falls down over the appearance of its rollover buttons and worse, the NavBars.

The following crib sheet has come about with a lot of nudging to see what can be achieved in creating buttons that are effectively CSS-styling. i have used this for my own site but have had to add the CSS code in manually.
This crib uses a number of techniques that allow the XDA to do the coding for you.

The techniques include:

1. Using a Rounded Rectangle to replace Straight Lines, the Page background Shadow, Ellipses and Circles as it never produces an image, just HTML SPAN code.
2. Using Linear and Circular Fills; again HTML code for Gradients. Multiple stops in the Linear Line are possible.
3. Using a 'no colour' Fill to achieve a Transparency. The design page seems to show this as White but check the Colour Bar and Preview.
4. For Stretch Buttons, changing the Rounded Rectangles to Editable Shapes retains their 'no image' nature.
   
   1. The Xara concept of "Stretches" using linked Names is older than the Xara Designer Pro X application. Hard to describe, yet powerful in its usage.

   2. StretchesYou can use named objects to stretch other named objects, e.g. the text on a button. Both the text and the button are named objects, with the text flagged as stretching the button. When you change the length of the text (for example by typing in more characters), the button automatically resizes to match.
      When you choose Stretches properties, a check box to the right of object names shows those objects you want to stretch. The arrow to the right of the check box shows if the stretching options are set up (solid arrow) or not (hollow arrow). Click the arrow to display the Extend Dialog Box which lets you select those objects from the list of named objects to control the stretching. For each direction you can select if the size changes in the same direction as the controlling object (Extend) or equally from the center (Scale).

Xara - No Image Buttons.xar

• Preview the crib sheet and check the rollover effects.
• Play around with the Named Colours.
• Tweak the Shapes, noting what breaks the 'no image' "rules".
• Alter the wording of "change this text" and view what happens to the box below.
• Add the Name "Button" to the yellow bar and repeat the last operation.
• Move the Text Line around the page..
• Rearrange the Box and Bar with the Tex line to make a "stretch button" (MouseOff layer only).

With patience some very elaborate 'no image' Buttons can be build up with these few techniques.

Acorn

[Acorn]

I neglected to mention:

1. All Groups on a Layer should be set for Web Properties > Image > Group images: Tick Separate images for group members.
2. All Shapes across Layers can only be Soft-Grouped.

Acorn

[Acorn]

An example:



Acorn

[gcellison]

Thanks for the lesson, Acorn! It’s great advice to have more control over the look of the buttons and to maintain the vector quality on export.

A while back, I started making buttons in more or less the same way. I create the rectangle and text on mouseoff, change the shape as you do, then copy them to mouseover, making any desired changes to the appearance.

One thing I noticed is that if you do not deactivate “Underline text links” in the Website tab of Website Properties, a pesky line will show up under the text. You can’t get rid of it! (Sometimes assigning a CSS class specifying no text-decoration works, but sometimes it doesn't). Of course, you may want to have it activated for any links in the site’s text.

While not elegant, the workaround I found does the trick. I clone the rectangle on the mouseoff layer and put the clone directly in front of the text element. I set its transparency to 99.5%, which for Xara is completely invisible… yet it exports as code, not as an image. Finally, I assign the link to the transparent rectangle, rather than the soft group.

The result is that the mouseover functioning of the button still works, the link still works, but there’s no link underline.

(Just to mention: I generally don’t use softgroups. I imagine that if you included the transparent shape in a softgroup, the whole group would probably inherit the link property, so it might not help.)

[Acorn]

Thanks for the lesson, Acorn! It’s great advice to have more control over the look of the buttons and to maintain the vector quality on export.
A while back, I started making buttons in more or less the same way. I create the rectangle and text on mouseoff, change the shape as you do, then copy them to mouseover, making any desired changes to the appearance.
One thing I noticed is that if you do not deactivate “Underline text links” in the Website tab of Website Properties, a pesky line will show up under the text. You can’t get rid of it! (Sometimes assigning a CSS class specifying no text-decoration works, but sometimes it doesn't). Of course, you may want to have it activated for any links in the site’s text.
While not elegant, the workaround I found does the trick. I clone the rectangle on the mouseoff layer and put the clone directly in front of the text element. I set its transparency to 99.5%, which for Xara is completely invisible… yet it exports as code, not as an image. Finally, I assign the link to the transparent rectangle, rather than the soft group.
The result is that the mouseover functioning of the button still works, the link still works, but there’s no link underline.
(Just to mention: I generally don’t use softgroups. I imagine that if you included the transparent shape in a softgroup, the whole group would probably inherit the link property, so it might not help.)

I understand where you are coming from. I always Untick Underline Text links and Common website link colours so I have fuller control. That control is to specify the pseudo link settings as a class name style so I can be as specific as I need.

The transparent shim is a good approach but I always misplace them!

Acorn

[gcellison]

I understand where you are coming from. I always Untick Underline Text links and Common website link colours so I have fuller control. That control is to specify the pseudo link settings as a class name style so I can be as specific as I need.

The transparent shim is a good approach but I always misplace them!

Acorn

Indeed, the transparent shim is tricky to remember sometimes. It can end up far away from the button if you're not careful.

Yours is an alternate that I've considered as well. The only thing is making the links visible in other places if the Underline text links is deactivated, e.g., in the text. I suppose you have to use character text styling to give it the underline and / or distinct color. Or some probably avoid links in text blocks altogether.

[Egg Bramhill]

The transparent shim is a good approach but I always misplace them!

Helps if you make them a named colour like er.. 'shim'. you can find them easier then by using the names gallery.

[gwpriester]

Something like this is worth 100 of the new features in DPX 17, none of which I can even remember.

If anybody from Xara is listening, basics, basics, basics. Fix what is already there instead of adding features that no one will remember or use.

One of the weakest features in the website creation tools is the navigation bars. Especially the sub-menus, which look totally amateurish.

[Acorn]

Helps if you make them a named colour like er.. 'shim'. you can find them easier then by using the names gallery.

I was blind and now I can see.

I also flip to Outline (with Blend steps), especially using New View at magnification.

You can also use a "Shim" layer and Soft-group a less transparent Clone and have that visible when designing and hidden for publish.

There are so many approaches; layers are powerful.

Acorn