Das Layout einer Webseite wird maßgeblich durch die Technologie Cascading Style Sheets (kurz: css, auf Deutsch „gestufte Stilvorlagen“) bestimmt. Dabei werden in einer css-Datei Beschreibungen vorgenommen, wie bestimmte Elemente der Webseite dargestellt werden sollen. Im SchulCMS werden mehrere solcher css-Dateien nacheinander aufgerufen ud ausgeführt. In der zuletzt aufgerufenen css-Datei können also alle vorher definierten Styles überschrieben werden.
Um ein Anpassen des Layouts zu ermöglichen, muss im Verzeichnis <Benutzername> (nicht verwechseln mit dem Verzeichnis E: <Benutzername>!) als "Schuladministrator" ein Ordner mit dem Namen "layout" (exakt so geschrieben!) angelegt werden, falls dieser noch nicht existiert.
In diesem Ordner können mehrere Dateien abgelegt werden, die das Layout auf verschiedene Weise beieinflussen.
Diese Dateien werden als letzte geladen, d.h. vorherige Einstellungen werden überschrieben. Um die vorhandenen css-Elemente zu ändern, muss die Webseite analysiert werden. Dazu gibt es in jedem Browser passende Entwicklerwerkzeuge (dev-tools). Den aktuellen Stand können Sie sich am besten durch eine Suchmaschine oder KI ermitteln lassen z.B. durch die Anfrage "Wie analysiere ich die css-Einstellungen eine Webseite in firefox". Manche dev-tools bieten auch die Möglichkeit der live-Anpassung mit Vorschau. Dabei sehen Sie sofort die Auswirkungen von Manipulationen. Wichtig dabei ist, dass Sie die finale Anpassung dann in der richtigen Syntax in ihre screen.css-Datei einfügen und die Webseite dann neu laden.
Achtung: Da die css-Elemente bei den unterschiedlichen Themes voneinander abweichen, funktionieren die Anpassungen in der screen.css auch nur mit dem zugehörigen Theme, d.h. wenn Sie das Theme wechseln, sollten Sie eine vorhandene Datei screen.css deaktivieren (entweder löschen oder einfach umbenennen).
Haben Sie eine Webseite einer anderen Schule auf unserem SchulCMS gefunden (erkennbar an der URL cms.sachsen.schule) und gefällt Ihnen das Layout, so können Sie die verwendete screen.css finden, indem Sie auf der Startseite den Seitenquelltext anzeigen lassen und dort (mit strg+F) nach "screen.css" suchen. Nach Anklicken des Links haben Sie alle notwendig Infos, die Sie analysieren und weiterverwenden können. Aber Achtung, schauen Sie vorher welches Theme zugrunde liegt. Suchen Sie dazu im Quelltext nach "themename".
Die Änderung des Printlayouts erfolgt analog zur Verfahrensweise beim Screenlayout, der einzige Unterschied ist, dass die Einstellungen in der Datei "print.css" erfolgen.
Ein favicon ist ein kleines Bildchen, welches vor dem Lesezeichen , im Tab oder auch vor der URL im Browser angezeigt wird und neben dem Text zur Erkennung einer Webseite führt.
1. Schritt
Erstellen der favicon.ico Datei
Dazu können Sie einen der zahlreichen online-favicon-Generatoren oder ihr Bildbearbeitungsprogramm benutzen. Speichern Sie die Datei als favicon.ico lokal ab.
2. Schritt
Laden Sie diese Datei mittels Dateiliste auf den Server, z.B. in den Ordner layout und merken Sie sich den Dateipfad, bzw. kopieren Sie diesen in die Zwischenablage.
3. Schritt
Wählen Sie im Backend den Bereich Themes und in der zweiten Spalte ihren Account aus. Im rechten Bildschirmbereich wählen Sie nun unter Basic die Zeile mit favicon, aktivieren den Powerbutton und fügen den zwischengespeicherten Pfad (z.B. /fileadmin/_special/benutzer/xx/layout/favicon.ico) ein und speichern ab. Nach dem Neuladen Ihrer Webseite, sollte das favicon aktiv sein.
