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
pxsignifiant 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;
}