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.

Grafische Bearbeitung der Hauptseite des Audioguides

Stilelemente

Für alle Audioguides

Zu änderndes ElementIdentifikator des Elements
Hintergrundbody
Titel .titre
Schaltfläche Vorherige#btn_Prev
Schaltfläche Nächstes#btn_Next

Für Moiron - Moiron Vignette - Standard

Zu änderndes ElementIdentifikator des Elements
Miniaturansicht, die das Bild enthält.vignette
Unterer Teil des Audioguides.bas_page
Fortschrittsbalken#duration
Gesamtzeit des Audios.song-duration
Evolutionszeit von Audio.current-time
Play-Taste#play-btn
Text des Audioguides#show-parole

Besonderheit von Templates

Moiron Vignette :

  • Scanner-Taste : .scan
  • Schaltfläche, um zum Text zu gelangen (Überschrift Sprache) : .btn-parole

Basic :

  • Das Basic Template enthält den Audio-Fortschrittsbalken von html, sodass dieser Balken in verschiedenen Browsern unterschiedlich aussehen wird. Sie haben jedoch die Möglichkeit, die Hintergrundfarbe damit zu ändern:
       #audiocontrol {
             background : #ffffff;  
        }
  • Scanner-Taste : .scan
  • Nummer der Sequenz : .bignumber

Moiron & Standard :

  • Trennbalken zwischen den Navigationsschaltflächen und dem Text der Sequenz :
    #separateur

Information Générale :

  • Diese Schablone wird nur Text enthalten.

Grafische Bearbeitung des Menüs

Zu änderndes ElementIdentifikator des Elements
Navigationsleiste.navbar
Titel (Optional).navbar-brand
Icon-Schaltfläche.navbar-toggler
Icon.navbar-toggler-icon
Liste.navbar-nav
Item.nav-item
Link.nav-link

Grafische Bearbeitung der Seiten mit der Sprachliste

Zu änderndes ElementIdentifikator des Elements
Hintergrund.langue_visite
Titel des Audioguides.langue_visite .titre
Untertitel.langue_visite .soustitre
Liste.langue_visite .liste
Item.langue_visite .item
Link.langue_visite .lien

Grafische Bearbeitung der Seiten mit der Sequenzliste

Zu änderndes ElementIdentifikator des Elements
Hintergrund.sequence_liste
Titel des Audioguides.sequence_liste .titre
Untertitel.sequence_liste .soustitre
Liste.sequence_liste .liste
Item.sequence_liste .item
Link.sequence_liste .lien



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

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

Siehe auch: Die Templates