Customizing Booking Engine Texts with CSS

Sirvoy provides possibilities to change texts and translations on the admin pages for the booking engine, but in cases where there is no option you can modify some texts with CSS by targeting a specific element class.

Elements that have the class “sirvoy-flexible-text” can be modified from the custom CSS page. 

1. Go to Settings -> Booking engines. 
2. Click the three dots adjacent to the booking engine you want.
3. In the drop-down list, click “Edit.”
4. Click the “Custom CSS” tab.

All elements that have the class “sirvoy-flexible-text” also have a:

1.  Specific class “sft-trans-key-SPECIFIC-KEY”.
2.  Language-specific class to pinpoint a text change for a specific language, for example in English: “sft-lang-en”. (Each language is represented by a two-letter language code; English “-en”, French “-fr”, Swedish “-sv” etc.)

An Example of How to Change the “Search” Button Title

The markup for the “Search” button title is:
(notice the two classes “sft-lang-en” and “sft-trans-key-shared-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>

To change the “Search” button title for English and Swedish you can do the following:

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

English version:

Swedish version:

The above principles for changing texts apply to any other text changes you would like to make in the booking engine in elements with the class “sirvoy-flexible-text”.