Online bestelflow in eigen huisstijl

In het systeem kun je eenvoudig nieuwe bestelflows creëren en deze ontwerpen volgens de huisstijl van de organisatie.

Ga in BoxOffice naar Administratie > Integraties > Skin.

Om bestaande skins te bewerken, klik je op de regel of op Acties > Bewerken. Als je een nieuwe skin wilt maken, druk je rechtsboven in de hoek op Voeg skin toe.

Hier kun je nu kleuren bewerken, nieuwe afbeeldingen uploaden en het CSS-bestand van het koopproces bewerken. Hou er rekening mee dat het bewerken van CSS op eigen risico is en dat je de verantwoordelijkheid moet nemen voor het ontwerp van de skin als je ervoor kiest om deze route te volgen.

Om de juiste instellingen van de skin te bespreken, kun je contact opnemen met Tixly support

Custom CSS examples

Het bewerken van CSS is op eigen risico 

Je kunt deze stukjes code kopiëren naar de css om bepaalde dingen te veranderen/verbergen.

Goed om te weten, als je iets op een pagina wilt verbergen, heb je twee opties.

• display: none;    Hierdoor wordt het element van de pagina verwijderd en komt de ruimte vrij. 
• visibility: hidden;  Dit laat het element niet zien op de pagina, maar het neemt wel ruimte in.

Afhankelijk van wat je wilt bereiken, kun je kiezen welke je wilt gebruiken.

Verberg 

/* 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;
}

Kleuren

/* 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;
}

Fonts veranderen

Voeg een font verwijzing toe door een Google font te importeren (bovenaan) of door een gehoste versie te gebruiken

/* 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 pagina

Dit wordt getoond voordat een evenement online zichtbaar is en niet in de eigen huisstijl is. Hier is een opsomming van wat kan worden toegevoegd om het te veranderen. Dit voorbeeld komt uit Kalmarsalen in Zweden.

/*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;
}

Divers

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

Voeg tekst toe aan de zaalplattegrond (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 verschillende groottes op mobiel (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;
  }
}

#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;

}

Laat de geselecteerde stoel in de zaalplattegrond knipperen

.s-s.your-seat circle {

animation: blink 1.5s linear infinite !important;

}

@keyframes blink { 

100%, 70% { opacity: 1;}

0%, 15% { opacity: 0.5;}

}        

Voegt tekst toe aan het ticket selectieblok, met wat witruimte en regeleinden.

/* 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;

}