Shape

Shapes are elements in Websitepainter which resemble different graphical layout elements, like buttons, areas, sections, windows etc.

Creating a Shape

By using the 'Shape', 'Gradient Shape' or 'Transparent Shape' entry of the Toolset or the menu command 'Insert -> XXX shape', you can place shapes on the website.

You can customize the appearance of the shape using the property window. Note: For a shape, an image will always be generated for the HTML code. If you only need to fill a rectangular area with a color and a border, it's less resource consuming to simply create a text element, delete its text and change its background and border properties.

Shape with Text or Hyperlinks

You can click into a shape and start typing. The text will be displayed centered in the shape, which is useful to create buttons. Additionally, it is possible to create a hyperlink for the shape, so that the user is able to click on the shape and for example open a new page. Simply select the shape, right->click and select 'Insert Hyperlink'.

If you want the shape have a different color when the mouse cursor moves over it (which is desirable sometimes for hyperlinked shapes), simply select the 'UseHoverStyles' checkbox in the property window of that shape and choose some colors. Hover styles will not be shown in the editor, simply click 'Publish -> Preview' to test them out.

Properties

This component supports several background modes (Color, Image, Gradient), changeable by selecting the property 'BackgroundMode'. It also supports several border modes. The background will only be visible if the image file cannot be loaded or the image is transparent.

Other supported properties are:

FillMode: How to fill the shape, either via Gradient, Color or an Image file
GradientStyle: If the fillmode is 'Gradient', you can select the style of the gradient here. Supports 'horizontally', 'vertically' and 'web2.0'.
DarkeningFactor: When the FillMode is 'Gradient' and the GradientStyle is 'Web2.0', it is possible to change the brightness of the color here. Choose any value between 0 and 100, 0 for very bright.
Transparency: A value between 0 for opaque and 100 for 100% transparent
UseHoverStyles: If you want the shape have a different color when the mouse cursor moves over it (which is desirable sometimes for hyperlinked shapes), simply select the 'UseHoverStyles' checkbox in the property window of that shape and choose some colors. Hover styles will not be shown in the editor, simply click 'Publish -> Preview' to test them out.