Articles in this section
Category / Section

How to Customize Branding in the Registration Flow for a Hybrid Event in Zuddl

Published:
38 mins read
Updated:
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.

Customize flow branding

To customize your branding,
  1. After you've finished creating a registration flow, click on the more option (three dots) at the top and then click on Flow branding.

    image.png


    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.

  2. 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.

  3. On the code text area on the right, you can customize the CSS styles.

error page.png

Using CSS classes to style the pages

The following sections show the different classes and their components which you can use.

Important guidelines

  • 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.


Main container

Class namesDescription
Flow__main-containerRepresents the main container for a flow.


Adding custom fonts

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;
}


Adding custom background color

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;
}


Form

Class namesDescription
Form__headingRepresents the heading in a form.
Form__labelDescribes labels in a form.
Form__inputRepresents input fields in a form.
Form__errorIndicates error messages in a form.
Form__rich-textDescribes rich text elements in a form.
Form__disclaimerRepresents disclaimers in a form.
Form__buttonDescribes buttons in a form.
Form__button-textRepresents the text of buttons in a form.

Form__breadcrumb-not-selected

Indicates breadcrumb items that are not selected.
Form__breadcrumb-selectedRepresents breadcrumb items that are selected.
Form__breadcrumb-textDescribes the text of breadcrumb items.
Form__breadcrumb-arrowRepresents arrows in breadcrumb items.
Form__main-containerDescribes 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
}
Class namesDescription
SessionPickerField__session-picker-field
Represents the specific field within the session picker where sessions can be selected.
SessionPickerField__session-group-name
Represents the name of a group of sessions within the session picker.
SessionPickerField__condition-label
Represents a label that indicates specific conditions related to the sessions.
SessionPickerField__session-day
Represents the display element for the day of the session.
SessionPickerField__session-item
Represents an individual session item within the session picker.
SessionPickerField__session-name
Represents the display element for the name of the session.


SessionPickerField__session-time
Represents the display element for the time of the session.
SessionPickerField__selected-icon
Represents an icon indicating a selected session.
SessionPickerField__select-session-button
Represents the button to select a session.
SessionPickerField__select-session-button_text
Represents the text inside the select session button.
SessionPickerField__session-full-button
Represents the button indicating a session is full.
SessionPickerField__session-full-button-text
Represents the text inside the session full button.
SessionPickerField__session-group-description
Represents the session group description during session selection
SessionPickerField__session-description
Represents the session description during session selection




Color variables

Variable names

Description
--primary
Accepts RGB value. Defines the primary color of the entire flow. Defaults to the event's primary color.
-—primary-hover
Accepts RGB value. Defines the hover color on all primary elements of the entire flow.
-—danger
Defines the color of Edit detail button in the modify registration flow. Also used for error message texts.
-—danger-hover
Defines the hover color on the Edit detail button in the modify registration flow.
-—text-high
Defines the primary text color of the flow
-—text-medium
Defines Secondary text color of the flow
-—mono-base
Represents the background color of modals and dropdown menu lists.
Note: This variable may be used for other components.
-—base-1
Represents the hover color of the accordion headers.
Note: This variable may be used for other components.

Ticket

Class names

Description
Ticket__headingRepresents the heading for a ticket.
Ticket__titleDescribes the title of a ticket.
Ticket__descriptionRepresents the description of a ticket.
Ticket__priceIndicates the price of a ticket.
Ticket__regular-priceRepresents the regular price of a ticket.
Ticket__badgeDescribes the badge associated with a ticket.
Ticket__error-messageRepresents an error message related to a ticket.
Ticket__containerRepresents the container for a ticket.
Ticket__main-containerDescribes the main container for a ticket.
Ticket__have-a-coupon
Shows the ‘Have a coupon code?’ element. Only shown in mobile view.
Ticket__applicable-couponRepresents the applicable coupon label on ticket types. You can also add a ‘p’ tag to style the label text.
Ticket__locked-ticketRepresents the locked ticket icon and label
Ticket__locked-ticket-tooltipRepresents locked ticket tooltip
The sample CSS code below shows how Ticket coupon classes can be used:
 // This example is for styling the coupon icon only in Mobile view of the Ticketing step
