Event widget- Styling

The widget configuration can be accessed from Admin > Widget Configuration, once your event has been created in Engage and the option to Create a Widget is ticked:

Click the Event type to see your existing event widgets with the option to edit any of these and open the configuration:

Select Styling from the configuration options on the left-hand side.

In this section, you can customise the style of your widget; this can have a real impact on the design and continuity when added to your website. There are set themes, customised by your colour selection, extra options to include, or the option to uplaod your own CSS file.

Themes:

There are 2 themes available for different layout options, which can then be customised further using the colour and border-radius options shown below.

Click the colour block to browse colours, or use the arrows to change colour coding. You can also enter the Hex number directly into the text box.

The primary colour will replace the darker blue, and the secondary colour will replace the lighter blue, as shown in each of the themes. 

The border radius controls the rounding of the corners of the elements within the widget. For example, setting the border radius to 50 will update the widget as shown below:

When a theme is selected and saved, a CSS file is created using your custom options, and this will then be displayed as the CSS file linked:

If the linked CSS file is removed and no theme is selected, the widget will default back to its initial state.

Extra Options:

In the event widget, there are 2 extra options available to include a header showing icons for the different stages within a multi-page widget (to set your widget to multipage, this can be turned on within Form Options) and to hide the donation option.

Upload CSS:

Another option here is to upload your own CSS file. By clicking the grey box with the current file or the text "Click here or drag file to upload"

CSS (Cascading Style Sheet) is a powerful tool that can be used for a lot of customisation to this widget.

For more information about CSS files and how to create your own please visit: https://www.w3schools.com/css/