Tilpass tekst i bookingmotoren med CSS

Sirvoy gir mulighet til å endre tekster og oversettelser i bookingmotoren, men i tilfeller der det ikke er tilgjengelig, kan du bruke tilpasse teksten med CSS ved å bruke en spesifikk elementklasse.

Elementer som tilhører gruppen «sirvoy-flexible-text» kan endres ved hjelp av CSS på siden «Egendefinert CSS». 

1. Gå til Innstillinger -> Bookingmotorer. 
2. Klikk på de tre prikkene ved siden av bookingmotoren du ønsker.
3. Klikk på «Rediger» i rullegardinlisten.
4. Velg siden «Egendefinert CSS».

Alle elementer som har klassen «sirvoy-flexible-text» har også:

1. En spesifikk klasse “sft-trans-key-SPECIFIC-KEY”.
2. Språkspesifikk klasse for å gjøre en tekstendring på et bestemt språk, for eksempel: “sft-lang-en” (engelsk). (Hvert språk representeres med en språkkode på to bokstaver; engelsk «-en», fransk «-fr», svensk «-sv» osv.)

Et eksempel på hvordan du endrer tittelen på «Søk»-knappen

Markupen for tittelen på «Søk»-knappen er:

(legg merke til de to klassene «sft-lang-en» og «sft-trans-key-booking-form-button-search» )

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

For å endre «Søk»-tittelen på engelsk og svensk kan vi gjøre følgende:

.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: "My button title";
}

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

Engelsk versjon:

Svensk versjon:

Prinsippene vist ovenfor for endring av tekster gjelder også for andre tekstendringer du ønsker å gjøre i bookingmotoren i elementer med klassen “sirvoy-flexible-text”.