.Ticket__have-a-coupon svg {
    fill: #f7a70d !important;
}


 // This example is for styling the applicable coupon label container 
.Ticket__applicable-coupon {
    background-color: rgb(247,167,13,0.12) !important;
}


 // This example is for styling the applicable coupon label text 
.Ticket__applicable-coupon p {
    color: #f7a70d !important;
}



CSS branding.png



Ticket Cart

Class nameDescription
TicketCart__headingRepresents the heading in a ticket cart.
TicketCart__titleDescribes the title in a ticket cart.
TicketCart__priceIndicates the price in a ticket cart.
TicketCart__coupon-successRepresents a coupon success message in a ticket cart.
TicketCart__coupon-errorIndicates a coupon error message in a ticket cart.
TicketCart__apply-code-buttonRepresents the button for applying a code within the ticket cart.
TicketCart__apply-code-button-textRepresents the text within the apply code button in the ticket cart.
TicketCart__remove-code-buttonRepresents the button to remove a coupon code in a ticket cart.
TicketCart__remove-code-button-textRepresents the text within the remove code button in the ticket cart
TicketCart__discount-textDescribes the discount text in a ticket cart.
TicketCart__discount-valueIndicates the discount value in a ticket cart.
TicketCart__tax-textDescribes the tax text in a ticket cart.
TicketCart__tax-valueIndicates the tax value in a ticket cart.
TicketCart__total-priceRepresents the total price in a ticket cart.
TicketCart__buttonDescribes buttons in a ticket cart.
TicketCart__button-textRepresents the text of buttons in a ticket cart.
TicketCart__total-textDescribes the total text in a ticket cart.
TicketCart__edit-detailsIndicates the option to edit details in a ticket cart.


Timer

Class nameDescription
Timer__clockRepresents the clock element in a timer.
Timer__timeDescribes the time displayed in a timer.

Accordion

Class namesDescription
OrderSummary__headingRepresents the heading in Order Summary.
OrderSummary__sub-headingDescribes subheadings in Order Summary.
OrderSummary__edit-detailsIndicates the option to edit details in Order Summary.
OrderSummary__labelDescribes labels in Order Summary.
OrderSummary__valueIndicates values in Order Summary.
OrderSummary__buttonRepresents buttons in Order Summary.
OrderSummary__button-textDescribes the text of buttons in Order Summary.
Accordion__containerRepresents the container in an accordion.
Accordion__main-containerDescribes the main container in an accordion.


Loading page

Class namesDescription
LoadingPage__headingRepresents the heading on a loading page.
LoadingPage__sub-headingDescribes subheadings on a loading page.
LoadingPage__iconsRepresents icons on a loading page.
LoadingPage__main-containerDescribes the main container on a loading page.


Error page

Class namesDescription
ErrorPage__headingRepresents the heading on an error page.
ErrorPage__sub-headingDescribes subheadings on an error page.
ErrorPage__iconRepresents icons on an error page.
ErrorPage__buttonDescribes buttons on an error page.
ErrorPage__button-textRepresents the text of buttons on an error page.
ErrorPage__main-containerDescribes the main container on an error page.


Thank you page

