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

Modificación gráfica de la página principal de la audioguía

Elementos de estilo

Para todas las audioguías

Elemento que debe modificarseIdentificador del elemento
Fondobody
Título.titre
Botón Anterior#btn_Prev
Botón siguiente#btn_Next

Para Moiron - Moiron Vignette - Standard

Elemento que debe modificarseIdentificador 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 modificarseIdentificador 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 modificarseIdentificador 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 modificarseIdentificador 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;
    }

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

Ver también: Las plantillas