Du kan gjøre endringer på både utseendet og teksten til bookingmotoren ved å bruke CSS. Du kan skjule elementer, justere utformingen og bytte ut standardetiketter, selv når det ikke finnes noen innebygde innstillinger. Det er nødvendig med noe grunnleggende kunnskap om CSS, men vi har gjort oppsettet enkelt å jobbe med.

Slik får du tilgang til CSS-verktøyet

1. Gå til Nettverktøy > Bookingmotorer.
2. Klikk på de tre prikkene i samme rad som bookingmotoren du vil endre.
3. Klikk på Rediger i rullegardinmenyen.
4. Velg fanen Egendefinert CSS.

Bli kjent med CSS-oppsettet

For at det skal være enkelt å gjøre endringer, bruker Sirvoy navnkonvensjonene BEM (Block, Element, Modifier). Dette hjelper deg til å skrive CSS som er lettere å lese og mindre sannsynlig å bli ødelagt med framtidige oppdateringer.

Unngå å bruke kategorivelgere som begynner med js- eller sirvoy- (bortsett fra tilfellene nedenfor), og unngå å bruke ID-velgere. Disse kan endres uten forvarsel og er ikke laget for design.

Bruk CSS til å endre tekst

Sirvoy har ikke en innebygd innstilling for å endre hver enkelt etikett i bookingmotoren, men du kan fortsatt gjøre visse endringer ved å sikte deg inn på bestemte kategorier i egendefinert CSS.

Tekstelementer som kan redigeres på denne måten, bruker alltid kategorien sirvoy-flexible-text. Disse kommer også med følgende:

• En oversettelsesnøkkel-kategori som sft-trans-key-shared-button-search
• En språkkategori som sft-lang-en (for engelsk), sft-lang-fr (for fransk) og eller sft-lang-sv (for svensk)

Eksempel: Slik endrer du Søk-knappen

Følg disse trinnene for å endre «Søk»-knappen til både engelsk og svensk.

1. Identifiser målelementet

Slik ser den opprinnelige konfigureringen ut i bookingmotoren:

<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 viktigste kategoriene:

• sft-lang-en eller sft-lang-sv: Språket.
• sft-trans-key-shared-button-search: Oversettelsesnøkkelen for «Søk»-knappen.
• sft-text: Beholderen for den opprinnelige teksten.

2. Legg til CSS for å overstyre etiketten

Bruk følgende CSS-kode for å skjule den opprinnelige etiketten og sette inn en ny basert på valgt språk:

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

3. Bruk den samme framgangsmåten andre steder

Du kan bruke denne samme framgangsmåten for å endre en hvilken som helst etikett eller tekst i bookingmotoren som bruker kategorien sirvoy-flexible-text. Inspiser elementet, identifiser språket og oversettelsesnøkkelkategoriene, og bruk lignende CSS.