Class namesDescription
ThankYou__headingRepresents the heading on a Thank you page.
ThankYou__sub-headingDescribes subheadings on a thank-you page.
ThankYou__bottom-sectionRepresents the bottom section of the Thank You page.
ThankYou__transaction-headingRepresents the transaction heading on a thank-you page.
ThankYou__transaction-idIndicates the transaction ID on a thank-you page.
ThankYou__copy-iconRepresents the copy icon on a thank-you page.
ThankYou__registration-detailsDescribes the registration details section on a thank-you page.
ThankYou__edit-details-buttonRepresents the edit details button on a thank-you page.
ThankYou__edit-details-button-textDescribe the text of the edit details button on a thank-you page.
ThankYou__ticket-nameRepresents the name of a ticket on a thank-you page.
ThankYou__ticket-total-amountIndicates the total amount of a ticket on a thank-you page.
ThankYou__resend-buttonRepresents the resend button on a thank-you page.
ThankYou__resend-button-textDescribes the text of the resend button on a thank-you page.
ThankYou__download-buttonRepresents the download button on a thank-you page.
ThankYou__download-button-textDescribes the text of the download button on a thank-you page.
ThankYou__attendee-details-headingDescribes the heading for attendee details on a thank-you page.
ThankYou__attendee-listRepresents the list of attendees on a thank-you page.
ThankYou__attendee-nameDescribes the name of an attendee on a thank-you page
ThankYou__attendee-emailIndicates the email of an attendee on a thank-you page.
ThankYou__main-containerRepresents the main container on a thank-you page.


Button

Class namesDescription
Button__baseRepresents the base style of a button.
Button__base-textDescribes the text style of a button.
Button__primaryRepresents the primary style of a button.
Button__primary-textDescribes the text style of a primary button.

Button__secondary

Represents the secondary style of a button.
Button__secondary-textDescribes the text style of a secondary button.
Button__tertiaryRepresents 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’.


Styling a 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.


Dropdown

Class namesDescription
Dropdown__single-valueRepresents 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-valueUsed to style the selected values in a multi-select dropdown. It applies to the elements that display multiple selected values within the dropdown.
Dropdown__controlAssociated 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-containerUsed 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__indicatorPertains 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__menuAssociated 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-listRepresents 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__optionApplied 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-focusedOften used to style the currently focused option within the dropdown menu. It helps indicate which option is selected using keyboard navigation.
Dropdown__option--is-selectedApplied to an option that is selected by the user. It allows you to style selected options differently from unselected options.
Dropdown__option--is-disabledWhen 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__placeholderRepresents 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.

Bulk classes

Class namesDescription
BulkRegistration__containerRepresents the container for bulk registration.
BulkRegistration__mobile-containerRepresents the mobile container for bulk registration
BulkRegistration__selectedRepresents items that are selected in bulk registration.
BulkRegistration__not-selectedIndicates items that are not selected in bulk registration.
BulkRegistration__selected-in-mobileRepresents items that are selected in mobile view in bulk registration.
BulkRegistration__not-selected-in-mobileIndicates items that are not selected in mobile view in bulk registration.


Mobile Footer

Class nameDescription
MobileFooter__containerRepresents the container for the mobile footer.
MobileFooter__headingDescribes the heading in the mobile footer.
MobileFooter__priceIndicates the price in the mobile footer.
MobileFooter__buttonRepresents buttons in the mobile footer.
MobileFooter__button-textDescribes the text of buttons in the mobile footer.
MobileFooter__up-arrowRepresents the up arrow in the mobile footer.


Edit Registrations

Class nameDescription
EditRegistration__main-containerRepresents the main container in the edit registration page.

EditRegistration__header

Describes the header in the edit registration page.
EditRegistration__logoRepresents the logo in the edit registration page.
EditRegistration__headingDescribes the heading in the edit registration page.
EditRegistration__sub-headingIndicates subheadings in the edit registration page.
EditRegistration__cardRepresents cards in the edit registration page.
EditRegistration__card-headingDescribes the heading of a card in the edit registration page.
EditRegistration__card-labelIndicates labels on a card in the edit registration page.

EditRegistration__card-value

Describes values on a card in the edit registration page.
EditRegistration__edit-buttonRepresents the edit button in the edit registration page.
EditRegistration__edit-button-textDescribes the text of the edit button in the edit registration page.
EditRegistration__modal-containerRepresents the modal container in the edit registration page.
EditRegistration__attendeeDescribes attendees in the edit registration page.
EditRegistration__modal-headingRepresents the modal heading in the edit registration page.
EditRegistration__modal-buttonDescribes buttons in the modal in the edit registration page.
EditRegistration__modal-button-textRepresents the text of buttons in the modal in the edit registration page.



Was this article useful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied