Donation Widget- More Options

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 More Options from the configuration options on the left-hand side.

In this section you have the ability to 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 and further customisation available here:

Themes:

Vega offers 4 themes which you can use to easily customise the style and format of your donation widget.

When one of these themes are selected, the corresponding CSS file will be added to your widget to edit the colour and style of your widget inline with the preview shown.

Custom CSS:

Select Theme Color

When you select your theme above, you can now select your brand colour to make sure this looks seamless on your website.

If you click the colour selection shown above you can browse all available colours or enter the RGB for your known colour. You can also enter the Hex number directly into the text box. Once you click Save this will keep your chosen theme but update the headings and buttons to your chosen colour

Upload your own 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