Whitelabel allows you to customize the ticket checkout page. Once the whitelabel template is created, checkout pages accessed using the special link will show up using your style. Events accessed using the normal links will keep the Bruha styling.
The logo placed above the checkout page
The background image used for the entire page
This image will be included below the ticket that is emailed to the client
You are able to include HTML. These are the valid tags and attributes:
div[class],b,strong,i,em,u,a[href|title|class],ul[class],ol,li[class],p[style],br,span[style],img[width|height|alt|src]
This HTML is placed above the checkout form
Example:<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid nav-container"> <a class="brand" href="http://google.ca">Google</a> <div role="navigation"> <div class="nav-collapse"> <ul class="nav"> <li class="menu-item "><a href="http://google.ca/">Your</a></li> <li class="menu-item "><a href="http://google.ca/">Website</a></li> <li class="menu-item"><a href="http://google.ca/">Menu</a></li> <li class="menu-item "><a href="http://google.ca/">Goes</a></li> <li class="menu-item"><a href="http://google.ca/">Here</a></li> </ul> </div> </div> </div> </div> </div>
This HTML is placed below the checkout form
The page includes the Bootstrap 3 CSS, as well as some custom Bruha styles. You're able to use any of the existing CSS classes to format the layout and style your page.
In addition to tweaking your own HTML, you can make customizations to the form itself as well. We've left two default styles in there that control the text directly above the checkout area, and the heading of the checkout area.
Example:.wl-text{color:#fff;} h2.wl-text{ background-color:#ccc; color:#000; } .navbar .nav li { float: left;} .navbar ul.nav{ padding:2px;} .navbar.navbar-fixed-top{background-color:#eee;} .nav a { color: #3d3d3d; font-family: sans-serif; text-transform: uppercase; font-size: 1.5em; font-weight:bold; } .container-fluid.nav-container{ max-width:1000px; margin:auto; } .brand{ color: #125eb2; font-weight:bold; text-shadow: none; font-family: 'League Gothic', sans-serif; text-transform: uppercase; font-size: 1.8em; padding:10px 20px 10px; float:left; } .custom-footer{ color:#f00; font-size:30px; text-align:center; width:100%; }
Users accessing your ticket checkout page from explore or the regular direct link will see normal Bruha styling. In order to have your users see your whitelabel styling, you must use the link that is provided when a ticket is created and saved.
To get the whitelabel link:
1) Create an event and add tickets
2) Publish the event
3) View the ticket area; at the bottom of each ticket will be a unique link for that ticket. When this link is used, the whitelabeled version of the page appears.