Webshop im eigenen Corporate Design

Ihren Webshop können Sie ganz einfach in Ihrem Corporate Design erstellen und diese entsprechend Ihrem grafischen Profil gestalten. Navigieren Sie dazu zu Administration > Integrationen > Skin.

Um bestehende Skins zu bearbeiten, klicken Sie auf die gewünschten Skin oder auf Aktionen > Bearbeiten. Falls Sie eine neue Skin erstellen möchten, wählen Sie oben rechts Skin hinzufügen.

Hier haben Sie die Möglichkeit, Farben anzupassen, neue Bilder hochzuladen und die CSS-Datei des Webshops zu bearbeiten.

Um die korrekten Einstellungen der Skins zu besprechen, kontaktieren Sie bitte Ihren Tixly-Support.

Benutzerdefinierte CSS-Beispiele

Die Bearbeitung des CSS erfolgt auf eigene Gefahr. Sie tragen die volle Verantwortung für das Design Ihres gebrandeten Webshops, wenn Sie sich für diesen Weg entscheiden.

Sie können diese Codeschnipsel in die CSS-Datei kopieren, um bestimmte Dinge zu ändern/ auszublenden.

Gut zu wissen: Wenn Sie etwas auf einer Seite ausblenden möchten, haben Sie zwei Möglichkeiten.

• display: none;    Dadurch wird das Element von der Seite entfernt. Der Platz im CSS wird frei.
• visibility: hidden;  Dadurch wird das Element zwar nicht auf der Seite angezeigt, aber es nimmt trotzdem Platz im CSS in Anspruch.

Je nachdem, was Sie erreichen wollen, müssen Sie sich für eine Option entscheiden. 

Elemente verbergen 

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

Farbgebung

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

Schriftarten ändern

Fügen Sie eine Schriftdefinition hinzu, indem Sie Google Font importieren oder eine gehostete Version verwenden.

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

Veranstaltungsseite

Dies wird angezeigt, bevor eine Veranstaltung online sichtbar ist, und enthält standardmäßig kein Branding. Hier wird erläutert, welche Anpassungen vorgenommen werden können, um dies zu ändern.
Das gezeigte Beispiel:  Spielstätte "Kalmarsalen" in Schweden.)

/*EVENT PAGE*/

/*Dies ändert das Logo auf der Veranstaltungsseite*/

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

/*Dies blendet das Suchsymbol aus*/

.search-trigger {
  display: none;
}

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

/*Dies blendet das Sprachmenü aus*/

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

/*Dies blendet das Adressfeld in der Fußzeile aus*/

.address {
  display: none;
}

/*Dies blendet die AGB-Links und die Symbole für soziale Medien in der Fußzeile aus*/

.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;
}

Verschiedenes

Die Überschriften im Webshop: ohne Bild und ohne Schattierung, mit unterschiedlichen Farben und Schriftarten. (Spielstätte: deSingel Antwerpen) 

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

Text auf Saalplan hinzufügen (Spielstätte: deSingel in Antwerpen)

/* Add text SOCIAL DISTANCING hallmaps */
li.pick-type-4 {
  flex-direction: column !important;
}
li.pick-type-4:after {
  visibility: visible !important;
  content: 'Neben jedem Sitzplatz wird jeweils ein Sitzplatz freigehalten. Diese freigehaltenen Plätze können jedoch noch verkauft werden, wenn sich die Hygeniemaßnahmenregeln wieder ändern sollten.';
}

Logo in unterschiedlicher Größe auf mobilen Geräten (Spielstätte: Concertgebouw Amsterdam)

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

Verbessern Sie das Aussehen von Warenkorb-Nachrichten und Empfehlungen im Webshop:

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

}

Einen ausgewählten Sitzplatz im Saalplan aufscheinen lassen:

.s-s.your-seat circle {

animation: blink 1.5s linear infinite !important;

}

@keyframes blink { 

100%, 70% { opacity: 1;}

0%, 15% { opacity: 0.5;}

}        

Fügen Sie dem Ticketauswahlfeld einen Text mit Leerraum und Zeilenumbrüchen hinzu:

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

}