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.

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

Note 1 : Ce template ne permet pas la modification graphique de la barre d’audio.
É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;
    }

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

Voyez aussi : Les templates