Overview

The Styling section allows you to customise the appearance of your Donation Widget so it better matches your organisation's website.

You can use one of the built-in themes and customise the colours and corner rounding, or upload your own CSS file for more advanced customisation.

Tip: Styling can make a big difference to how seamlessly the Donation Widget fits into your website. You can start with one of the built-in themes and make further adjustments as needed.

Open Styling

1. Go to Admin > Widget Configuration.
2. Find the Donation Widget you want to edit.

3. Select Edit next to the widget name.

4. Select Styling from the configuration options on the left.

Themes

Vega provides three built-in themes that offer different layouts for your Donation Widget.

Select the theme that best suits the design you want to achieve.

Once you have selected a theme, you can further customise it using the Primary Colour, Secondary Colour and Border Radius settings.

Tip: The theme controls the overall layout and appearance of the widget, while the settings below allow you to customise it to better match your organisation's branding.

Step 1: Select a Theme

Select one of the available themes to preview the different layout options.

The selected theme will determine the overall arrangement and styling of the elements within the widget.

Once you are happy with your selection, continue with the colour and border settings below.

Step 2: Choose Your Colours

The Primary Colour and Secondary Colour settings allow you to customise the colours used throughout the selected theme.

Select the colour box to open the colour picker.

You can:

• Select a colour from the colour picker.
• Use the arrows to adjust the colour.
• Enter a Hex colour code directly into the text box.

Primary Colour

The Primary Colour replaces the darker blue used in the standard theme.

Secondary Colour

The Secondary Colour replaces the lighter blue used in the standard theme.

The exact areas affected will depend on the theme you have selected.

Tip: If your organisation has specific brand colours, you can enter the Hex codes directly to match your website and other branded materials.

Step 3: Adjust the Border Radius

The Border Radius controls how rounded the corners of elements within the Donation Widget appear.

A lower number will create more squared corners, while a higher number will create more rounded corners.

For example, setting the Border Radius to 50 will create significantly rounded elements throughout the widget.

This can be useful when matching the Donation Widget to a website that uses rounded buttons, fields and panels.

Step 4: Save Your Styling

Once you have selected your theme and customised the colours and border radius, save your changes.

When a theme is selected and saved, Vega automatically creates a CSS file using your selected styling options.

The CSS file will then be displayed in the CSS File section.

If you remove the linked CSS file and no theme is selected, the widget will return to its original default styling.

Extra Options

The Extra Options section provides additional styling functionality for multi-page Donation Widgets.

Multi-page header

If you have enabled the Multi-page option under Form Options, you can display a header showing icons for the different stages of the donation process.

For example, the widget can display the different stages as the donor moves through the form.

Pages 2 and 3 will also display information about:

• The donation amount.
• Your organisation's name.

Tip: The multi-page header is only relevant when the Multi-page option has been enabled under Form Options.

 

Upload Your Own CSS

For more advanced styling, you can upload your own CSS (Cascading Style Sheet) file.

CSS allows you to customise individual elements of the Donation Widget beyond the options available in the built-in themes.

To upload a CSS file:

1. Select the grey box displaying the current CSS file.
2. Select Click here or drag file to upload.
3. Select your CSS file, or drag it into the upload area.
4. Save your widget.

Important: CSS is an advanced customisation option. If you are not familiar with CSS, we recommend working with your website developer or IT/web team.

Common Element IDs

CSS can also be used to target specific elements of the Donation Widget using their ID.

Example: Hiding an Element

CSS can be used to hide elements that you don't want displayed on the Donation Widget.

For example, if you are using an Advanced Configuration rule in the background but don't want the selection displayed to donors, you can use:

#MainContent_divCustomAttributesPanel.row.panel.panel-info {
    display: none;
}

The functionality will continue to work, but the section will no longer be visible to the donor.

Tip: When using custom CSS, make sure you test the widget after making changes to ensure the styling works correctly across the different stages of the form.

Need help with CSS? 

CSS can be used to make extensive changes to the appearance and layout of the Donation Widget. If you need help creating or editing a CSS file, you may wish to work with your IT team, web developer or someone who manages your website.

For general information about CSS, see W3Schools – CSS Tutorial.

Please Note: Custom CSS is organisation-specific customisation. Vega can provide the available classes and element IDs, but creating and maintaining your custom CSS may require assistance from your web developer or IT team.

Troubleshooting 

❓My styling changes aren't showing

Check that:

• You have saved the widget after making your changes.
• The correct theme is selected.
• The CSS file is still linked under the Styling section.
• Your uploaded CSS file contains the correct CSS rules.
• Your browser is not displaying a cached version of the widget.
•  

❓My widget has returned to the default styling

Check whether the CSS file has been removed and whether a theme is still selected.

If the linked CSS file has been removed and no theme is selected, the widget will return to its default styling.

❓My custom CSS isn't working

Check that:

• The CSS file has uploaded successfully.
• The class or ID you are targeting is correct.
• The CSS syntax is valid.
• Another CSS rule is not overriding your customisation.

If you are unsure how to create or troubleshoot CSS, we recommend asking your website developer or IT team for assistance.

> Next, Testing

“Some content in this article may have been developed with the assistance of AI tools and reviewed by staff.”