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
Les templates et leur variante :
Basic
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;
}
- Ahora quiero cambiar el tamaño de la fuente del título de mi secuencia para aumentarlo
.titre{
font-size : 20px;
}
- 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;
}