Brandad köpprocess

I systemet kan man enkelt skapa nya brandade köpprocesser och utforma dem efter sin egen grafiska profil. Navigera till Administration > Integrationer > Skin. För att redigera existerande skin trycker man på dess rad eller på Åtgärder - Redigera. Vill man skapa ett nytt trycker man upp till höger på Add skin.  Här kan man nu redigera färger, ladda upp nya bilder samt redigera köpprocessens CSS-fil. 

Notera
Att redigera CSS sker på egen risk och man får själv ta ansvar för utformandet av sin brandade köpprocess om man väljer att gå denna väg.

Exempel på anpassad CSS

Du kan kopiera dessa kodsnuttar till css för att ändra/gömma vissa element.

Bra att veta, om du vill dölja något på en sida har du två alternativ. 

• display: none;    Detta tar bort elementet från sidan och utrymmet blir tillgängligt. 
• visibility: hidden;  Detta visar inte elementet på sidan, men det tar fortfarande upp utrymmet.

Beroende på vad du vill uppnå måste du välja vilket alternativ som passar bäst. 

Dölja element 

/* Dölj förslag i varukorgen */
.event-group-suggestion {
display: none;
}
div#BasketContainer > h2:first-child{
display: none;
} 

/* Dölj knappen för att fortsätta handla */
#BasketButtons > div.col-3.col-m-5.col-s-12 > a {
    visibility: hidden;
}

/* Dölj inloggning med sociala medier */
#SignInSocial {
display: none !important;
}
/* Dölj också texten "Eller logga in med" */
#ProfileFields h5 {
    display: none;
}

/* Dölj skippa inloggnings-knappen */
#SkipLogin {
display: none !important;
}

/* Dölj horisontella linjer i profiler */
#ProfileFields hr {
display: none !important;
}

/* Visa bara ett rekommenderat evenemang på mindre skärmar */
@media only screen and (max-width: 767px) {
  div#BasketContainer>div:nth-child(2)>div:nth-child(1n+2){
  display: none;
  }
}

/* Dölj alternativ leveransadress */
input.different-delivery, label[for=DeliveryAddress_UseDifferentDeliveryAddress] {
    display: none !important;
}

/* Dölj språk- och valutaval i menyn */
a.language-currency-link {
display: none !important;
}

/* Dölj endast det andra språkvalet i menyn */
/* Använd alternativets nummer vid val av barn i "li"-väljaren */
.language-currency-selector ul:nth-child(1) li:nth-child(2) {
display: none;
}

/* Dölj endast det andra valutaalternativet i menyn */
/* Använd alternativets nummer vid val av barn i "li"-väljaren */
.language-currency-selector ul:nth-child(2) li:nth-child(2) {
display: none;
}

Färger

/* åsidosätt primärfärg på grå bakgrunder */
#a-terms, #ExternalPayment > span
{  color: #000000;}
 #ExternalPayment > svg
{  fill: #000;}

#footer {
  background-color: #000000;
}

/* Ändra färg på upptagna platser */
.s-s.occ circle {
fill: lightgrey !important;
stroke: lightgrey !important;
}

Ändra typsnitt

Lägg till en typsnittsdefinition längst upp genom att importera ett Google-typsnitt eller använda en värdtjänst.

/* Hämta ett Google-typsnitt */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');

/* Använd värdtjänst för typsnitt*/
@font-face {
font-family: "Gotham-Book";
src: url("https://www.thetheater.com/Gotham-Book.woff") format("woff");
}

/* Anpassat typsnitt på de flesta element */
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; 
}

/* Anpassat typsnitt i översta sektionen, stora versaler */
#SiteHead2
{
font-family: Gotham-Book,Arial,Tahoma,sans-serif !important;
font-weight: 700;
text-transform: uppercase;
}

Övrigt

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

Lägg till text på salongskartan

/* Lägg till text SOCIAL DISTANCING på salongskartor */
li.pick-type-4 {
  flex-direction: column !important;
}
li.pick-type-4:after {
  visibility: visible !important;
  content: 'En cirkel består av 1, 2 eller 3 platser. Vi lämnar 2 lediga stolar mellan varje cirkel. De tomma stolarna kan säljas om myndigheterna tillåter det.';
}

Logotyp i annan storlek på mobil

/* Andra logotypmått på mobil */

@media only screen and (max-width: 480px) {
  #SiteHead2 h1.logo 
  {
    width: 67px !important;
  }
  /* Detta döljer också den horisontella linjen */
  #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;

}

Få den valda platsen i salongen att blinka

.s-s.your-seat circle {

animation: blink 1.5s linear infinite !important;

}

@keyframes blink { 

100%, 70% { opacity: 1;}

0%, 15% { opacity: 0.5;}

}        

Lägg till text i biljettvalsboxen, med lite vit mellanrum och radbrytningar. 

/* extra text biljettvalsbox */

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

  white-space: pre-wrap !important;

  content: "\a XXX " !important;

  font-weight: normal !important;

  font-size: 13px !important;

}