Une future version est en développement pour vous permettre de modifier les templates de façon plus simple.
En attendant voilà comment faire :
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 saisie dans la langue principale, et le coller dans la section style de chaque langues.
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 mettre 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 suivit de
px
signifiant pixel. Il est conseiller de ne pas mettre de taille inférieur à 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és de styles et les styles associés.
Si vous n’arrivez pas à faire ce que vous voulez n’hésitez pas à nous contacter.
Élément de style
Les templates et leurs variantes :
Basic
Élément à modifier | Identifiant de l’élément |
---|---|
Numéro | .big_number |
Arrière-plan des boutons Précédent -Suivant | #btn_Prev, #btn_Next |
Icône des boutons Précédent -Suivant | Non modifiable |
Bouton Scanner | .scan |
Titre séquence | #titreSequence |
Moiron
Élément à modifier | Identifiant de l’élément |
---|---|
Arrière-plan | body |
Bandeau de l’image | .header-dark |
Image | .image-seq |
Titre Séquence | #titreSequence |
Texte | #texteSequence |
Ligne de séparation du texte | #separateur |
Bouton Play/Pause | #play-btn |
Boutons Précédent - Suivant | #btn_Prev, #btn_Next |
Élémentaire
Élément à modifier | Identifiant de l’élément |
---|---|
Arrière-plan | body |
Titre Séquence | #titreSequence |
Image | .image-seq |
Ensemble des boutons | .boutons |
Bouton Play/Pause | #play-btn |
Boutons Précédent - Suivant | #btn_Prev, #btn_Next |
Bouton texte | #btn-parole |
Ce template utilisera la fenêtre modal du texte pour l’afficher.
Élémentaire - Variante Elementaire-bis
Élément à modifier | Identifiant de l’élément |
---|---|
Arrière-plan | body |
Titre Séquence | #titreSequence |
Image | .image-seq |
Arrière-plan des boutons | .boutons .arrow-wrapper |
Arrière-plan du bouton Play/Pause | .boutons .arrow-wrapper .btn-Play-Pause |
Icône du bouton play | .btn-Play-Pause .play |
Icône du bouton pause | .btn-Play-Pause .pause |
Icône des boutons Précédent - Suivant : Partie flèche (triangle) | .arrow-right, .arrow-left Modifier la couleur au moyen de la porpriété background-color |
Icône des boutons Précédent - Suivant : Partie trait | .arrow-bar Modifier la couleur au moyen de la propriété border-color |
Texte | #texteSequence |
Ligne de séparation du texte | #separateur |
Moiron-Vignette
Élément à modifier | Identifiant de l’élément |
---|---|
Arrière-plan | body |
Titre Séquence | #titreSequence |
Arrière-plan de l’image | .vignette |
Boutons | .controls .btn |
Texte | #texteSequence |
Bouton texte | .btn-parole |
Variante infos
Élément à modifier | Identifiant de l’élément |
---|---|
Arrière-plan du cadre infos | .container-infos |
Titre Séquence | #titreSequence |
Texte | .infos #texteSequence |
Cadre d’information sur O-DGuide | .infospeodguide |
Lien O-DGuide | .infospeodguide a |
Texte O-DGuide | .infospeodguide p |
Variante Liste
Élément à modifier | Identifiant de l’élément |
---|---|
Arrière-plan | body |
Arrière-plan liste | #seqliste |
Item de la liste | .lesSequences |
Arrière plan de l’item sélectionné dans la liste | .lesSequences.active |
Arrière-plan du bouton Play/Pause | .contour |
Arrière-plan du bouton Play/Pause de l’item selectionné | .lesSequences.active .contour |
Bouton Play | .play |
Bouton Play de l’item sélectionné | .lesSequences.active .play |
Bouton Pause | .pause |
Titre Séquence | .titreSequence |
Bouton texte | .btn-text |
Autre éléments :
Barre de Navigation
Élément à modifier | Identifiant de l’élément |
---|---|
Barre de navigation | .navbar |
Titre Audioguide | #titreAudioguide |
Ensemble des liens | .navbar-nav |
Item | .nav-item |
Lien | .nav-link |
Lien vitesse de lecture - non sélectionnable | #accesModalVitesse.disabled |
Bouton du menu : Elementaire - Moiron
- Arrière-plan du bouton :
#mobileMenuTrigger
- Barres du bouton :
#mobileMenuTrigger span
Bouton du menu : Basic - Moiron Vignette
- Arrière-plan du bouton :
.navbar-light .navbar-toggler
- Barres du bouton :
Non Modifiable
Gestion de l’audio
Ces éléments concernent l’ensemble des templates à l’exception de Basic
Élément à modifier | Navigateur | Identifiant de l’élément |
---|---|---|
Arrière plan | 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 |
|
Rond de progression | Firefox | input[type="range"]::-moz-range-thumb |
Chrome | input[type="range"]::-webkit-slider-thumb |
|
Focus rond de progression | Firefox | input[type="range"]:focus::-moz-range-thumb |
Chrome | input[type="range"]:focus::-webkit-slider-thumb |
|
Temps actuel de l’audio | .current-time |
|
Temps total de l’audio | .song-duration |
Fenêtre modal de vitesse de lecture
Élément à modifier | Identifiant de l’élément |
---|---|
Effet de flou derrière la fenêtre | .modal-vitesse |
Arrière-plan de la fenêtre | .modal-vitesse-content |
Bouton de croix - Arrière-plan | .modal-close |
Bouton de croix - trait | .modal-close div |
Titre de la fenêtre | .modal-title |
Texte | .modal-description-vitesse |
Boutons de vitesse | #modal-vitesse .button-default |
Vitesse actuelle | .speedcontainer |
Bouton ok | #vitesse-ok |
Fenêtre modal de texte
Élément à modifier | Identifiant de l’élément |
---|---|
Effet de flou derrière la fenêtre | .modal-text |
Arrière-plan de la fenêtre | .content-modal-text |
Bouton de croix - Arrière-plan | .modal-close |
Bouton de croix - trait | .modal-close div |
Titre de la fenêtre | .text-title |
Texte | #texteSequence |
Bouton fermer | #text-ok |
Pages : Choix langue - Choix séquence
Élément à modifier | Identifiant de l’élément |
---|---|
Zone englobant les éléments ( différents du background) | .sequence-liste #maincontent, .langue_visite #maincontent |
Titre de l’audioguide | .sequence-liste .titre, .langue_visite .titre |
Sous-titre | .sequence-liste .soustitre, .langue_visite .soustitre |
Zone englobant la liste | .liste |
Item | .item |
Lien | .lien |
Page : Nouvelle visite
Élément à modifier | Identifiant de l’élément |
---|---|
Zone englobant les éléments (différents du background) | .nouvelle_visite #maincontent |
Bouton retour | .annule-retour-nvlle-visite |
Titre des zones | #zoneCodeVisite h2, #sectionScanQrc h2 |
Zone de saisie du code | #champ_code_visite |
Bouton démarrer | #zoneCodeVisite button.submit |
Texte Scanner | #sectionScanQrc b, #sectionScanQrc span |
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;
}
- 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;
}