Volltextsuche
Responsive Toggler-Navigation anpassen
wird über CSS definiert und über Javascript angesprochen. Folgende Dateien sind hierfür verantwortlich: design.css Pfad: /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/design.css Beinhaltet die CSS-Definitionen zur
Die BASE - 12 Grundstrukturen und zahlreiche Navigationslayouts bereiten HTML und CSS für Ihr individuelles Design vor
bereiten HTML und CSS für Ihr individuelles Design vor 17. Mär 2011 Nutzen Sie als Basis für Ihre individuellen Designs die BASE – Projektbasis . Darin sind alle für eine Web-Präsenz relevanten Grundstrukturen und Navigationslayouts
wPageCur::appendCss
Funktionsaufruf Void appendCss(String path) Parameter path Pfad der CSS Datei Fügt die custom.scss Datei zur design.css hinzu select= " php:functionString('wPageCur::appendCss',
wPageCur::insertBeforeCss
Import-Pfad, vor den die CSS eingebunden werden soll Fügt die custom.scss Datei vor dem Import der html.scss zur design.css hinzu select= " php:functionString('wPageCur::insertBeforeCss',
Anpassen einer Bannerslider Variante über CSS-Only
nichts. Vor der Anpassung: Banner-Variante 40 (Bild, mehrspaltiger Teasesr unten) per Klick Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal) /* ... */ .listBannerSlider_var40
Links / Querverweise über Lightbox
First Hilfebereich . Schritt 1: Zentrale Javascript- und CSS-Dateien einbinden Schritt 2: Zentrale Javascript-Datei design.js Individuelle Breiten- und Höhenangaben der Lightbox Schritt 3: Attribute für die Linkbearbeitung definieren
Responsive Webdesign
Ihrer Webseite. Alle Media-Queries, welche die CSS Regeln definieren, werden in einer einzelnen CSS-Datei definiert ( design.css ). Per Javascript werden zudem bei geänderter Bildschirmauflösung in der design.js die unterschiedlichen
So beeinflussen Sie die Fancybox-Einstellungen beim Bildelement
jQuery / Fancybox müssen Sie die Parameter zum Abdunkeln des Hintergrundes, etc. nicht mehr im Javascript-Code (z.B. design.js ) vornehmen, sondern können dies bei der Weblication® eigenen wLightbox rein über CSS in der design.css
Smooth Scrolling per CSS-Only generell aktivieren
für alle internen Links automatisch aktivieren, um das Scrollen angenehmer wirken zu lassen. Beispiel (Auszug aus der design.css): Smooth Scrolling für alle Links per CSS-Only aktivieren a { -w-add-events: onclick=wScrollSmoothToTarget} Um
Unterschiedliche CSS-Definitionen, z.B. zu Farben, in Projekten nutzen
Variable muss vom CSS-Pfad im globalen styles-Pfad abliegen und einen fest definierten Dateinamen, beginnend mit design_varXXX.css tragen (XXX steht für die entsprechende Benennung). Beispielpfade:
Download von Binärdateien erzwingen
erzwingen Sie können den Download von Binärdateien für alle download-CSS-Klassen erzwingen indem Sie in der design.js u.a. Snippet definieren. Auszug aus der design.js jQuery(document).ready(function(){ // ... //Funktion für alle
Lightbox: Listenvariante boxGallery
gilt für deren Bilder in der Regel* die Lightbox-Variante "boxGallery". Die Einstellungen der Variante werden in der design.js definiert. Auszug design.js wLightboxVariants [ 'boxGallery' ] = { class : 'imageFull' ,
Cookies - Informationen zum Datenschutz
bereits im Standard eine Protokollierung zum Cookie-Hinweis umgesetzt. Dies erfolgt über eine Callback-Funktion in der design.js (" Callback, das nach dem Bestätigen und Ablehnen zum Laden externer Komponenten aufgerufen wird "). Darüber wird
CSS-Definitionen exklusiv in der Webseite oder im Editor einsetzen
oder im Editor einsetzen 07. Februar 2020 weblication cms css editor bearbeitung CSS abhängig vom Editor setzen. Die design.css wird sowohl in der Seitenausgabe als auch im Editor genutzt. Sie können allerdings auch festlegen, dass spezielle
Dynamisch HTML-Elemente über CSS und jQuery einfügen
angezeigt werden. Ein möglicher Weg ist der Einsatz von jQuery über CSS ( CSS-Only-Eigenschaft -w-jquery ). Um die design.css übersichtlicher zu halten, sprechen Sie über -w-jquery lediglich eine Javascript-Funktion an, die in der
Mobile First BASE: Responsive Bilder
vordefinierte Breiten als CSS-Only Untervarianten zur Verfügung gestellt werden. Für den Administrator bzw. den Designer Da in der Mobile First BASE praktisch alle gestalterischen Angaben zu Bildern über CSS-Only Varianten definiert
Multiprojekt Umsetzung
14. Dezember 2015 Änderungsdatum: 16. März 2023 projekte multiprojekte mehrere superglobal layout design sprachen Dieser Artikel beschreibt, wie Sie für einen Kunden mit mehreren Projekten auf das gleiche Layout
Hinweisbox bei Aufruf einer Seite / Layer für Aktionen
Inhaltsbox Einbindung über JavaScript Möglichkeit 1: JavaScript einbinden Element Möglichkeit 2: Einbinden über design.js Allgemein / BASE Classic Eine Möglichkeit, eine Fancybox beim Aufruf einer Seite anzuzeigen, ist der Einsatz eines
Entwicklertools zur schnellen Layoutanpassung nutzen
der gleiche. Dadurch, daß die MF mehrere SCSS-Dateien nutzt, welche für die generierten Seiten zu einer Haupt Design-CSS zusammengeführt werden, gibt es hier einen Unterschied. Als Administrator eingeloggt, finden Sie über das
wURL::createMailNoSpamText
wird nur in Verbindung mit der design.css korrekt dargestellt) (verfügbar ab CMS-Version 011.005.062.000) Funktionsaufruf String createMailNoSpamText(String
Scrolling von oben erzwingen
oben erzwingen So erzwingen Sie das Scrolling von oben, um z.B. Anker von oben anzusteuern. Beispiel: Auszug aus der design.js, für individuelles Scrollverhalten /* Beim Aufruf von Seiten mit Ankern scrollt der Browser in der Regel direkt
CSS-Only Varianten in Objekten nutzen
Sie im vorigen Pflegetag zum Attribut cssClass gesetzt haben (z.B.: cssClass="objectSlide" ), definieren Sie nun in der design.css die entsprechenden CSS-Only Varianten ( ... @wCssFragment{class: objectSlide ; ...): Auszug aus der design.css mit
Gestalten mit Design-Containern in Weblication®
16. Nov 2017 Weblication® bietet zahlreiche Design-Container zur Inhaltsgestaltung mit denen Sie als Redakteur, Designer oder Entwickler schnell und effizient Webseiten gestalten. Wir stellen Ihnen die wichtigsten Container für das Design
Formularfelder via Ajax laden
Ändert sich der Inhalt des Kalenderfeldes wird das Event "wOnAfterChangeDate()" ausgeführt. Das Event kann in der design.js (für alle Seiten) oder nur in der aktuellen Seite über das Javascript-Quelltext-Element eingefügt werden.
Kategorienfilter und wie das Verhalten manipuliert werden kann
den Kategorienfilter wird die URL manipuliert und über location.href abgesendet. Das kann über eine Funktion in der design.js manipuliert werden. Kategorienfilter, beeinflussen der Weiterleitung Für unten aufgeführte Syntax existierten zwei
Lottie-Files: Player pausieren
Script beschreibt, wie Sie Lottie-Files laden und abhängig von einem Lottie-Frame pausieren können. Funktionen in der design.js: Eventhandler für den Lottie-Player /////////////////////////////////////////////////////////////// // // Anmeldung
Grafiken in Relation von der Höhe mit clip-path beschneiden
Beispiel wird der Pfad einer Form verwendet, der zum Beispiel ein Bildbearbeitungstool erstellt wurde. Auszug aus der design.js //////////////////////////////////////////////////////////////// // // Initialisieren der Seite //
Texte mehrspaltig anzeigen
drei- und vierspaltige Textblöcke finden Sie nachfolgend direkt als Quelltext-Beispiel. Beispiel: Auszug aus der design.css mit CSS-Only-Varianten für mehrspaltigen Text /*@wCssFragment { class: elementText; variant: 202; caption-en: Two
Lightbox-Darstellung beeinflussen
der Lightbox prüft die aktuelle ui.js automatisch auf das Data-Attribut und zieht sich aus der in Schritt 2 genannten design.js über die dort definierte Variable die weiteren Informationen. Schritt 2: Definition der Lightbox-Variante über JS
Weblication® Entwicklerbereich
E-Mail-Text des Anmeldeformulares optimiert 08 Juli BASE für Version 20: BASE JavaScript Dateien 1.0.391: ui.js/design.js: Barrierefreiheit - Die neue Funktion wAccessibility kann über die design.js aktiviert / eingestellt werden und
Mehrspaltige Design-Container verschachteln
Containers ein. Dabei werden Bilder immer automatisch in die korrekte Größe gerechnet und dargestellt. Mehspaltige Design-Container verschachteln 20. Sep 2012 Inhaltscontainer können Sie in Weblication® CMS beliebig verschachteln. So
So verwenden Sie eine globale Variable zur Steuerung der Ausgabe
globale Variable definieren und je nach Variablenwert die Ausgabe beeinflussen. Am Beispiel eines unterschiedlichen Designs für Sommer und Winter zeigen wir Ihnen eine Möglichkeit, wie Sie die Ausgabe abhängig von den Jahreszeiten
Breadcrumb-Navigation auf Hauptpunkte beschränken
erste Navigationsebene (Hauptpunkte) beschränken, lässt sich dies einfach über CSS-Only umsetzen. Setzen Sie in der design.css Ihres Projektes folgende Zeile, um die Brotkrümelnavigation durch Einsatz der CSS-Only-Eigenschaft -w-jquery auf
HD-Funktion in BASE-Projekten nachrüsten
Schritt 7: Auf Retina-Gerät testen Schritt 1: Media-Queries nachziehen Sofern nicht vorhanden, fügen Sie der design.css Ihres BASE -Projektes folgende Media-Queries hinzu. Die Pfade passen Sie an Ihre Projektpfade an und spielen ggf.
Web-Projekte mit individuellen Layouts extrem schnell umsetzen
Layouts extrem schnell umsetzen 21. Jan 2011 Mit dem neuen Weblication® CMS setzen Sie Web-Projekte mit individuellen Designs extrem schnell um. Warum das so ist, das erklären wir Ihnen nachfolgend: Individuelle Designs und Navigationen extrem
RSS: Weblication® Mobile First Changelogs
des Anmeldeformulares optimiert 08.07.2025 11:51 BASE für Version 19: BASE JavaScript Dateien 1.0.391: ui.js/design.js: Barrierefreiheit - Die neue Funktion wAccessibility kann über die design.js aktiviert / eingestellt werden und
Systemparameter bei der XSL-Transformation
!= '' "> select= " php:functionString('wPageCur::getVar', 'wCSSPath') "/> /default-wGlobal/wGlobal/layout/styles/design.css name= " wCSSNaviPath "/> name= " wLanguageProject "> select= " php:functionString('wProjectCur::getLanguage',
wCSS::getWidthBlock
'Breite des Blockes blockContent in Pixel: ' . wCSS :: getWidthBlock ( '/dev/dokumentationen/framework/beispiele/styles/design.css' , '#blockContent' , 'width' ); ?> Ergebnis Breite des Blockes blockContent in Pixel: 488.8 Beispiel: Gibt die
Änderungen in Weblication® CMS Core/GRID
sind über das Panel erreichbar. 007.004.285.000 11.04.2013 Innerhalb des Editors können Elemente auch in der design.css über html.weditor angesprochen werden. 007.004.283.000 11.04.2013 BMI-Links zur Komprimierung von Bildern bei der
OpenStreetMap: Größe der Marker abhängig von Bildschrimbreite setzen
document . body . offsetWidth > 450 ){ wImageMapOptions = { iconScale : 5 } } Sie können die Optionen global in der design.js oder seitenabhängig über ein Javascript-Quelltextelement setzen. Beachten Sie, dass die Ausführung des
Framework
(1) Speichert das aktuelle Ranking zur Seite ab void addRanking(Array options) appendCss Fügt eine CSS-Datei zur design.css hinzu. (verfügbar ab CMS-Version 015.001.011.000) Void appendCss(String path) doNotAddToCache (1) Verhindert, dass
So greifen Sie über XSLT auf CSS-Daten zu: select="php:functionString('wCSS::getValue', '/wGlobalProject/wGlobal/layout/styles/design.css', '#blockContentStart .col1_100', '(int)width')"
Sie über XSLT auf CSS-Daten zu: select="php:functionString('wCSS::getValue', '/wGlobalProject/wGlobal/layout/styles/design.css', '#blockContentStart
wPageCur
Speichert das aktuelle Ranking zur Seite ab void addRanking(Array options) appendCss Fügt eine CSS-Datei zur design.css hinzu. (verfügbar ab CMS-Version 015.001.011.000) Void appendCss(String path) doNotAddToCache Verhindert, dass die
Bereichsnavigation - Navigation nur beim Hochscrollen Anzeigen
horizontally} */ .elementNavigationSections_var0 { -w-add-classes: wglKeepInsideTopOnScrollTop; /*Script dazu in der design.js, Klassenname frei wählbar*/ ... } Wenn sich die Navigation in der mobilen Ansicht unterschiedlich verhalten soll,
Bereich mit wechselbarem Bild umsetzen
src= " {$wGlobalProjectPath}/wGlobal/layout/images/headerBilder/bild-orange.jpg " alt= " " /> ... /* Auszug aus design.css zum Headerbild */ #blockTop #headerBild { position: absolute; top: 42px; right: 0px; max-width: 100%} Im Beispiel
wURL
mail) createMailNoSpamText Schützt eine E-Mail Adresse als Text vor SPAM (Die E-Mail wird nur in Verbindung mit der design.css korrekt dargestellt) (verfügbar ab CMS-Version 011.005.062.000) String createMailNoSpamText(String mail)
Umsetzung einer Internetpräsenz für mobile Endgeräte in älteren Projekten
= 'mobile' "> /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/mobile.css /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/design.css name= " wCSSNaviPath "> test= " $wViewMode = 'mobile' ">
Mehrspaltige Designs per Mausklick realisieren
mehr) darstellen oder 2-spaltige Container in den Darstellungen (50%-50% / 30%-70% / 70%-30% oder beliebig von Ihrem Designer definiert) anzeigen. So können auch Redakteure ohne Programmierung Inhalte flexibel mehrspaltig anlegen. Mehrspaltige
Layout Beispiele aus Weblication® coredemo.de in eigene Projekte übernehmen
So übernehmen Sie Layout Beispiele aus coredemo.de samt konfigurierter CSS-Only Darstellungsvarianten in eigene Projekte ...
NEUES Weblic®: Listen um beliebige Elemente erweitern
Über das neue Weblic® "Listenerweiterungen" können Sie beliebige Elemente in eine Liste integrieren ...