Layout anpassen
Bilder im Kopfbereich anpassen
Im Kopfbereich des Musterprojekts können Bilder angezeigt werden, die aus den Seiteneigenschaften der jeweiligen Seiten ausgelesen werden. Dabei werden diese Bilder auch auf Unterseiten vererbt.
Um ein Bild hinzuzufügen, bearbeiten Sie die Eigenschaften einer Seite. Klicken Sie dazu im Seitenbaum auf das Icon vor dem Seitennamen und wählen Sie im Kontextmenü "Bearbeiten aus".
Im Reiter "Ressourcen" erstellen Sie eine "Neue Relation" und wählen ein Bild im Element-Browser aus.
Danach speichern Sie die Seite erneut ab.
Schriftarten und Farben ändern
Die verwendeten Schriftarten und Farben per CSS in der Datei bootstrap.css definiert und können hier auch verändert werden.
Öffnen Sie die Datei bootstrap.css im Verzeichnis fileadmin/jweilandnet_musterprojekt/Resources/Css/
Die verwendete Schriftart und die Schriftfarbe werden ab Zeile 302 definiert.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
Um die Schriftart und die Farbe der Überschriften zu ändern, finden Sie die entsprechenden Definitionen in der bootstrap.css ab Zeile 453.
Inhaltselemente farblich hervorheben
Inhaltselemente können auf zwei verschiedene Arten farblich hervorgehoben werden. Die Einstellungen wird im jeweiligen Inhaltselement im Reiter "Erscheinungsbild" über die Auswahlbox "Einrückung und Rahmen" vorgenommen.
Bearbeiten Sie das gewünschte Inhaltselement und wechseln Sie in den Reiter "Erscheinungsbild".
Bei der Auswahlbox "Einrückung und Rahmen" können Sie zwischen "Rahmen 1" und "Rahmen 2" wählen.
Rahmen 1 = hellgrauer Hintergrund
Rahmen 2 = dunkelgrauer Hintergrund, helle Schriftfarbe
Die Farben der beiden Boxen können per CSS verändert werden. In der Datei musterprojekt_styles.css finden Sie ab Zeile 285 die entsprechenden Definitionen für die Klassen .csc-frame-frame1 und .csc-frame-frame2
.csc-frame-frame1 {
background-color: #f5f5f5;
padding: 1.5em;
margin-bottom: 1.5em; }
.layout2 .csc-frame-frame1 {min-height: 20em;}
.csc-frame-frame2 {
background-color: #414141;
padding: 1.5em;
margin-bottom: 1.5em;
color: #fff;
}
Hinweis zu den Bildgrößen in Inhaltselementen
Um die Anzeige von Bildern im Layout zu vereinheitlichen und die korrekte Darstellung in einem Responsive Layout zu erleichtern, wurden in den Inhaltselementen "Text & Bild" und "Bilder" die Felder zur Angabe der Breite und Höhe der Bilder deaktiviert.
Sie können diese Felder wieder aktivieren, in dem Sie in der Datei fileadmin/jweilandnet_musterprojekt/Resources/TSConfig/page.tsconfig.ts in den folgenden Zeilen die Werte auf 0 setzen:
## Content Elements: remove width and height fields for images
TCEFORM.tt_content {
imagewidth.disabled = 1
imageheight.disabled = 1
}
Allerdings kann es sein, dass durch diese Änderung Anpassungen in den CSS-Dateien notwendig werden.