Eye-Able manuell an die eigene Webseite anpassen
Bei einer Eigenkontrolle Ć¼ber die Konfiguration kann man Eye-Able - Ć¼ber den Konfigurator hinausgehend - an die eigene Webseite anpassen.
Photo Credits: Any IP Ltd, Link to the Author isĀ https://anyip.io/ and Simplex ā Web Design SydneyĀ
Bei einer Eigenkontrolle Ć¼ber die Konfiguration kann man Eye-Able ā Ć¼ber den Konfigurator hinausgehend ā an die eigene Webseite anpassen. Die Vorteile einer solchen Anpassung sind in dem Artikel āWelche Vorteile bringt mir eine initiale Anpassung?ā beschrieben. Um diese Anpassungen vorzunehmen ist ein fortgeschrittenes VerstƤndnis von HTML und CSS notwendig. FĆ¼r jede Webseite bieten wir deshalb die Option einer vollstƤndigen PrĆ¼fung und Optimierung von Eye-Able an. Einige Mƶglichkeiten dieser Anpassung sind aber jederzeit fĆ¼r nicht-Managed User von Eye-Able mƶglich. Im Folgenden werden verfĆ¼gbare Einstellungen vorgestellt.
Hinweis: Folgende Konfigurationen sind nur eine Teilmenge der in einer vollstƤndigen Optimierung durch Eye-Able verfĆ¼gbaren Parameter.
Um die Eye-Able Konfiguration zu erweitern mĆ¼ssen der eyeAble_pluginConfig Variable weitere SchlĆ¼ssel-Wert Paare hinzugefĆ¼gt werden. Eine Beispiel Konfiguration finden Sie hier (https://www.eye-able-cdn.com/example.js)
Neben der Einbindung der Konfig direkt inline, kƶnnen Ćnderungen an der Eye-Able Konfiguration auch Ć¼ber die eine separate Funktion durchgefĆ¼hrt werden. Um selbst Ćnderungen an der Konfiguration durchfĆ¼hren zu kƶnnen wird deshalb die Methode Ć¼ber die eyeAble_updateConfig()-Methode empfohlen:
Wp Block Code<script type="text/javascript" >
function eyeAble_updateConfig() {
eyeAble_pluginConfig.topPosition = "200px"; //VerƤndere die Top-Position des Icons
eyeAble_pluginConfig.maxMagnification = 10;
if(eyeAble_pluginConfig.blacklistContrast){
//append to the existing rules, otherwise they get overwritten
eyeAble_pluginConfig.blacklistContrast += ".myClass";
} else {
eyeAble_pluginConfig.blacklistContrast = ".myClass";
}
}
</script>
Parameter die nicht verƤndert werden sollen, kƶnnen Sie auskommentieren.
VergrƶĆerung:
Folgende Parameter existieren, um die VergrƶĆerung zu begrenzen:
maxMagnification : [int] Beschreibt die maximale VergrƶĆerung (Default: 21)
maxMobileMagnification : [int] Beschreibt die maximale mobile VergrƶĆerung (Default: 3)
Position:
Folgende Parameter existieren, um die Position des Haupticons zu Ƥndern:
topPosition: [String] Setzt die top-Position des Icons am Desktop in % oder px (Default: ā10%ā)
rightPosition: [String] Setzt die right-Position des Icons am Desktop in px. Wenn sidePosition auf āleftā gestellt ist wird die left-Position gesetzt (Default: ā10pxā)
mobileBottomPosition: [String] Setzt die bottom-Position des Icons mobil in % oder px (Default: ā15%ā)
mobileRightPosition: [String] Setzt die right-Position des Icons mobil in px (Default: ā10pxā)
sidePosition: [String] Setzt die Seite an der das Icon erscheint āleftā oder ārightā (Default: ārightā)
Aussehen:
Folgende Parameter existieren, um das Aussehen zu Ƥndern:
mainIconAlt: [int] Ćndere das Haupticon zwischen drei Varianten 0, 1 oder 2 (Default: 0)
iconSize: [int] Ćndere die GrƶĆe des Icons am Desktop, empfohlene Werte zwischen 50-70 Pixel (Default: 70px)
mobileIconSize: [int] Ćndere die GrƶĆe des Icons mobil, empfohlene Werte zwischen 35-50 Pixel (Default: 50px)
Screenreader:
Mit folgenden Parametern lassen sich die Anpassungs-CSS-Klassen verƤndern:
customSrBlacklistCSS: [String] Ćndert die CSS Klasse fĆ¼r die zu auszunehmenden Elemente (Default: eyeAble_SrSkip)
customSrStartCSS: [String] Ćndert die CSS Klasse fĆ¼r das neue Start-Element (Default: eyeAble_SrStart)
customSrTextCSS: [String] Ćndert die CSS Klasse fĆ¼r den vorzulesenden Block (Default: eyeAble_SrText )
Elemente von Funktionen ausnehmen:
Mit folgenden Parametern lassen sich bestimmte Elemente von den Funktionen von Eye-Able ausnehmen. Dies ist hilfreich fĆ¼r Text, welcher bei der VergrƶĆerung aus seinem Container ausbricht, oder fĆ¼r Elemente deren Farben nicht durch den Kontrast- oder Nachtmodus angepasst werden sollen. Elemente lassen sich Ć¼ber native CSS-Selektoren (mehr Infos hier (https://www.w3schools.com/cssref/css_selectors.asp) auswƤhlen. Mehrere CSS-Selektoren werden durch Kommas getrennt. Die Ausnahme gilt auch fĆ¼r alle Kinder ausgewƤhlter Elemente!
blacklistContrast : [String] Nehme Elemente von der Farbanpassung des Kontrast- oder Nachtmodus aus.
z.B.
blacklistFontsize : [String] Nehme Elemente von der SchriftvergrƶĆerung aus
z.B.
forceWhiteBackground: [String] Forciert einen weiĆen Hintergrund bei aktiviertem Nacht- oder Kontrastmodus
Weitere BeitrƤge
Falls es etwas mehr sein darf
Sie benƶtigen weitere Informationen?
Schreiben Sie uns und wir helfen Ihnen gerne weiter.