Event widget- Custom CSS

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

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/