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

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.

Using CSS classes to style the pages

.LoadingPage__icons span {
   background-color: #445b4b !important;
}

Main container

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

Adding 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

--primary

-—primary-hover

-—danger

-—danger-hover

-—text-high

-—text-medium

-—mono-base

-—base-1

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

Housing

Accordion

Loading page

Error page

Thank you page

Button

Styling 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