Eine zukünftige Version ist in der Entwicklung, die es Ihnen ermöglichen wird, die Templates einfacher zu bearbeiten.
In der Zwischenzeit gehen Sie wie folgt vor
Wo man den Stil definiert
So ändern Sie den Stil des gesamten Audioguides
1) Wählen Sie einen Audioguide aus dem Startbildschirm.
2) Klicken Sie auf "Informationen aus dem Audioguide bearbeiten".
3) Klicken Sie auf den Abschnitt "Styles" Wenn Sie auf "Styles" klicken, öffnet sich ein Eingabefeld.
Um den Stil einer Sequenz zu ändern
.
1) Wählen Sie einen Audioguide aus dem Startbildschirm aus.
2) Klicken Sie auf die zu ändernde Sequenz.
3) Klicken Sie auf den Abschnitt "Styles" Wenn Sie auf "Styles" klicken, öffnet sich ein Eingabefeld.
Achtung : Wenn die Sequenz in mehreren Sprachen erstellt wurde, müssen Sie den Code, der in der Hauptsprache eingegeben wurde, kopieren und in den Stilbereich jeder Sprache einfügen.
Was gehört in den Abschnitt style
.
Der Stil wird mithilfe von css geändert. Das heißt, mit einem Stilelement und einer Stileigenschaft. Auf folgende Weise:
Stilelement {
Stileigenschaft : style ;
}
Im Falle eines Audioguides müssen Sie möglicherweise Änderungen vornehmen:
- Die Farbe
- Die Hintergrundfarbe
- Die Schriftgröße
Die Farbe :
- Mit Eigentum:
color :
- Für den Stil können Sie eine Farbe nach ihrem englischen Namen benennen oder den href-Code einer Farbe eingeben, z. B. für Weiß: #ffffff.
Wenn Sie im Internet nach solchen Codes suchen, werden Sie schnell fündig.
Die Hintergrundfarbe :
- Mit Eigentum:
background :
- Geben Sie wie zuvor den englischen Namen einer Farbe oder ihren href-Code ein.
Die Schriftgröße :
- Mit Eigentum:
font-size:
- Geben Sie eine Zahl gefolgt von
px
für Pixel ein. Es wird empfohlen, keine Größe unter 16 Pixel anzugeben.
Wenn Sie andere Elemente ändern möchten, zögern Sie nicht, eine Internetrecherche durchzuführen, in der Sie angeben, was Sie tun möchten, und den Vermerk css hinzufügen.
Das sollte Ihnen die Stileigenschaften und die zugehörigen Stile liefern.
Wenn Sie nicht weiterkommen, zögern Sie nicht, uns zu kontaktieren.
Stilelement
Templates und ihre Variante :
Basic
Zu änderndes Element | Bezeichner des Elements |
---|---|
Nummer | .big_number |
Hintergrund der Schaltflächen Zurück - Vorwärts | #btn_Prev, #btn_Next |
Symbol der Schaltflächen Zurück - Vorwärts | Nicht veränderbar |
Scanner-Taste | .scan |
Titel Sequenz | #titreSequence |
Moiron
Zu änderndes Element | Bezeichner des Elements |
---|---|
Hintergrund | body |
Bildbanner | .header-dark |
Abbildungge | .image-seq |
Titel Sequenz | #titreSequence |
Text | #texteSequence |
Trennlinie des Textes | #separateur |
Play/Pause-Taste | #play-btn |
Schaltflächen Zurück - Vorwärts | #btn_Prev, #btn_Next |
Élémentaire
Zu änderndes Element | Bezeichner des Elements |
---|---|
Hintergrund | body |
Titel Sequenz | #titreSequence |
Abbildung | .image-seq |
Gesamtheit der Knöpfe | .boutons |
Play/Pause-Taste | #play-btn |
Schaltflächen Zurück - Vorwärts | #btn_Prev, #btn_Next |
Text-Schaltfläche | #btn-parole |
Ce template utilisera la fenêtre modal du texte pour l’afficher.
Élémentaire - Variante Elementaire-bis
Zu änderndes Element | Bezeichner des Elements |
---|---|
Hintergrund | body |
Titel Sequenz | #titreSequence |
Abbildung | .image-seq |
Hintergrund der Schaltflächen | .boutons .arrow-wrapper |
Hintergrund der Play/Pause-Taste | .boutons .arrow-wrapper .btn-Play-Pause |
Icon der Play-Taste | .btn-Play-Pause .play |
Icon der Pausentaste | .btn-Play-Pause .pause |
Icon der Schaltflächen Zurück - Vorwärts : Pfeilteil (Dreieck) | .arrow-right, .arrow-left Farbe mithilfe der Eigenschaft ändern background-color |
Icon der Schaltflächen Zurück - Vorwärts : Teil Strich | .arrow-bar Farbe mithilfe der Eigenschaft ändern border-color |
Text | #texteSequence |
Trennlinie des Textes | #separateur |
Moiron-Vignette
Zu änderndes Element | Bezeichner des Elements |
---|---|
Hintergrund | body |
Titel Sequenz | #titreSequence |
Hintergrund des Bildes | .vignette |
Tasten | .controls .btn |
Text | #texteSequence |
Text-Schaltfläche | .btn-parole |
Variante infos
Zu änderndes Element | Bezeichner des Elements |
---|---|
Hintergrund des Rahmens Infos | .container-infos |
Titel Sequenz | #titreSequence |
Text | .infos #texteSequence |
Informationsrahmen zu O-DGuide | .infospeodguide |
O-DGuide-Link | .infospeodguide a |
Text O-DGuide | .infospeodguide p |
Variante Liste
Zu änderndes Element | Bezeichner des Elements |
---|---|
Hintergrund | body |
Hintergrund Liste | #seqliste |
Item in der Liste | .lesSequences |
Hintergrund des in der Liste ausgewählten Items | .lesSequences.active |
Hintergrund der Play/Pause-Taste | .contour |
Hintergrund der Play/Pause-Taste des gewählten Eintrags | .lesSequences.active .contour |
Play-Taste | .play |
Play-Taste des ausgewählten Items | .lesSequences.active .play |
Pause-Taste | .pause |
Titel Sequenz | .titreSequence |
Text-Schaltfläche | .btn-text |
Andere Elemente :
Navigationsleiste
Zu änderndes Element | Bezeichner des Elements |
---|---|
Navigationsleiste | .navbar |
Titel Audioguide | #titreAudioguide |
Gesamtheit der Links | .navbar-nav |
Item | .nav-item |
Link | .nav-link |
Link Lesegeschwindigkeit - nicht auswählbar | #accesModalVitesse.disabled |
Menü-Schaltfläche : Elementaire - Moiron
- Hintergrund der Schaltfläche :
#mobileMenuTrigger
- Zeile der Menütaste:
#mobileMenuTrigger span
Menü-Schaltfläche : Basic - Moiron Vignette
- Hintergrund der Schaltfläche:
.navbar-light .navbar-toggler
- Zeile der Menütaste :
Nicht bearbeitbar
Verwaltung von Audio
Diese Elemente betreffen alle Templates mit Ausnahme von Basic
Zu änderndes Element | Browser | Bezeichner des Elements |
---|---|---|
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 |
|
Progress-Runde | Firefox | input[type="range"]::-moz-range-thumb |
Chrome | input[type="range"]::-webkit-slider-thumb |
|
Fokus des Fortschrittskreises | Firefox | input[type="range"]:focus::-moz-range-thumb |
Chrome | input[type="range"]:focus::-webkit-slider-thumb |
|
Aktuelle Zeit des Audios | .current-time |
|
Gesamtzeit des Audios | .song-duration |
Modales Fenster für die Lesegeschwindigkeit
Zu änderndes Element | Bezeichner des Elements |
---|---|
Unschärfeeffekt hinter dem Fenster | .modal-vitesse |
Hintergrund des Fensters | .modal-vitesse-content |
Kreuztaste - Hintergrund | .modal-close |
Kreuztaste - Strich | .modal-close div |
Titel des Fensters | .modal-title |
Text | .modal-description-vitesse |
Geschwindigkeitstasten | #modal-vitesse .button-default |
Aktuelle Geschwindigkeit | .speedcontainer |
Ok-Taste | #vitesse-ok |
Modales Textfenster
Zu änderndes Element | Bezeichner des Elements |
---|---|
Unschärfeeffekt hinter dem Fenster | .modal-text |
Hintergrund des Fensters | .content-modal-text |
Kreuztaste - Hintergrund | .modal-close |
Kreuztaste - Strich | .modal-close div |
Titel des Fensters | .text-title |
Text | #texteSequence |
Schaltfläche Schließen | #text-ok |
Seiten: Wahl der Sprache - Wahl der Sequenz
Zu änderndes Element | Bezeichner des Elements |
---|---|
Bereich, der die Elemente ( anders als der Hintergrund) umschließt. | .sequence-liste #maincontent, .langue_visite #maincontent |
Titel Audioguide | .sequence-liste .titre, .langue_visite .titre |
Untertitel | .sequence-liste .soustitre, .langue_visite .soustitre |
Feld, das die Liste umfasst | .liste |
Item | .item |
Link | .lien |
Seite: Neuer Besuch
Zu änderndes Element | Bezeichner des Elements |
---|---|
Bereich, der die Elemente ( anders als der Hintergrund) umschließt. | .nouvelle_visite #maincontent |
Zurück-Taste | .annule-retour-nvlle-visite |
Titel der Felder auf der Seite | #zoneCodeVisite h2, #sectionScanQrc h2 |
Eingabefeld für den Code | #champ_code_visite |
Start-Taste | #zoneCodeVisite button.submit |
Text Scanner | #sectionScanQrc b, #sectionScanQrc span |
Ein Beispiel ansehen
- Ich möchte die Hintergrundfarbe in ein grünes Blau ändern, dessen href-Code ich im Internet gefunden habe und der wie folgt lautet : 0f8499.
body {
background : #0f8499;
}
- Nun möchte ich die Schriftgröße des Titels meiner Sequenz ändern, um sie zu vergrößern
.titre{
font-size : 20px;
}
- Schließlich möchte ich die Schriftfarbe meiner Schaltflächen weiter, abspielen und zurück auf weiß ändern und die Hintergrundfarbe auf grau ändern.
#btn_Prev, #btn_Next, #play-btn{
color:#ffffff;
background:#596266;
}