Style properties

You change how a control looks using the Styling Assistant, which can be found in its Properties tab under Control Style.

The Styling Assistant will show basic properties for that control. The available options will vary depending on the control's type.

Here, you can set a control's width and height, its background colour, border, padding and margin.

These properties will generate the appropriate CSS for you when the form is run.

Just like with CSS, child controls will inherit styling properties from its parent unless overwritten with its own settings.

Steps

Select a panel control on your page. Open its Styling Assistant by selecting Control Style in its Properties tab.

Change the panel's width to have a specific width of 300px, and a height of 200px.

Set the panel's background colour to blue (#3366FF). Give the panel a 2px Solid black (#000000) border on all sides. Add 10px of padding to all sides. Run the form to see how it looks.

Make the panel a Vertical Box with 10px gap between each control. Remember, these properties are under Layout Type.

Add 3 text controls inside the panel, with text News Items, Item 1 and Item 2. Change the panel's Text colour to white (#FFFFFF). Notice how all of the text controls inherit the colour from its parent.

Select the News Items text control, and open its Styling Assistant. Set its text to Bold, text size to 1.5em and its text colour to orange (#FF9900). Notice how these properties override any properties set from the parent panel.

Open the panel's Advanced Properties in its Styling Assistant. Select the Enable Local Setting option, and add the following line of CSS to the Code tab:

box-shadow:10px 10px 5px #3B5900;

This will add a box shadow to the panel. This will not show in the WYSIWYG panel, but will be display when you run the form.