Passer au contenu

Cómo modificar mis plantillas

Cómo modificar mis plantillas

Miércoles 4 de enero de 2023

Todas las versiones de este artículo: [Deutsch] [English] [Español] [français]

En primer lugar, debe saber que cualquier estilo asignado a una audioguía puede ser sobrecargado por estilos asignados a una secuencia.

Se está desarrollando una versión futura que permitirá modificar las plantillas de forma más sencilla.
Mientras tanto, he aquí cómo hacerlo:

Dónde fijar el estilo

Para cambiar el estilo de toda la audioguía

1) Selecciona una audioguía en la pantalla de inicio.
2) Haga clic en "editar información de la audioguía".
3) Haga clic en la sección "style" se abrirá un campo de entrada.

Para cambiar el estilo de una secuencia

1) Selecciona una audioguía en la pantalla de inicio.
2) Haga clic en la secuencia que desee modificar.
3) Haga clic en la sección "estilo" se abrirá un campo de entrada.

¡Atención! : Si la secuencia se ha creado en varios idiomas, será necesario copiar el código introducido en el idioma principal y pegarlo en la sección de estilo de cada idioma.

Qué poner en la sección de estilo

El estilo se modifica con css. Es decir, con un elemento style y una propiedad style. De la siguiente manera :

Elemento de estilo {
   propiedad style :  style ;
}      

En el caso de una audioguía, es posible que tenga que modificar :

  • Color
  • Color de fondo
  • Tamaño de fuente

Color :

  • Con la propiedad: color :
  • Para el estilo ponga un color por su nombre en inglés, o introduzca el código href de un color por ejemplo para el blanco: #ffffff.
    Encontrará fácilmente sitios que le proporcionarán estos códigos realizando una búsqueda de Internet.

Color de fondo :

  • Con la propiedad: background :
  • Como antes, introduzca el nombre en inglés de un color, o su código href.

Tamaño de fuente :

  • Con la propiedad: font-size:
  • Introduzca un número seguido de px que significa píxel. Es aconsejable no fijar un tamaño inferior a 16 píxeles.

Si quieres cambiar otros elementos no dudes en hacer una búsqueda en la web indicando lo que quieres hacer y la redacción css.
Esto debería proporcionarle las propiedades de estilo y los estilos asociados.

Si no puede hacer lo que quiere, no dude en ponerse en contacto con nosotros.

Elemento de estilo

Las plantillas y sus variantes : :

Basic

Nota 1: Esta plantilla no permite modificar gráficamente la barra de audio.
Elemento a modificar Identificador del elemento
Número .big_number
Fondo para los botones "Anterior" y "Siguiente" #btn_Prev, #btn_Next
Iconos de los botones Anterior y Siguiente No modificable
Botón del escáner .scan
Título de la secuencia #titreSequence

Moiron

Elemento a modificar Identificador del elemento
En segundo plano body
Bandeau de l’image .header-dark
Imagen .image-seq
Título de la secuencia #titreSequence
Texto #texteSequence
Separador de texto #separateur
Botón play/pausa #play-btn
Botones Anterior - Siguiente #btn_Prev, #btn_Next

Élémentaire

Elemento a modificar Identificador del elemento
En segundo plano body
Título de la secuencia #titreSequence
Imagen .image-seq
Set de botones .boutons
Botón play/pausa #play-btn
Botones Anterior - Siguiente #btn_Prev, #btn_Next
Botón de texto #btn-parole

Esta plantilla utilizará la ventana modal del texto para mostrarlo.

Élémentaire - Variante Elementaire-bis

Elemento a modificar Identificador del elemento
En segundo plano body
Título de la secuencia #titreSequence
Imagen .image-seq
Fondo de los botones .boutons .arrow-wrapper
Fondo del botón de play/pausa .boutons .arrow-wrapper .btn-Play-Pause
Icono del botón Play .btn-Play-Pause .play
Icono del botón de pausa .btn-Play-Pause .pause
Icono de los botones Anterior - Siguiente : Parte de flecha (triángulo) .arrow-right, .arrow-left Cambia el color utilizando la propiedad background-color
Iconos de los botones anterior y siguiente: barra .arrow-bar Cambia el color utilizando la propiedad border-color
Texto #texteSequence
Separador de texto #separateur

Moiron-Vignette

Elemento a modificar Identificador del elemento
En segundo plano body
Título de la secuencia #titreSequence
El fondo de la imagen .vignette
Botones .controls .btn
Texto #texteSequence
Botón de texto .btn-parole

