Passer au contenu

Wie ich meine Templates bearbeite

Wie ich meine Templates bearbeite

Mittwoch 4. Januar 2023

Alle Fassungen dieses Artikels: [Deutsch] [English] [Español] [français]

Zunächst sollten Sie wissen, dass jeder Stil, der einem Audioguide zugewiesen wurde, durch Stile, die einer Sequenz zugewiesen wurden, überladen werden kann.

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

Anmerkung 1: Diese Schablone erlaubt keine grafische Bearbeitung der Audioleiste.
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
Hintergrund 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;
    }
  • 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;
    }

Versuchen Sie jetzt, Ihre Templates zu ändern.
Wenn Sie Fragen haben, zögern Sie nicht, uns zu kontaktieren

Siehe auch: Die Templates