Tixly Branded buying process

In the system, you can easily create new branded buying processes and design them according to your own graphic profile via Administration > Integrations > Skin. To edit existing skins, tap on the skin or on Actions > Edit. If you want to create a new one, press Add skin in the top right corner. Here you can now edit colours, upload new images and edit the buying process's CSS file.

Editing CSS is at your own risk and you must take responsibility for the design of your branded buying process if you choose to go this route.

Custom CSS examples

You can copy these code snippets in to the css to change/hide certain stuff.

Good to know, if you want to hide something on a page you have two options. 

• display: none;    This removes the element from the page, and the space becomes available. 
• visibility: hidden;  This does not show the element on the page, but it still does take up the space.

Depending on what you want to achieve you have to choose which one to use. 

Hide stuff 

/* Hide suggestions in basket */
.event-group-suggestion {
display: none;
}
div#BasketContainer > h2:first-child{
display: none;
} 

/* Hide continue shopping button */
#BasketButtons > div.col-3.col-m-5.col-s-12 > a {
    visibility: hidden;
}

/* Hide social logins */
#SignInSocial {
display: none !important;
}
/* Also hide text "Or log in with" */
#ProfileFields h5 {
    display: none;
}

/* Hide order without account */
#SkipLogin {
display: none !important;
}

/* Hide horizontal lines in profiles */
#ProfileFields hr {
display: none !important;
}

/* Only show one related event on smaller screens */
@media only screen and (max-width: 767px) {
  div#BasketContainer>div:nth-child(2)>div:nth-child(1n+2){
  display: none;
  }
}

/* Hide alternative delivery address */
input.different-delivery, label[for=DeliveryAddress_UseDifferentDeliveryAddress] {
    display: none !important;
}

/* Hide language and currency option in menu */
a.language-currency-link {
display: none !important;
}

/* Hide only second language option in menu */
/* Use the option's number when selecting for child in 'li' selector */
.language-currency-selector ul:nth-child(1) li:nth-child(2) {
display: none;
}

/* Hide only second currency option in menu */
/* Use the option's number when selecting for child in 'li' selector */
.language-currency-selector ul:nth-child(2) li:nth-child(2) {
display: none;
}

Colours

/* override primary color on gray backgrounds */
#a-terms, #ExternalPayment > span
{  color: #000000;}
 #ExternalPayment > svg
{  fill: #000;}

#footer {
  background-color: #000000;
}

/* Change occupied seat color */
.s-s.occ circle {
fill: lightgrey !important;
stroke: lightgrey !important;
}

Change fonts

Add a font definition on top by importing google font or using a hosted version

/* Get a google font*/
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');

/* Use hosted font*/
@font-face {
font-family: "Gotham-Book";
src: url("https://www.matilda-demusical.nl/wp-content/themes/matilda/dist/fonts/gotham/Gotham-Book.woff") format("woff");
}

/* Custom font on most items */
body, #BuyingHead, #SiteHead2, .primary-c, #BuyingSteps div .text, #EventSelector td.name, #EventSelector td.date, #EventSelector .selection-heading th, #TicketSelectTitle, #TicketSelector .name, .button, .button-small, #TicketSelector .select-zone, #TicketResultText, #TicketResults th, #DeliveryTypeTitle, #DeliverySelect li label, #DeliverySelect li label span.description, #ProductSelect h2, #ProductSelect ul.tiles li.product .info h1, .product-popup-description p, .product-popup-title h2, .basket-title, .basket-line, #BuyerTitle, #CardTitle, #GiftCardTitle, #InsuranceTitle, .profile-title, .headtexttotal li, #TicketResults .sum .text, #TicketResults .sum td, .item-info, .item-list .results-items .item-details .item-info>span>span, .item-list .results-header .total .prices .text, .item-list .results-header .title h2, #BasketContainer h3, .item-list .results-header .total .prices .text, #PurchaseLogin h2, #ProfileFields .profile-heading, #ProfileBar ul li button
{
 font-family: 'Titillium Web', sans-serif !important; 
}

/*Custom font in head, big capitals*/
#SiteHead2
{
font-family: Gotham-Book,Arial,Tahoma,sans-serif !important;
font-weight: 700;
text-transform: uppercase;
}

Event Page

This is shown before a event is visible online and is not branded by default so here is what can be added to change it. This example is taken from Kalmarsalen in Sweden.

/*EVENT PAGE*/

/*This changes the logo in the event page*/

body.site_sv .header .logo {
  background-image: url(Images/logo.svg) !important;
  margin-top: 4px;
  width: 58px !important;
  height: 93px;
}

/*This hides the search icon*/

.search-trigger {
  display: none;
}

.header .navigation.main {
  float: right;
  margin-right: 30px;
}

/*This hides the language menu*/

.header .navigation.right {
  display: none;
}

/*This hides the address field in the footer*/

.address {
  display: none;
}

/*This hides the term links and the social media icons in the footer*/

.footer > div > div:last-child {
  display: none;
}

/*PrimaryBackgroundColor*/

.footer > div > div.contact > div, .event > .dates ul li span, .event > .dates button, .event > .dates a.link-button, .footer hr, .footer > div > div.contact a:hover, .header .navigation.main ul li:not(:last-child):after {
  background: #312783;
}

.event > .dates button:hover, .event > .dates a.link-button:hover {
  color: #312783;
}

.header .navigation ul li a svg path, .header .navigation ul li a:hover {
  fill: #312783 !important;
}

.header .navigation ul li a:hover svg path, .header .navigation ul li a:hover svg circle {
  stroke: #312783 !important;
}

/*SecondaryBackgroundColor*/

.footer, .event > .dates, .event, .event > ul > li .info > div {
  background: #a1cfa0;
}

/*HeaderBackgroundColor*/

.header {
  height: 99px;
  background: #ffffff;
}

/*PrimaryTextColor*/

.event > .dates button, .event > .dates a.link-button {
  color: #f9cdcd;
}

.event > .dates button:hover, .event > .dates a.link-button:hover {
  background: #f9cdcd;
}

/*SecondaryTextColor*/

.event > .dates h5 span, .footer > div > div.contact > p:first-of-type, .event > ul > li .info > div h2, .event > ul > li .info > div h3, .event > ul > li .info > div h4 {
  color: #ffffff;
}

.footer svg path {
  fill: #ffffff;
}

Various

#BuyingHead {
background-image: none;
  background-color: #C2FC50;
  color: #000000 !important;
  font-weight: 500;
  font-family: pdu-regular;
  text-transform: uppercase;
  text-shadow: none !important;
}

