Registration Site Customisation
Jomablue’s registration site can be fully customised using JSON-based theme variables. These variables control the visual design of every element, from background colours to button styles, allowing your registration experience to reflect your brand precisely.
Background Images
When using background images, it is recommended that you remove the following default values from the registration customisation JSON to ensure the image displays correctly:
background-color
container-background-color
footer-background-color
header-background-color
Colours
Colours are always expressed in hexadecimal format (e.g., #007fc4).
Custom Fonts
To use custom fonts:
- Host your font files (for example, .ttf files) in a publicly accessible location.
2. Reference them within the custom-font-faces variable in your JSON configuration.
Example:
Once defined, the font family can be used in other variables such as body-font, title-font, or heading-font.
General customisation
A number of theme variables are available for general customisation across the entire Registration experience; that is, they will affect multiple elements across multiple views. These include:
Background-color
This variable allows for customisation of the background of the registration site. Note that this will apply to all views across the registration experience. For example, this variable sets the background to be white across the entire experience:
Body-font and body-text-color:
These variables allow for customising the font and colour used in the "body" text across the entire registration experience. This includes any non-heading or non-title text, such as:
- Product/Item descriptions
- Site descriptions
- Prices
These variables allow for customising the font and colour used in the "body" text across the entire registration experience. This includes any non-heading or non-title text, for example:
For example, in this screenshot, the body-text-color variable is set to bright green:
Heading-font and heading-text-color:
These variables allow customising the font family and text colour of heading text across the entire registration experience. This includes items such as:
- Product names/headings
Item names/headings
button-default-background-color and button-default-text-colour:
These variables allow setting the background colour and text colour of secondary buttons throughout the UI (e.g., the "Apply" button in the coupon pane):
Note that this should not be confused with primary buttons (e.g., the Add to Order button), which use a separate set of variables to be defined below.
card-background-color and card-border-radius:
These variables allow for changing the background colour and border radius of cards (e.g., boxes used to display content).
Example:
In the above example, the following variables are used:
container-background-color and container-horizontal-padding:
These variables define the page container, which is where all the content in the page is displayed. This variable allows customisation of the container's background colour and horizontal padding, if desired. For example, the container here is coloured light blue:
Note that container settings will not affect the header image or the page footer.
Danger-background-colour and Danger-text-colour
The danger-background-color and danger-text-color variables are used to point out where important action needs to take place or if certain errors occur. For example, the error message and the "Action Required" text in the image above.
The variables available are:
danger-background-color: the background colour of the error message pop-up. Note that this can also be used as a text/icon colour in some examples.
danger-text-color: the text displayed in an error message popup using the danger-background-color variable
Form-error-text-color
Full-page-height
Can be set to either true or false. When set to true, the footer will always appear at the bottom of the page; whereas when set to false, the footer will display at the bottom of the content on the page. For example, when set to false, a larger amount of whitespace can be present at the bottom of the page:
Navigation-text-color and Navigation-text-hover-color:
The text colour used for navigation throughout the registration flow (e.g., the "Go Back and Add More" text in the image above). This can also apply to the External Link text at the bottom of the page. These elements can be customised with the following variables:
- navigation-text-color: the colour of the text itself
- navigation-hover-text-color: the colour of the text when a user is hovering over it with their cursor
Info-background-color and Info-text-color
The info variables are used to colour the pop-up that appears during the registration process when a user is trying to re-register for an event.
The variables are:
- info-background-color: the background colour of the info popup
- info-text-color: the colour of the text in the info popup
Panel-background-color
This variable defines the background colour for panel components such as “Coupon Code” or “Confirm and Pay”.
The variable available to set the background colour of this panel is panel-background-color.
Primary-text-color and primary-background-color:
The primary-text-color and primary-background-color variables are used for the primary buttons on each page. These are the buttons that users click to proceed with their order or registration. For example, "Add to order," "Confirm and Pay," and "Register Now." The variables available to customise these buttons are:
primary-text-color: the colour of the text on the button
primary-background-color: the colour of the background of the button (i.e. the colour of the button itself)
Progress-complete-color and progress-background-color:
The variables available to style the registration progress bar (displayed to a user during the registration process). The following variables are available:
- progress-background-color: the background colour of the progress bar
- progress-complete-color: the colour of the completed portion of the progress bar
Success-background-color and success-text-color:
The success-background-color and success-text-color variables are used widely across the registration flow. Typically, whenever a step has been completed. For example, when adding an item to a cart or completing payment.
The following variables are available:
success-background-color: sets the background colour of success elements (e.g., the step tracker, some modal headers, some icons)
success-text-color: the text displayed in certain success elements (e.g., some modal header text). Should be made to contrast with success-background-color
Title-font and title-text-color
These variables allow control of the page titles across the registration experience For example, the page title "My Site" in the image above.
The following variables are available:
- title-font: the font used for the title text
- title-text-color: the colour used for the title text
Warning-background-color and warning-text-color:
The colours displayed in the registration warning pop-up during the registration confirmation step:
The available variables are:
- warning-background-color: the colour of the warning popup
- warning-text-color: the colour of the text in the warning popup
Per-component customisation
Some customisation variables are related to specific components in the registration flow.
header-* variables:
The header of the page has a few variables available to it:
header-background-color: the background colour of the header image region (typically only visible if the header image contains transparency)
header-background-container-color: the background colour of the entire header region (e.g., above, left, and right of the header image)
header-padding-top: the amount of padding above the header image
Footer-* variables:
The footer in the image above was themed by a number of variables. These variables include:
footer-background-color: the background of the footer itself. In the example above, it is a lighter grey
footer-container-background-color: the background colour around the footer itself (displayed above as a darker grey). Note that for most uses, this should be set to the same colour as the base background-color variable
footer-horizontal-padding: the amount of horizontal padding in the footer (e.g., the space on either side of the text in the footer
footer-text-color: the colour of the text displayed in the footer
Input-* variables:
The input variables allow for customisation of the input fields in the registration flow. For example, billing information or registration information. The following variables are available:
input-background-color: the background colour of the input area (in the example above, this is set to a grey colour)
input-border-color: the colour of the border of the input area (above set to bright green to highlight the fields)
input-border-radius: the radius of the corners of the input border (above this is set to 4px)
input-border-width: the width of the input border (above this is set to 1px)
Modal-* variables
Note that the green and white header in the image below is not affected by these variables; rather, it is set by the global success-* variables.
The following variables are available for modal customisation:
- modal-footer-background-color: the background of the modal footer (e.g., where the "Total tickets" are displayed in the above example)
- modal-footer-text-color: the colour of text in the modal footer
- modal-header-background-color: the colour of the header of the modal (red in the above example)
- modal-header-text-color: the colour of the text in the modal header (e.g., the colour of "Add Multiple" in the header in the above example)
Step-tracker-* variables
The following variables are available for the Step Tracker customisation:
step-tracker-active-step-background-color: the background colour inside the ring of the active step (in the above example, the background behind the 3)
step-tracker-active-step-text-color: the colour of the text of the active step (in the above example, the colour of text 3)
step-tracker-complete-step-color: the colour of the text of all complete steps (in the above example, the colour of 1 and 2)
step-tracker-incomplete-step-color: the colour of the text of all incomplete steps (in the above example, the colour of 4 and 5)
Note: the primary colour of the step tracker (e.g., the green colour in the above example) is set by the success-background-color variable.
