Du kan anpassa både utseendet och texten på ditt inbäddade bokningsformulär med hjälp av CSS. Detta gör att du kan dölja element, justera layouten eller ersätta standardtexter – även när det inte finns någon inbyggd inställning för det. Viss grundläggande kunskap i CSS behövs, men vi har gjort strukturen enkel att arbeta med.

Så öppnar du CSS-redigeraren

1. Gå till Webbverktyg > Bokningsformulär.
2. Klicka på de tre prickarna på samma rad som det bokningsformulär du vill modifiera.
3. Klicka Redigera i rullgardinsmenyn.
4. Gå till fliken Anpassad CSS.

Förstå CSS-strukturen

För att hålla dina anpassningar enkla och pålitliga använder Sirvoy namngivningskonventionen BEM (Block, Element, Modifier). Det gör din CSS mer lättläst och minskar risken att något slutar fungera vid framtida uppdateringar.

Undvik att använda klassväljare som börjar med js- eller sirvoy- (utom där det noteras nedan), och undvik att använda “ID-selectors”. Dessa kan ändras utan förvarning och är inte avsedda för styling.

Ändra text med CSS

Sirvoy erbjuder ingen inbyggd inställning för att ändra varje enskilt textelement i bokningsformuläret, men du kan fortfarande ändra vissa genom att rikta in dig på specifika klasser i din anpassade CSS.

Textkomponenter som kan redigeras på detta sätt använder alltid klassen sirvoy-flexible-text. Dessa har även:

• En översättningsnyckel som sft-trans-key-shared-button-search
• En språkspecific klass som sft-lang-en (för engelska), sft-lang-fr (för franska), eller sft-lang-sv (för svenska)

Exempel: Ändra etiketten för Sök-knappen

Så här ändrar du texten på knappen “Sök” på både engelska och svenska.

1. Identifiera målelementet

Så här ser den ursprungliga koden ut i bokningsformuläret:

<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 viktiga klasserna här är:

• sft-lang-en eller sft-lang-sv: Språket.
• sft-trans-key-shared-button-search Översättningsnyckeln för "Sök"-knappen.
• sft-text: Behållaren för den ursprungliga texten.

2. Lägg till CSS för att ersätta texten

Använd följande CSS för att dölja originaltexten och visa en ny, beroende på 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. Använd samma metod på andra texter

Du kan använda samma tillvägagångssätt för att ändra andra etiketter eller textelement i bokningsformuläret som använder klassen sirvoy-flexible-text. Inspektera elementet, identifiera språkklassen och översättningsnyckeln, och lägg till liknande CSS.