The Membership widget is a powerful tool for managing membership subscriptions and renewals.
You can create and edit widgets under Admin > Widget Configuration:
Within the widget configuration page, we will see the types of widgets available. We can create new ones (click the 'Create Membership Widget' button) or edit any existing ones (find the widget you want to edit in the Widget Name list and click the 'Edit' button next to it):
This article will detail the settings under Styling. You can click the links below to read about other settings in the membership widget:
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 membership widget, there is an extra option available to hide the donation option. This will remove the donation and total elements on the widget and only show the membership amount.
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:
Button:
.btn-info - class for the submit button
Fields:
.form-control - class for all text fields
.input-group - class for grouped fields
.input-group-addon - class for the attached ‘NZD’ or ‘AUD’ to amount fields.
ID to element:
#ShowPhone - div ID for the phone number
#ShowEmail - div ID for the email
#addressInfo - div ID for the address info section
#FinancialDetails - div ID for the gift a membership tick box
#GiftSub - div ID for the gift a membership section
#divCard - div ID for the payment section
#MainContent_trComplete - div ID for the submit button
#TermandCondition - div ID for the terms and conditions section
For more information about CSS files and how to create your own please visit: https://www.w3schools.com/css/
Comments
0 comments
Please sign in to leave a comment.