Puedes personalizar tanto la apariencia como el texto de tu motor de reservas incrustado utilizando CSS. Esto te permite ocultar elementos, ajustar diseños o reemplazar etiquetas predeterminadas, incluso cuando no existe una opción integrada para hacerlo. Se necesita un conocimiento básico de CSS, pero hemos hecho que sea fácil trabajar con la estructura.

Cómo acceder al editor de CSS

1. Ve a Funciones web > Motores de reservas.
2. Haz clic en los tres puntos en la misma fila del motor de reservas que deseas modificar.
3. Haz clic en Editar en el menú desplegable.
4. Ve a la pestaña CSS personalizado.

Entiende la estructura CSS

Para mantener tus personalizaciones simples y confiables, Sirvoy utiliza la convención de nomenclatura BEM (Block, Element, Modifier). Esto te ayuda a escribir CSS que es más fácil de leer y menos propenso a romperse con futuras actualizaciones.

Evita usar selectores de clase que comiencen con js- o sirvoy- (excepto cuando se indique más abajo), y evita usar selectores de ID. Estos pueden cambiar sin previo aviso y no están no están diseñados para dar formato.

Cambia texto usando CSS

Sirvoy no ofrece una configuración integrada para cambiar cada etiqueta en el motor de reservas, pero aún puedes cambiar algunas apuntando a clases específicas en tu CSS personalizado.

Los elementos de texto que se pueden editar de esta manera siempre usan la clase sirvoy-flexible-text. Estos también vienen con:

• Una clase con clave de traducción como sft-trans-key-shared-button-search
• Una clase de idioma como sft-lang-en (para inglés), sft-lang-fr (para francés), o sft-lang-sv (para sueco)

Ejemplo: Cambiar la etiqueta del botón de Búsqueda

Para cambiar la etiqueta del botón "Search" en inglés y sueco, sigue estos pasos.

1. Identifica el elemento objetivo

Así es como se ve el marcado original en el motor de reservas:

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

Las clases clave aquí son:

• sft-lang-en o sft-lang-sv: El idioma.
• sft-trans-key-shared-button-search: La clave de traducción para el botón "Search".
• sft-text: El contenedor para el texto original.

2. Agrega CSS para anular la etiqueta

Utiliza el siguiente CSS para ocultar la etiqueta original e insertar una nueva basada en el idioma:

.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. Aplica la misma técnica en otros lugares

Puedes usar este mismo enfoque para cambiar cualquier otra etiqueta o elemento de texto en el motor de reservas que utilice la clase sirvoy-flexible-text. Solo inspecciona el elemento, identifica sus clases de idioma y clave de traducción, y aplica CSS similar.