Variante infos

Elemento a modificar Identificador del elemento
Fondo del marco informativo .container-infos
Título de la secuencia #titreSequence
Texto .infos #texteSequence
zona de información o-dguide .infospeodguide
Enlace O-DGuide .infospeodguide a
Texto de O-DGuide .infospeodguide p

Variante Liste

Elemento a modificar Identificador del elemento
En segundo plano body
El fondo de la lista #seqliste
Elemento de la lista .lesSequences
el fondo del elemento seleccionado en la lista .lesSequences.active
Fondo del botón de play/pausa .contour
Fondo del botón Play/Pausa del elemento seleccionado .lesSequences.active .contour
Botón Play .play
Botón Play del elemento seleccionado .lesSequences.active .play
Botón de pausa .pause
Título de la secuencia .titreSequence
Botón de texto .btn-text




Otros :

Navegación

Elemento a modificar Identificador del elemento
Barra de navegación .navbar
Título de la audioguía #titreAudioguide
Todos los enlaces .navbar-nav
Elemento .nav-item
Enlace .nav-link
Velocidad de lectura - no seleccionable #accesModalVitesse.disabled

Botón de menú : Elementaire - Moiron

  • Fondo del botón : #mobileMenuTrigger
  • Las líneas del botón : #mobileMenuTrigger span

Botón de menú : Basic - Moiron Vignette

  • Fondo del botón : .navbar-light .navbar-toggler
  • Las líneas del botón : No modificable

Gestión de audio

Estos elementos se aplican a todas las plantillas a excepción de Basic.

Elemento a modificar Navegador Identificador del elemento
En segundo plano Firefox input[type="range"]::-moz-range-track (de base)
input[type="range"]::-moz-range-progress (en progression)
Chrome input[type="range"]::-webkit-slider-runnable-track
Ronda de progreso Firefox input[type="range"]::-moz-range-thumb
Chrome input[type="range"]::-webkit-slider-thumb
Foco del círculo de progreso Firefox input[type="range"]:focus::-moz-range-thumb
Chrome input[type="range"]:focus::-webkit-slider-thumb
Tiempo actual de audio .current-time
Tiempo total de audio .song-duration

Ventana modal de velocidad de lectura

Elemento a modificar Identificador del elemento
Efecto borroso detrás de la ventana .modal-vitesse
El fondo de la ventana .modal-vitesse-content
Botón en cruz - Fondo .modal-close
Botón en cruz - línea .modal-close div
Título de la ventana .modal-title
Texto .modal-description-vitesse
Botones de velocidad #modal-vitesse .button-default
Velocidad actual .speedcontainer
Botón Ok #vitesse-ok

Ventana modal de texto

Elemento a modificar Identificador del elemento
Efecto borroso detrás de la ventana .modal-text
El fondo de la ventana .content-modal-text
Botón en cruz - Fondo .modal-close
Botón en cruz - línea .modal-close div
Título de la ventana .text-title
Texto #texteSequence
Botón Cerrar #text-ok

Páginas : Elección de lengua - Elección de secuencia

Elemento a modificar Identificador del elemento
Área que abarca los elementos (diferente del fondo) .sequence-liste #maincontent, .langue_visite #maincontent
Título de la audioguía .sequence-liste .titre, .langue_visite .titre
Subtítulo .sequence-liste .soustitre, .langue_visite .soustitre
Zona que engloba la lista .liste
Item .item
Enlace .lien

Página : nueva visita

Elemento a modificar Identificador del elemento
Área que abarca los elementos (diferente del fondo) .nouvelle_visite #maincontent
Botón Atrás .annule-retour-nvlle-visite
Títulos de las zonas #zoneCodeVisite h2, #sectionScanQrc h2
Zona de entrada de códigos #champ_code_visite
Botón de inicio #zoneCodeVisite button.submit
Texto del escáner #sectionScanQrc b, #sectionScanQrc span



Ver un ejemplo

  • Me gustaría cambiar el color de fondo a un verde azulado. Encontré el código href en internet de la siguiente manera : 0f8499.

    body {
     background : #0f8499;
    }
  • Por último, me gustaría cambiar el color de la escritura en mi siguiente, play y botones anteriores a blanco, sino también cambiar el color de fondo a gris

    #btn_Prev, #btn_Next, #play-btn{
         color:#ffffff;
         background:#596266;
    }

Intente modificar sus plantillas ahora.
Si tiene alguna pregunta, no dude en ponerse en contacto con nosotros

Ver también: Las plantillas