Du kan tilpasse både udseendet og teksten i din indlejrede reservationsformular ved hjælp af CSS. Dette giver dig mulighed for at skjule elementer, justere layouts eller erstatte standardetiketter—selv når der ikke findes en indbygget indstilling. Der kræves grundlæggende kendskab til CSS, men vi har gjort strukturen nem at arbejde med.

Sådan får du adgang til CSS-editoren

1. Gå til Webværktøjer > Reservationsformularer.
2. Klik på de tre prikker på samme række som den reservationsformular, du ønsker at ændre.
3. Klik på Rediger i rullemenuen.
4. Gå til fanen Brugerdefineret CSS.

Forstå CSS-strukturen

For at holde dine tilpasninger enkle og pålidelige bruger Sirvoy navngivningsstandarden BEM (Block, Element, Modifier). Det hjælper dig med at skrive CSS, der er lettere at læse og mindre tilbøjelig til at støde på fejl ved fremtidige opdateringer.

Undgå at bruge klassevælgere, der begynder med js- eller sirvoy- (medmindre andet er angivet nedenfor), og undgå at bruge ID-vælgere. Disse kan ændre sig uden varsel og er ikke beregnet til styling.

Ændring af tekst ved hjælp af CSS

Sirvoy tilbyder ikke en indbygget indstilling til at ændre hver eneste etiket i reservationsformularen, men du kan stadig ændre visse tekster ved at målrette specifikke klasser i din brugerdefinerede CSS.

Tekstelementer, der kan redigeres på denne måde, bruger altid klassen sirvoy-flexible-text. Disse indeholder også:

• En oversættelsesnøgle-klasse som sft-trans-key-shared-button-search
• En sprogklasse som sft-lang-en (for engelsk), sft-lang-fr (for fransk) eller sft-lang-sv (for svensk)

Eksempel: Ændre teksten på søgeknappen

Følg disse trin for at ændre teksten på "Søg"-knappen på både engelsk og svensk.

1. Identificer målelementet

Sådan ser den oprindelige markup ud i reservationsformularen:

<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 vigtige klasser her er:

• sft-lang-en eller sft-lang-sv: Sproget.
• sft-trans-key-shared-button-search: Oversættelsesnøglen for "Søg"-knappen.
• sft-text: Beholderen for den oprindelige tekst.

2. Tilføj CSS for at overskrive teksten

Brug følgende CSS for at skjule den oprindelige tekst-etiket og indsætte en ny baseret på sproget:

.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. Brug samme metode andre steder

Du kan bruge den samme fremgangsmåde til at ændre enhver anden etiket eller tekst i reservationsformularen, der bruger klassen sirvoy-flexible-text. Undersøg blot elementet, identificér dets sprog- og oversættelsesnøgleklasser, og anvend tilsvarende CSS.