Tixly-brandede online købsproces

I systemet kan du nemt lave din egen brandede købsproces og designe den efter din egen brandmanual via Administration > Integrationer > Skin. For at rette eksisterende skinds, tryk på et skin eller på Handlinger > Rediger. Hvis du vil lave et nyt skin, tryk på Tilføj Skin i øverste højre hjørn. Her kan du ændre farver, uploade nye billeder og redigere købsflowets CSS-fil. 

For at diskutere den korrekte opsætning af skins, kontakt venligst Tixly Support. 

CSS eksempler

At redigere CSS er på eget ansvar, og hvis du vælger at ændre i din købsproces' CSS er du selv ansvarlig for designet af købsflowet.

Du kan kopiere nedenstående kodestykker ind i CSS-filen for at ændre eller skjule forskellige dele. 

Godt at vide, at hvis du skjuler noget på en side har du to muligheder: 

• display: none;    Dette fjerner elementet fra siden, og pladsen vil være tilgængelig. 
• visibility: hidden;  Dette viser ikke elementet på siden, men den vil stadig kræve den samme plads. 

Så alt efter hvad du ønsker, skal du vælge hvilken af mulighederne du ønsker. 

Skjule dele  

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

Farver

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

Ændr fonte

Tilføj en font definition i toppen ved at importere en google font eller bruge en 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;
}

Eventsiden

Dette vises før et event er synligt online og er ikke branded som standard. Her er hvad der kan tilføjes for at ændre dette.

Eksemplet er taget fra Kalmarsalen i Sverige.

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

Forskelligt

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

Tilføj tekst til salsvisningen (Eksempel fra 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 i forskellige størrelser på mobile enheder (Eksempel fra 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;

}

Gør så de valgte sæder i sædevælgeren blinker når de vælges.

.s-s.your-seat circle {

animation: blink 1.5s linear infinite !important;

}

@keyframes blink { 

100%, 70% { opacity: 1;}

0%, 15% { opacity: 0.5;}

}        

Tilføj tekst til billetvælger-boksen med noget white space og linjeskift.

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

}