Vous pouvez personnaliser à la fois l'apparence et le texte de votre moteur de réservation intégré en utilisant du CSS. Cela vous permet de masquer des éléments, d'ajuster des mises en page ou de remplacer des étiquettes par défaut, même en l'absence de paramètres intégrés. Quelques connaissances de base en CSS sont nécessaires, mais nous avons rendu la structure facile à utiliser.

Comment accéder à l'éditeur CSS

1. Allez dans Outils web > Moteurs de réservation.
2. Cliquez sur les trois points de la ligne correspondant au moteur de réservation que vous souhaitez modifier.
3. Cliquez sur Modifier dans le menu déroulant.
4. Accédez à l'onglet CSS personnalisé.

Comprendre la structure CSS

Pour garantir que vos personnalisations restent simples et fiables, Sirvoy applique la convention de nommage BEM (Bloc, Élément, Modificateur). Elle facilite l'écriture de CSS plus lisible et moins susceptible d'être compromis par de futures mises à jour.

Évitez d'utiliser des sélecteurs de classe qui commencent par js- ou sirvoy- (sauf indication contraire ci-dessous), et préférez ne pas utiliser de sélecteurs d'ID. Ceux-ci peuvent changer sans préavis et ne sont pas destinés au style.

Changer le texte à l'aide de CSS

Sirvoy ne propose pas de paramètre intégré pour changer chaque étiquette dans le moteur de réservation, mais il est possible d'en changer certaines en ciblant des classes spécifiques dans votre CSS personnalisé.

Les éléments de texte qui peuvent être modifiés de cette manière utilisent toujours la classe sirvoy-flexible-text. Ceux-ci sont également associés à :

• Une classe de clé de traduction comme sft-trans-key-shared-button-search
• Une classe de langue comme sft-lang-en (pour l'anglais), sft-lang-fr (pour le français), ou sft-lang-sv (pour le suédois)

Exemple: changer l'étiquette du bouton de recherche

Pour changer l'étiquette du bouton « Recherche » en anglais et en suédois, suivez les étapes ci-dessous.

1. Identifier l'élément cible

Voici à quoi ressemble le balisage original dans le moteur de réservation :

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

Les classes principales ici sont :

• sft-lang-en ou sft-lang-sv : la langue.
• sft-trans-key-shared-button-search : la clé de traduction pour le bouton « Recherche ».
• sft-text : le conteneur pour le texte original.

2. Ajouter du CSS pour remplacer l'étiquette

Utilisez le CSS suivant pour masquer l'étiquette originale et en insérer une nouvelle selon la langue :

.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. Appliquer la même technique dans d'autres cas

Vous pouvez utiliser cette même approche pour changer toute autre étiquette ou tout autre élément de texte dans le moteur de réservation qui utilise la classe sirvoy-flexible-text. Il suffit d'inspecter l'élément, d'identifier ses classes de langue et de clé de traduction, et d'appliquer un CSS similaire.