Met CSS kun je zowel het uiterlijk als de tekst van je ingebouwde booking engine aanpassen. Hiermee kun je elementen verbergen, layouts aanpassen of standaardlabels vervangen, zelfs als er geen ingebouwde instelling bestaat. Er is enige basiskennis van CSS nodig, maar we hebben de structuur gebruiksvriendelijk gemaakt.

Hoe toegang te krijgen tot de CSS-editor

1. Ga naar Web tools > Booking engines.
2. Klik op de drie puntjes in dezelfde rij als de booking engine die je wilt wijzigen.
3. Klik op Bewerken in het vervolgkeuzemenu.
4. Ga naar het Aangepaste CSS-tabblad.

Inzicht in de CSS-structuur

Om ervoor te zorgen dat je aanpassingen eenvoudig en betrouwbaar blijven, gebruikt Sirvoy de naamgevingsconventie BEM (Block, Element, Modifier). Dit helpt je om CSS te schrijven die gemakkelijker te lezen is en minder snel kapot gaat bij toekomstige updates.

Vermijd het gebruik van class-selectors die beginnen met js- of sirvoy- (behalve waar hieronder anders aangegeven), en gebruik geen ID selectors. Deze kunnen zonder voorafgaande kennisgeving worden gewijzigd en zijn niet bedoeld voor styling.

Tekst wijzigen met CSS

Sirvoy heeft geen ingebouwde instelling om alle labels in de booking engine te wijzigen, maar je kunt er toch een paar aanpassen door specifieke klassen in je aangepaste CSS te selecteren.

Tekstelementen die op deze manier kunnen worden bewerkt, gebruiken altijd de klasse sirvoy-flexible-text. Deze bevatten ook:

• Een vertaalsleutel-klasse zoals zoals sft-trans-key-shared-button-search
• Een taalklasse zoals sft-lang-en (voor Engels), sft-lang-fr (voor Frans), of sft-lang-sv (voor Zweeds)

Voorbeeld: Het label van de Zoekknop wijzigen

Volg deze stappen om het label van de knop "Zoeken" in zowel het Engels als het Nederlands te wijzigen.

1. Identificeer het doelelement

Zo ziet de originele opmaak eruit in de booking engine:

<span class="
  sirvoy-flexible-text 
  sft-lang-en 
  sft-trans-key-shared-button-search 
  sft-initialized" 
  data-translation-key = "shared.button.search">
           
  <div class="sft-text">
     Search
  </div>
</span>
 

De sleutelklassen hier zijn:

• sft-lang-en of sft-lang-sv: De taal.
• sft-trans-key-shared-button-search: De vertaalsleutel voor de knop “Zoeken”.
• sft-text: De container voor de originele tekst.

2. Voeg CSS toe om het label te overschrijven

Gebruik de volgende CSS om het originele label te verbergen en een nieuw label in te voegen dat is gebaseerd op de taal:

.sft-lang-en.sft-trans-key-shared-button-search .sft-text,
.sft-lang-sv.sft-trans-key-shared-button-search .sft-text {
 display: none !important;
}

.sft-lang-en.sft-trans-key-shared-button-search::after {
 content: "Mijn knoptitel";
}

.sft-lang-sv.sft-trans-key-shared-button-search :: after {
 content: "Mijn knoptitel";
}

3. Dezelfde techniek elders toepassen

Deze aanpak kan ook worden gebruikt om andere labels of tekstelementen in de booking engine te wijzigen die gebruikmaken van de sirvoy-flexible-text-klasse. Inspecteer simpelweg het element, bepaal welke taal- en vertaalsleutel-klassen het gebruikt, en pas vervolgens vergelijkbare CSS toe.