With the introduction of the V2 consumer checkout flow, efforts have been made to make it easier to add custom CSS brand modifications, to allow you to style the flow to your own specifications.
The information detailed below is a guide for users who are familiar with CSS coding. Please reach out to the Ticketing Services team with any questions.
Custom CSS V1
Previously, complex selectors had to be used to select UI elements, which are prone to break if the structure of the web page ever changes, and are likely unwieldy if you are not very familiar with CSS
.
Custom CSS V2
Whilst the above CSS coding will still work, there are now several tokens exposed that allow for easier access to commonly modified elements.
The tokens follow the format of --brand-the-thing: the-value;. The value you set will cascade through the Consumer UIs and keep brand colors in sync.
Below is an example:
Available Tokens
A list of available tokens that you can use to style your Consumer Purchase Flow is shown below. A visual reference has been included that shows the elements that will be affected by your change. The tokens were applied via this code block in the Global Head HTML field in Account Settings.
The examples included are fairly extreme examples of branding. This is intentional to demonstrate/highlight the areas.
An example configuration with CSS hex codes
These tokens will only apply to V2 pages.
Tokens Examples
--brand-font-family
Changes the font of your pages.
All heading and body text will be in the font registered against this token.
--brand-heading
Changes the color of the text headings throughout the page.
Accepts any supported CSS color (see below).
--brand-header-background
Changes the color of the site header.
Accepts any supported CSS color (see below).
--brand-heading-case
Transforms the text formatting of headings.
Most commonly would be capitalize, uppercase, or lowercase but also accepts any text-transform value (see below).
--brand-button-primary-colour
Changes the color of the buttons that appear most often on the page, most often used for “forward” actions (e.g. Continue To Checkout, Complete Purchase, Buy Tickets).
--brand-button-primary-text-colour
Changes the color of the text for the buttons mentioned above.
--brand-button-secondary-colour
Changes the color of the buttons that appear second-most often on the page (e.g. Cancel, Exit, Add More Items).
--brand-button-secondary-text-colour
Changes the color of the text for the buttons mentioned above.
--brand-button-radius
Transforms the angles on all buttons (e.g. rounded or square corners).
Most commonly would be a pixel (px) value, but also accepts any border radius value (see below).
--brand-tab-nav-text
Changes the color of the tab nav text.
--brand-active-tab-accent
Changes the color of the selected tab underline.
Accepts any supported CSS color (see below).
--brand-modal-header-background-colour
Changes the background color of the title section of any pop-up modals/dialogs.
--brand-input-accent-color
Changes the color of form elements like checkboxes and switches.
--brand-banner-color
Changes the color of the “Event Template alert” banner on the seatmap.
--brand-card-header-background
Changes the color of the card headers. Note: this is distinct from the color of the page header.
Ability to change the display of “Enter Promo Code” box
Changes the size/color and background of the “Enter Promo Code” box.
Note: this can be distinct from the color of the page header.
Default View
Customized View
To customize the “Enter promo Code” box requires coding to be placed both in Account Settings and each Event Template you wish to update.
Account Level
CSS coding is placed in Account Settings - Web Settings - Global Head HTML.
Event Template
CSS coding is placed in Settings - Options - Purchasing - Custom Header CSS.
The coding is the same for both locations.
Please see below for the coding used for the example.
<!-- START: View Series V2 - Custom CSS -->
<style type="text/css">
/* Enter Promo Button */
.view-series__event-promo-button {
margin: 1rem 0 0.25rem;
padding: .85rem 1.5rem !important;
width: fit-content !important;
background: #505858 !important;
color: white !important;
border-radius: 4px;
text-transform: uppercase;
}
</style>
<!-- END: View Series V2 - Custom CSS -->
Ability to Change Discount Price Color
Consumer v2 flow allows for adjusting the appearance of discount pricing when promos are applied on the seat map. The default color of prices is black.
To update the color of the discount prices, the view-series-shop-by-seat-map-promo-price element must be updated either in Account Settings using the Global Head HTML field or on an event template using the Global Head Scripts field (which overrides Account Settings). An example code for changing the color from black to red is below:
<style>
.view-series-shop-by-seat-map-promo-price { color: red; }
</style>
Further CSS Guides and Support
Training and online CSS tutorial
W3Schools.com
Further CSS information
CSS Colors
CSS colors - CSS: Cascading Style Sheets | MDN
CSS Border-Radius
border-radius - CSS: Cascading Style Sheets | MDN
CSS Text-Transform
text-transform - CSS: Cascading Style Sheets | MDN
Comments
0 comments
Please sign in to leave a comment.