Hoe pas ik de kleuren van de ticketshop aan?

De kleuren van de ticketshop die je middels de code op je website hebt geplaatst kan je aanpassen door CSS toe te voegen aan je website. Hierbij een overzicht van de CSS selectors die je kunt gebruiken om je webshop op maat te maken. We onderscheiden twee niveau’s van de ticketshop die je kunt aanpassen. Allereerst de :root { } , daar kan je alles aanpassen in de ticketshop. Kleuren van de ticketshop, lettertype, achtergronden en afmetingen/vormen van de elementen. Naast alle elementen in de ticketshop kan je met #tly-shop{ } alles aanpassen dat buiten de ticketshop ligt. Bijvoorbeeld de breedte en hoogte van de ticketshop.

Aanpassen CSS in de Ticketshop:
 
      :root {
        --tly-font-family: 'Roboto';
        --tly-color-text: white;

        --tly-section-backgroundcolor: black;
        --tly-section-divider-color: rgba(255, 255, 255, 0.4);

        --tly-spinner-button-backgroundcolor: orange;
        --tly-spinner-button-color: black;
        --tly-spinner-button-border-radius: 4px;
        --tly-spinner-button-size: 2.5rem;
        --tly-spinner-count-font-size: 2rem;

        --tly-header-font-size: 1rem;
        --tly-title-text-transform: uppercase;
        --tly-title-font-size: 1.3rem;
        --tly-title-text-align: center;
        --tly-calendar-display: none;
        --tly-date-row-display: none;
        --tly-location-row-display: none;

        --tly-next-button-backgroundcolor: orange;
        --tly-next-button-color: var(--tly-spinner-button-color);
        --tly-next-button-text-transform: uppercase;
        --tly-next-button-height: 40px;
        --tly-next-button-letter-spacing: 5px;

        --tly-link-color: orange;
        --tly-link-decoration: underline;
        --tly-link-text-transform: uppercase;
        --tly-link-letter-spacing: 1px;

        --tly-price-label-font-size: 1.2rem;
        --tly-price-label-text-transform: uppercase;
        --tly-price-label-font-weight: bold;

        --tly-checkbox-size: 30px;
        --tly-checkbox-border-width: 2px;
        --tly-checkbox-checked-marker-color: orange;

        --tly-radio-checked-marker-color: orange;
        --tly-radio-border-width: 2px;
        --tly-radio-size: 25px;

        --tly-textinput-border-color: white;
        --tly-textinput-selected-border-color: orange;
        --tly-textinput-border-width: 2px;

        --tly-select-border-width: 2px;

        --tly-error-text-transform: uppercase;
        --tly-success-text-transform: uppercase;
        --tly-success-background-color: orange;
        --tly-success-color: black;

        --tly-order-number-color: orange;
        --tly-order-number-font-weight: bold;
        --tly-order-number-text-transform: uppercase;
        --tly-order-number-letter-spacing: 2px;

        --tly-soldout-label-font-size: 1.2.rem;
        --tly-soldout-label-text-transform: uppercase;
        --tly-soldout-label-color: orange;
        --tly-soldout-label-font-weight: bold;

        --tly-loading-indicator-color: blue;
      }
   

Aanpassen omgeving ticketshop bijvoorbeeld de breedte:

#tly-shop{
         width:600px ;
 }

Bovenstaande code geeft dit resultaat: