You can add custom CSS styles to each step in the registration process using the flow branding option and customize your registration page as per your company's branding guidelines. You can customize a few additional pages, such as the error or the loading page.
Note:
This article is intended to be used by CSS developers as it contains CSS concepts and terminologies.
We will soon be adding direct branding options for items like primary color, secondary color, fonts, etc.,
After you've finished creating a registration flow, click on the more option (three dots) at the top and then click on Flow branding.
This redirects you to the Branding page, where you can add your CSS code. A two-pane window shows a CSS code area on the right and a preview area on the left.
Select the desired step from the dropdown. Each step you create in the flow-building process appears as a dropdown menu here.
Note: In addition to the steps in your flow, you can select the Error or Loading page to preview the customization.
On the code text area on the right, you can customize the CSS styles.
The following sections show the different classes and their components which you can use.
You cannot inspect the page and use any classes given as it may not give you the intended results. Use only Zuddl custom classes listed for branding customizations.
Add !important on properties that aren’t behaving as expected maybe because of any existing class. This tag will give precedence to the CSS.
For iOS devices, any input should have a minimum font size of 16px because if the selected input is below 16px, iOS automatically zooms in and stays in the zoomed-in mode.
You can refer to specific tags or elements within a class, for example, ‘span’, ‘p’. See the example below of referring to tags within a loading page class.
.LoadingPage__icons span {
background-color: #445b4b !important;
}
Do not use <style> tags in the Custom CSS text area
The feature only supports plain CSS and not CSS nesting
Payment fields cannot be branded
Disclaimer text should be 14px. Increasing the text may disturb the alignment of checkbox with text
Because not everything can be seen in the preview, you can preview the actual flow on your landing page after you have worked on the styles.
You can reach out to our support team (support@zuddl.com) for any further assistance.
Class names | Description |
Flow__main-container | Represents the main container for a flow. |
To add custom fonts for global use across all properties, specify the font CSS url inside the ‘@import url’ tag and use the font-family in ‘Flow__main-container’ as shown below:
@import url('<https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap>');
.Flow__main-container * {
font-family: 'Roboto Mono', monospace;
}
By default, the container is transparent but you can change the background color of the entire flow as shown below:
.Flow__main-container {
background-color: #ebd9e1!important;
}
Class names | Description |
Form__heading | Represents the heading in a form. |
Form__label | Describes labels in a form. |
Form__input | Represents input fields in a form. |
Form__error | Indicates error messages in a form. |
Form__rich-text | Describes rich text elements in a form. |
Form__disclaimer | Represents disclaimers in a form. |
Form__button | Describes buttons in a form. |
Form__button-text | Represents the text of buttons in a form. |
Form__breadcrumb-not-selected | Indicates breadcrumb items that are not selected. |
Form__breadcrumb-selected | Represents breadcrumb items that are selected. |
Form__breadcrumb-text | Describes the text of breadcrumb items. |
Form__breadcrumb-arrow | Represents arrows in breadcrumb items. |
Form__main-container | Describes the main container in a form. |
Instead of individually defining color for each component in the CSS code, you can override the variable colors as shown below:
.Flow__main-container * {
--primary: 247,167,13;
--primary-hover: 237, 167, 13;
--danger: 229,29,63;
--danger-hover: 201,26,55;
--text-medium: 255,255,255, 0.90;
--text-high: 255, 255, 255;
--mono-base: 0,0,0;
--base-1: 0,0,0,0.25
}
Variable names | Description |
| Accepts RGB value. Defines the primary color of the entire flow. Defaults to the event's primary color. |
| Accepts RGB value. Defines the hover color on all primary elements of the entire flow. |
| Defines the color of Edit detail button in the modify registration flow. Also used for error message texts. |
| Defines the hover color on the Edit detail button in the modify registration flow. |
| Defines the primary text color of the flow |
| Defines Secondary text color of the flow |
| Represents the background color of modals and dropdown menu lists.Note: This variable may be used for other components. |
| Represents the hover color of the accordion headers.Note: This variable may be used for other components. |
Class names | Description |
LoadingPage__heading | Represents the heading on a loading page. |
LoadingPage__sub-heading | Describes subheadings on a loading page. |
LoadingPage__icons | Represents icons on a loading page. |
LoadingPage__main-container | Describes the main container on a loading page. |
Class names | Class namesDescription |
ErrorPage__heading | Represents the heading on an error page. |
ErrorPage__sub-heading | Describes subheadings on an error page. |
ErrorPage__icon | Represents icons on an error page. |
ErrorPage__button | Describes buttons on an error page. |
ErrorPage__button-text | Represents the text of buttons on an error page. |
ErrorPage__main-container | Describes the main container on an error page. |
Class names | Description |
ThankYou__heading | Represents the heading on a Thank you page. |
ThankYou__sub-heading | Describes subheadings on a thank-you page. |
ThankYou__bottom-section | Represents the bottom section of the Thank You page. |
ThankYou__copy-icon | Represents the copy icon on a thank-you page. |
ThankYou__registration-details | Describes the registration details section on a thank-you page. |
ThankYou__edit-details-button | Represents the edit details button on a thank-you page. |
ThankYou__edit-details-button-text | Describe the text of the edit details button on a thank-you page. |
ThankYou__resend-button | Represents the resend button on a thank-you page. |
ThankYou__resend-button-text | Describes the text of the resend button on a thank-you page. |
ThankYou__attendee-details-heading | Describes the heading for attendee details on a thank-you page. |
ThankYou__attendee-name | Describes the name of an attendee on a thank-you page |
ThankYou__attendee-email | Indicates the email of an attendee on a thank-you page. |
ThankYou__main-container | Represents the main container on a thank-you page. |
Class names | Description |
Button__base | Represents the base style of a button. |
Button__base-text | Describes the text style of a button. |
Button__primary | Represents the primary style of a button. |
Button__primary-text | Describes the text style of a primary button. |
Button__secondary | Represents the secondary style of a button. |
Button__secondary-text | Describes the text style of a secondary button. |
Button__tertiary | Represents the tertiary style of a button. |
Button__tertiary-text | Describes the text style of a tertiary button. |
In contrast to ‘Button__primary`class, you can choose to only style button-specific to an element in your page. For example ‘ThankYou__button’ or ‘Form__button’.
The below example shows a button with styles applied.
.Button__primary {
background-color: #445b4b !important;
width: 160px;
height: 48px;
border-radius: 0px;
text-transform: uppercase;
font-weight: 700;
}
.Button__primary:hover {
background-color: green !important;
}
Note: You can use psuedo class such as ’hover’ with a Zuddl class.
Class names | Description |
Dropdown__single-value | Represents the styling for the single selected value displayed in the dropdown when it is closed. This is typically the value displayed before the user opens the dropdown to make a selection. |
Dropdown__multi-value | Used to style the selected values in a multi-select dropdown. It applies to the elements that display multiple selected values within the dropdown. |
Dropdown__control | Associated with the control container of the dropdown, which typically includes the input field and the dropdown toggle button. Styling this class can help control the appearance of these elements. |
Dropdown__input-container | Used to style the container that holds the input element within the dropdown. It can be useful for controlling the styling of the input area, such as borders, backgrounds, or padding. |
Dropdown__indicator | Pertains to the indicator icon(s) within the dropdown, such as the arrow icon that indicates whether the dropdown is open or closed. Styling this class can affect the appearance of these indicator icons. |
Dropdown__menu | Associated with the dropdown menu that appears when the user opens the dropdown. It includes all the available options for selection. Styling this class can help customize the appearance of the dropdown menu. |
Dropdown__menu-list | Represents the list of options within the dropdown menu. It's used to style the individual items or options that the user can select from. You can use it to control the appearance of each option. |
Dropdown__option | Applied to each individual option within the dropdown menu. You can use it to style each option item differently if needed, allowing for fine-grained control over the appearance of the selectable items. |
Dropdown__option--is-focused | Often used to style the currently focused option within the dropdown menu. It helps indicate which option is selected using keyboard navigation. |
Dropdown__option--is-selected | Applied to an option that is selected by the user. It allows you to style selected options differently from unselected options. |
Dropdown__option--is-disabled | When an option is disabled and cannot be selected, this class can be applied to style it differently, typically with a different color or style to indicate its disabled state. |
Dropdown__placeholder | Represents the styling for the placeholder text that is displayed in the input field when no option is selected. You can use it to control the appearance of the placeholder text. |
Class names | Description |
MobileFooter__container | Represents the container for the mobile footer. |
MobileFooter__heading | Describes the heading in the mobile footer. |
MobileFooter__button | Represents buttons in the mobile footer. |
MobileFooter__button-text | Describes the text of buttons in the mobile footer. |
MobileFooter__up-arrow | Represents the up arrow in the mobile footer. |
Class names | Description |
EditRegistration__main-container | Represents the main container in the edit registration page. |
EditRegistration__header | Describes the header in the edit registration page. |
EditRegistration__logo | Represents the logo in the edit registration page. |
EditRegistration__heading | Describes the heading in the edit registration page. |
EditRegistration__sub-heading | Indicates subheadings in the edit registration page. |
EditRegistration__card | Represents cards in the edit registration page. |
EditRegistration__card-heading | Describes the heading of a card in the edit registration page. |
EditRegistration__card-label | Indicates labels on a card in the edit registration page. |
EditRegistration__card-value | Describes values on a card in the edit registration page. |
EditRegistration__edit-button | Represents the edit button in the edit registration page. |
EditRegistration__edit-button-text | Describes the text of the edit button in the edit registration page. |
EditRegistration__modal-container | Represents the modal container in the edit registration page. |
EditRegistration__attendee | Describes attendees in the edit registration page. |
EditRegistration__modal-heading | Represents the modal heading in the edit registration page. |
EditRegistration__modal-button | Describes buttons in the modal in the edit registration page. |
EditRegistration__modal-button-text | Represents the text of buttons in the modal in the edit registration page. |