Volltextsuche
Navigation mit grafischen Buttons umsetzen
grafischen Buttons umsetzen Veröffentlichungsdatum: 07. Mai 2015 Änderungsdatum: 25. April 2019 navigation text bild grafik button schaltfläche grafisch picture Eine Navigation mit Navigationsgrafiken anstatt Navigationstexten je Menüpunkt
Systemvoraussetzungen Weblication®
libxml >= 2.7 UTF-8 Unterstützung (Modul mbstring) PDO Treiber cURL Bibliothek Zlib Komprimierungsfunktionen GD Grafikfunktionen (inkl. FreeType), optional/zusätzlich imageMagick Cookie-Modul zu PHP-Sessions (session.use_cookies) PHP JSON
SVG-Grafik im Bild-Element nutzen
02. Dezember 2020 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Über das Bild-Element können Sie für SVG-Grafiken bzw. Icons spezielle CSS-Only-Varianten verwenden. Hierfür stehen bereits im Standard die Varianten 40 ("SVG-Grafik")
Navigation mit SVG-Icon pro Navigationspunkt
" 1 "/> ... Navigationsbearbeitung: Feld Icon für SVG-Icon In der Bearbeitung können Sie die gewünschte SVG-Grafik über den Dateiexplorer auswählen. Bei installiertem Weblic® "SVG Icon" können Sie übrigens direkt die darüber
Bereich mit wechselbarem Bild umsetzen
). Im Template definieren Sie dann innerhalb der xsl:template Tags den HTML-Quelltext für die einzubindende Grafik. Nachfolgend ein einfaches Beispiel mit einem fest definierten Bild. Einfaches Beispiel für statisches Headerbild
CSS-Rendering - Inhalte wie Bilder automatisch in passender Breite generieren
in passender Breite generieren Veröffentlichungsdatum: 23. Juni 2017 Änderungsdatum: 29. November 2018 bild grafik picture element grösse größe breite anpassen anpassung berechnung berechnen rendering css Weblication® CMS passt
Alternative Darstellung der Webseite: CSS benutzerabhängig nutzen
cms css darstellung barrierefrei barrierefreiheit barrierearm web accessibility behinderung behindert textansicht grafikansicht In Weblication® können Webseitenbesucher ihre präferierte Darstellung (z.B. wegen Thema Barrierefreiheit / Web
Link-Icons (SVG) individualisieren
Um Verweise innerhalb des BASE Projektes hervorzuheben und passend zum Link-Ziel zu gestalten, liegt der Einsatz von Grafiken nahe. Die BASE nutzt hierfür SVG-Icons, welche über SCSS eingebettet zudem mit Farbe befüllt werden können:
Version 14: Interaktive Imagemaps und Erklärbilder
Mit dem neuen 14er Weblic können Sie Bilder durch Marker, Hinweise, Labels oder Info-Layer auszeichnen. Damit lassen sich selbst gestaltete Karten, Produktinformationen, Infografiken, Erklärbilder und sonstige interaktive Grafiken einbinden. Die Marker sind vom Redakteur per Maus positionierbar und die Info-Layer mit Überschriften, Bildern, Texten und Links erweiterbar.
-w-embedIfLocalSVG
picture.standard.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Die im Bild-Element ausgewählte SVG-Grafik wird direkt als SVG-Markup eingebettet und beim Mouseover farblich angepasst /* nachfolgende CSS-Only-Variante wird auf
Navigationen
" input " value= " " caption= " Accesskey " editable= " 0 "/> name= " img " editor= " input " value= " " caption= " Grafik " editable= " 1 "/> name= " imgHover " editor= " input " value= " " caption= " Grafik 2 " editable= " 1 "/> name= "
Hintergrundbild dynamisch pro Navigationspunkt definieren
führt an, wie Sie in älteren Projekten (vor BASE 2.x) die Navigationsbearbeitung um ein Feld zur Auswahl einer Grafik erweitern können, das Sie als Hintergrundgrafik heranziehen können. Im Beispiel wird die Pflegemaske um das Attribut
Navigationen
" input " value= " " caption= " Accesskey " editable= " 0 "/> name= " img " editor= " input " value= " " caption= " Grafik " editable= " 1 "/> name= " imgHover " editor= " input " value= " " caption= " Grafik 2 " editable= " 1 "/> name= "
Kategorienfilter Schaltflächen um Icon ergänzen
oder Icons hervorheben. Sie wollen die Text-Schaltflächen des Kategoriefilters zusätzlich um ein Symbol bzw. eine Grafik /Bild vor dem Text erweitern? Eine Möglichkeit, dies entsprechend vorzunehmen ist der Einsatz des Pseudo CSS-Elementes
Logo sprachabhängig ausgeben
--> <!-- ### Hier definieren Sie die Variable für den Pfad der sprachabhängigen Logo-Bilddatei (z.B. als png-Grafik) ### --> name= " logoFurtherLanguage "> select= " $wGlobalProjectPath "/> /wGlobal/layout/images/logo- select= "
Farbe von SVG Bilder beim Überfahren mit der Maus ändern
im HTML eingebettet sind, also nicht über IMG-Tag geladen werden. Für Bilder selbst gibt es dafür die Variante "SVG-Grafik eingebettet, per CSS formatierbar". CSS-Only der SVG-Bildvariante, um SVG Icons mit fixer Größe per CSS formatierbar
Navigationspunkte unterschiedlich darstellen
vorbereitet und muß nur aktiviert bzw. ergänzt werden. Gleichermaßen können Sie Navigationspunkte z.B. auch mit Grafiken, Hintergrundgrafiken, o.ä. versehen. Möglichkeit 1: Darstellung von Navigationspunkten über Pflegemaske beeinflussen