Liste der Anhänge anzeigen (Anzahl: 1)
Wie man den EfA-Fontsizer (Schriftvergrößerung) einbindet
Wenn ihr auf eurer Website ein Script für Schriftvergrößerung einsetzen wollt, gibt es die unterschiedlichsten Varianten. Die stabilsten sind dabei sicher PHP-Varianten, aber es gibt auch andere Möglichkeiten. Bei "Einfach für Alle" wurde dazu mal ein Script veröffentlicht. Da ich nun schon öfters gefragt wurde, wie man es einbaut, hier eine kurze Anleitung.
Lizenz: EfA hat das Script unter der Open Content Lizenz veröffentlicht.
Wichtig: Das Script wurde von mir bewusst so eingebaut, dass die Buttons dazu nur dann verfügbar sind, wenn Javascript aktiv ist. So wird vermieden, dass im Layout sichtbare Buttons ohne Funktion liegen. Bei manchen Tests wurde das negativ bewertet, aber ich finde das eine gute Lösung, da es sich sowieso nur um eine ergänzende Funktion zu den normalen Browserfunktionen handelt.
1. Ladet die beiden Daten (cookies.js und efa_fontsize.js aus dem ZIP-File) in den /tl_files/fontsizer/-Ordner. Dort könnt ihr auch gleich die drei Bilder hinterlegen.
2. Ladet die fontsizer.php aus dem ZIP-File per FTP in den /templates/-Ordner.
3. Legt im Adminbereich ein neues Modul mit dem Namen "Schriftvergrößerung" und dem Modultyp "Eigener HTML-Code" an und schreibt das hinein:
Code:
{{file::fontsizer.php}}
3. Geht im Backend in euer Seitenlayout und fügt dort bei den Experteneinstellungen ins Feld "Zusätzliche <head>-Tags" diesen Inhalt ein:
Code:
<script type="text/javascript" src="/tl_files/fontsizer/cookies.js"></script>
<script type="text/javascript" src="/tl_files/fontsizer/efa_fontsize.js"></script>
Fügt danach im Seitenlayout bei Frontend-Module an der gewünschten Stelle das neue Schriftvergrößerungsmodul ein. Wenn es z. B. im Kopfbereich der Seite auftauchen soll, müsst ihr bei den eingebundenen Modulen das dazu fügen:
Modul "Schriftvergrößerung" in Spalte "Kopfzeile"
4. In euer Stylesheet könntet ihr nun dieses CSS einfügen (sehr rudimentär):
Code:
ul#fontsizer { list-style: none; margin: 0; }
#fontsizer li { display: inline; }
#fontsizer a { padding: 0 8px 0 5px; }
#fontsizer a:link { color: #720000; text-decoration: none; }
#fontsizer a:visited { color: #222; text-decoration: none; }
#fontsizer a:hover, #fontsizer a:focus, #fontsizer a:active { color: #000; text-decoration: underline; }
WICHTIG: Scrollt bitte an das Ende des Threads. Dort gibt es eine aktuellere Version des Scripts!
Liste der Anhänge anzeigen (Anzahl: 1)
Hier ein Update für die Fontsizer-Scripts. Vor allem das Cookie-Script wurde erneuert, damit es auch auf Google Chrome läuft.
Liste der Anhänge anzeigen (Anzahl: 2)
wohin genau?
Hallo,
sorry, bei mir ist noch garnix zu sehen. Ich glaube die Dateien liegen bei mir nicht an den richtigen STellen. Hier mal meine Dateiverwaltung. Wohin muss ich denn jetzt die Dateien legen, und wie verlinke ich sie richtig? DANKE, Gruß, frohes Fest !!
Anhang 9478
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo bailarina,
wenn man mit den Entwickertools im Browser guckt, sieht man, das die JS-Datei nicht gefunden wird. Danach noch einmal gucken.
Klappt auch mit Contao 4.4
Hallo Leute,
falls es jemandem nützt:
Die beschriebene Methode klappt auch mit Contao 4.4.
Gruß
Holger
