How to Customize Branding in the Registration Flow

Customize flow 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.

   

   
   

   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.

How to use CSS classes to style the pages

Main container

Add custom fonts

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap');


.Flow__main-container * {
 font-family: 'Roboto Mono', monospace;
}

Add custom background color

.Flow__main-container {
 background-color: #ebd9e1!important;
}

Form

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

Color variables

Ticket

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

Ticket Cart

Timer

Accordion

Loading page

Error page

Thank you page

Button

How to style a button

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

Dropdown

Bulk classes

Mobile Footer

Edit Registrations

Flow Main

Best practices

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