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!
Wie man den EfA-Fontsizer (Schriftvergrößerung) einbindet
Zitieren
Zitat von e-zebra
