Passer au contenu

Comment modifier mes templates

Comment modifier mes templates

mercredi 4 janvier 2023

Toutes les versions de cet article : [Deutsch] [English] [Español] [français]

Tout d’abord sachez que tout style donné à un audioguide peut être surchargé par des styles attribués à une séquence.

Voilà comment faire : [1]

Où définir le style

Pour modifier le style de tout l’audioguide

1) Sélectionner un audioguide depuis l’écran d’accueil.
2) Cliquer sur "éditer informations de l’audioguide".
3) Cliquer sur la section "style" , un champs de saisie s’ouvrira.

Pour modifier le style d’une séquence

1) Sélectionner un audioguide depuis l’écran d’accueil.
2) Cliquer sur la séquence à modifier
3) Cliquer sur la section "style" , un champs de saisie s’ouvrira.

Attention  : Si la séquence a été créée en plusieurs langues il faudra copier le code saisi dans la langue principale, et le coller dans la section style de chaque langue.

Quoi mettre dans la section style

Le style se modifie au moyen de css. C’est à dire avec un élément de style et une propriété de style, de la façon suivante :

élément de style {
   propriété de style :  style ;
}      

Dans le cas d’un audioguide vous pourriez être amené à modifier :

  • La couleur
  • La couleur de fond
  • La taille de la police

La couleur :

  • Avec la propriété : color :
  • Pour le style indiquer une couleur par son nom anglais, ou saisir le code href d’une couleur par exemple pour blanc : #ffffff.
    Vous trouverez facilement des sites vous donnant ces codes en faisant une recherche internet.

La couleur de fond :

  • Avec la propriété : background :
  • Comme précédemment, saisir le nom anglais d’une couleur, ou son code href.

La taille de la police :

  • Avec la propriété : font-size:
  • Saisir un nombre suivi de px signifiant pixel. Il est conseillé de ne pas mettre de taille inférieure à 16 pixel.

Si vous souhaitez modifier d’autres éléments n’hésitez pas à faire une recherche internet stipulant ce que vous souhaitez faire ainsi que la mention css.
Cela devrait vous donner les propriété de styles et les styles associés.

Si vous n’arrivez pas à faire ce que vous voulez n’hésitez pas à nous contacter.

Modification graphique de la page principale de l’audioguide

Les éléments de styles

Pour tous les audioguides

Élément à modifier Identifiant de l’élément
Arrière Plan body
Titre .titre
Bouton Précédent #btn_Prev
Bouton Suivant #btn_Next

Pour Moiron - Moiron Vignette - Standard

Élément à modifier Identifiant de l’élément
Vignette contenant l’image .vignette
Bas de l’audioguide .bas_page
Barre de progression #duration
Temps total de l’audio .song-duration
Temps évolutif de l’audio .current-time
Bouton Play #play-btn
Texte de l’audioguide #show-parole

Particularité des Templates

Moiron Vignette :

  • Bouton de scanner : .scan
  • Bouton pour accéder au texte (intitulé parole) : .btn-parole

Basic

  • Le template basic contient la barre de progression audio de html, cette barre aura donc un aspect différent selon les navigateurs. Vous aurez toutefois la possibilité de changer la couleur de fond avec :
       #audiocontrol {
             background : #ffffff;  
        }
  • Bouton de scanner : .scan
  • Numéro de la séquence : .bignumber

Moiron & Standard

  • Barre de séparation entre les boutons de navigation et le texte de la séquence :
    #separateur

Information Générale

  • Ce template contiendra uniquement du texte.

Modification graphique du menu

Élément à modifier Identifiant de l’élément
Barre de navigation .navbar
Titre (Optionnel) .navbar-brand
Bouton icône .navbar-toggler
Icône .navbar-toggler-icon
Liste .navbar-nav
Item .nav-item
Lien .nav-link

Modification graphique des pages contenant la liste des langues

Élément à modifier Identifiant de l’élément
Arrière Plan .langue_visite
Titre de l’audioguide .langue_visite .titre
Sous-titre .langue_visite .soustitre
Liste .langue_visite .liste
Item .langue_visite .item
Lien .langue_visite .lien

Modification graphique des pages contenant la liste des séquences

Élément à modifier Identifiant de l’élément
Arrière Plan .sequence_liste
Titre de l’audioguide .sequence_liste .titre
Sous-titre .sequence_liste .soustitre
Liste .sequence_liste .liste
Item .sequence_liste .item
Lien .sequence_liste .lien



Voir un exemple

  • Je souhaite modifier la couleur de fond pour un bleu vert dont j’ai trouvé le code href sur internet que voici : 0f8499.

    body {
     background : #0f8499;
    }
  • A présent je veux modifier la taille de la police du titre de ma séquence pour l’augmenter

    .titre{
      font-size : 20px;
    }
  • Enfin je voudrais changer la couleur de l’écriture de mes boutons "suivant", "play" et "précédent" pour du blanc, mais aussi modifier la couleur de fond pour un gris

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

Essayez dès maintenant de modifier vos templates.
Si vous avez des question n’hésitez pas à nous contacter

Voyez aussi : Les templates



[1Une future version est en développement pour vous permettre de modifier les templates de façon plus simple.