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 style {
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
pxque 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.
Modificación gráfica de la página principal de la audioguía
Elementos de estilo
Para todas las audioguías
| Elemento que debe modificarse | Identificador del elemento |
|---|---|
| Fondo | body |
| Título | .titre |
| Botón Anterior | #btn_Prev |
| Botón siguiente | #btn_Next |
Para Moiron - Moiron Vignette - Standard
| Elemento que debe modificarse | Identificador del elemento |
|---|---|
| Miniatura que contiene la imagen | .vignette |
| Parte inferior de la audioguía | .bas_page |
| Barra de progreso | #duration |
| Tiempo total de audio | .song-duration |
| Evolución temporal del audio | .current-time |
| Botón Play | #play-btn |
| Texto de la audioguía | #show-parole |
Particularidad de las plantillas
Moiron Vignette :
- Botón del escáner :
.scan - Botón para acceder al texto (Discurso) :
.btn-parole
Basic :
- La plantilla básica contiene la barra de progreso de audio html, por lo que esta barra tendrá un aspecto diferente en los distintos navegadores. Sin embargo, podrás cambiar el color de fondo con él:
#audiocontrol {
background : #ffffff;
} - Botón del escáner :
.scan - Número de secuencia :
.bignumber
Moiron & Standard :
- Barra de separación entre los botones de navegación y el texto de la secuencia :
#separateur
Information Générale :
- Esta plantilla contendrá sólo texto.
Modificación gráfica del menú
| Elemento que debe modificarse | Identificador del elemento |
|---|---|
| Barra de menú | .navbar |
| Título (opcional) | .navbar-brand |
| Botón de icono | .navbar-toggler |
| Icono | .navbar-toggler-icon |
| Lista | .navbar-nav |
| Ítem | .nav-item |
| Enlace | .nav-link |
Modificación gráfica de las páginas que contienen la lista de lenguas
| Elemento que debe modificarse | Identificador del elemento |
|---|---|
| Fondo | .langue_visite |
| Título de la audioguía | .langue_visite .titre |
| Subtítulo | .langue_visite .soustitre |
| Lista | .langue_visite .liste |
| Artículo | .langue_visite .item |
| Enlace | .langue_visite .lien |
Modificación gráfica de las páginas que contienen la lista de secuencias
| Elemento que debe modificarse | Identificador del elemento |
|---|---|
| Fondo | .sequence_liste |
| Título de la audioguía | .sequence_liste .titre |
| Subtítulo | .sequence_liste .soustitre |
| Lista | .sequence_liste .liste |
| Artículo | .sequence_liste .item |
| Enlace | .sequence_liste .lien |
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;
}