Donation Widget- Styling

The widget configuration can be accessed from Admin >  Widget Configuration:

Select the widget type and Edit to the right of the widget name you would like to edit:

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 3 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 donation widget, there is an extra option 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.

Pages 2 and 3 will also include text populating the donation amount and your organisation's name.

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.

Below is a list of the most frequently changed elements:

Panels:
.panel-info -class used for each row which contains a panel heading and panel body
.panel-heading - class for the panel headings
.panel-body - class for the panel body

Buttons:
.btn - class for all buttons
.btn-warning - class for the suggestion buttons
.btn-info - class for confirmation button
.donateButtons - class for custom donation prompts
.donateButtons.Active - class for an active donation button

Fields:
.form-control - class for all text fields
.input-group - class for grouped fields
.input-group-addon - class for the attached ‘NZD’ or ‘USD’ to amount fields.

ID to Element:
#divDonationButtons - div ID for suggestion amount buttons
#MainContent_donationAmountPanel - ID for donation amount heading
#divDonationFrequencyButtonsContainer - div ID for donation frequency buttons
#MainContent_divDonationFrequency - div ID for donation frequency dropdown
#MainContent_personalInfoPanel - ID for personal information heading
#addressInfo - div ID for address
#divCard - div ID for payment card info panel
#MainContent_paymentMethodLabel - ID for payment method heading
#TermandCondition - div ID for the terms and conditions section
#MainContent_trComplete - div ID for the confirmation button
#captcha - ID for positionaing the captcha
#btnNextDiv - First Next button
#btnBackDiv - First Back button
#btnNextDiv2 - Second Next button
#btnBackDiv2 - Second Back button

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

> Next, Testing