Ticketing & Widget: Customize the ticketing widget

Learn how to customize the ticketing widget’s styling through CSS.

You can customize the way the Brella ticketing widget looks on your webpage using CSS:

 .brella-get-tickets {
     text-indent: -9999px;
     line-height: 0;
   }
 
   .brella-get-tickets:after {
     content: 'whatever it is you want to add';
     text-indent: 0;
     display: block;
     line-height: initial;
   }

 .ticketing-header-title {
     text-indent: -9999px;
     line-height: 0;
   }
 
   .ticketing-header-title:after {
     content: 'whatever it is you want to add';
     text-indent: 0;
     display: block;
     line-height: initial;
   }

👇Result:

👉 To customize the primary background color (default white):

.brella-ticketing-widget {
     --brella-widget-background: yellow !important;
   }

👇Result:

👉 To customize the secondary background color (default: #F9FAFB):

.brella-ticketing-widget {
     --brella-widget-secondary-background: yellow !important;
   }

👇Result:

👉 To customize the primary button and highlight color (default: #7F56D9):

.brella-ticketing-widget {
     --brella-color-ticketing-primary-600: red !important;
   }
 
   #brella-widget {
     --brella-color-ticketing-primary-600: red !important;
   }

👇Result:

👉 To customize the border of the ticketing modal (default: 1px solid #EAECF0; Border radius (default 8px)):

 .brella-ticketing-widget {
     --brella-widget-modal-border-radius: 50px !important;
   }

👇Result:

👉 To customize the divider between sections (Default: 1px solid #EAECF0):

 .brella-ticketing-widget {
     --brella-widget-modal-border-radius: 50px !important;
   }

👇Result:

👉 To customize the close icon (default: ​​#101828; in 2 places, close modal and remove discount code):

.brella-ticketing-widget {
     --brella-widget-close-icon-color: red !important;
   }

If you only want to change one of these, for example only the discount code one, you can do it like this: 

.remove-discount-code:before, .remove-discount-code:after {
     background-color: purple !important
   }

👇Result:

👉 Example of dark theme widget experience:

<style>
.brella-ticketing-widget {
    --brella-widget-secondary-background: #141A2D !important;
    --brella-widget-background: #1C2541 !important;
    --brella-widget-border: 1px solid #111727 !important;
    --brella-widget-close-icon-color: #DC758F !important;
    --brella-widget-modal-border-radius: 2px !important;
    --brella-widget-modal-input-border-radius: 2px !important;
    --brella-widget-input-border: 2px solid #1C2541 !important;
    --brella-color-ticketing-primary-600: #DC758F !important;
   }
   .brella-get-tickets {
    text-indent: -9999px;
    line-height: 0;
    border: 1px solid #C7637C !important;
    background-color: #DC758F !important;
  }
  .brella-get-tickets:after {
    content: 'Try it our here';
    text-indent: 0;
    display: block;
    line-height: initial;
  }
 
  .ticketing-header-title {
    text-indent: -9999px;
    line-height: 0;
  }
  .ticketing-header-title:after {
    content: 'Be the first to buy ticket!';
    text-indent: 0;
    display: block;
    line-height: initial;
  }
 
  .ticketing-footer-proceed-button {
    text-indent: -9999px;
    line-height: 0;
  }
 
  .brella-widget-button-primary {
   padding: 9px 16px !important;
  }
 
  .ticketing-footer-proceed-button:after {
     content: 'Next page';
    text-indent: 0;
    display: block;
    line-height: initial;
  }
 
   .ticketing-secondary-text {
     color: #D6BBFB !important;
   }
 
   .brella-ticketing-widget p, .brella-ticketing-widget h3, .brella-ticketing-widget h4, .brella-ticketing-widget a, .brella-ticketing-widget label, .brella-ticketing-widget input {
     color: #F4EBFF;
   }
 
   .brella-ticketing-widget input, .brella-ticketing-widget input:disabled {
     background-color: #141A2D;
   }
 
   .ticketing-footer-proceed-button:disabled, .discount-code-apply-button:disabled {
     opacity: 0.5;
   }
 
   .summary-event-date {
     color: #DC758F !important;
   }
 
   .summary-order-summary-text, .total-summary-text, .custom-form-title, .custom-form-title, .ticket-question-name{
     color: #E3D3E4 !important;
   }
 
   .purchaser-info-container p, .ticketing-question-container p {
     color: #7C86A5;
   }
 .brella-widget-error-text {
color: var(--brella-color-error-600) !important;
}
</style>

👇Result:

---

Last updated - December 2022. 

Written by Natasha Santiago. 

If you didn't find an answer to your questions, please get in touch with the Support Team here.

👇