Add text on the hallmap  (deSingel)

/* Add text SOCIAL DISTANCING hallmaps */
li.pick-type-4 {
  flex-direction: column !important;
}
li.pick-type-4:after {
  visibility: visible !important;
  content: 'Een bubbel bestaat uit 1, 2 of 3 plaatsen. We voorzien 2 vrije stoelen tussen elke bubbel. De lege stoelen kunnen wel verkocht worden indien dit van overheidswege toegelaten wordt.';
}

Logo in different size on mobile. (used on concertgebouw)

/* Other logo dimensions on mobile */

@media only screen and (max-width: 480px) {
  #SiteHead2 h1.logo 
  {
    width: 67px !important;
  }
  /* This also hide the horizontal line */
  #SiteHead2 .headtexttitle 
  {
    border-bottom-width: 0px;
  }
}

.basket-recommendation-container .recommendation-card {
width: 255px !important;
padding: 20px;
margin: 0 auto;
}

.basket-message-container .message-area {
margin: 0 auto !important;
}

.basket-message-container {
text-align: center;
}

#BasketContainer .basket-message-container h3 {
font-weight: 700;
}

.basket-message-container .message-area p {
font-weight: 400;
}

.basket-recommendation-container {
text-align: center;
}

.information-message-type {
border-left-width: 1px !important;
border-left-color: #4f4f4f !important;
}

.basket-rule-wrapper .collapse-active {
padding-bottom: 25px;
}

.primary-c-button-secondary:hover {
color: #ffffff !important;
}

#tix-seatpicker main aside .cart-content .cart-ticket-container 
.cart-ticket .cart-ticket-actions button svg path, 
#tix-seatpicker main aside .cart-content .cart-ticket-container 
.cart-ticket .cart-ticket-actions button svg polygon {

fill: #000 !important;

}

Make selected seat in seat map blink

.s-s.your-seat circle {

animation: blink 1.5s linear infinite !important;

}

@keyframes blink { 

100%, 70% { opacity: 1;}

0%, 15% { opacity: 0.5;}

}        

Add text to ticket selection box, with some white space and line breaks. 

/* extra text ticket selection box */

div#TicketTypeSelect .ticket-type-description:after {

  white-space: pre-wrap !important;

  content: "\a XXX " !important;

  font-weight: normal !important;

  font-size: 13px !important;

}