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
Welche Rolle haben Administratoren und Designer bei der Bildgestaltung mit BASE (Mobile First)?
mit BASE (Mobile First)? Alle gestalterischen Angaben zu Bildern werden über CSS-Only Varianten definiert, was dem Designer die größtmögliche Kontrolle über die Bilddarstellung ermöglicht. Wie Bilder und Hintergrundbilder sich verhalten,
Welche Kontrolle hat der Administrator bzw. Designer bei der Bilddarstellung im BASE (Mobile First) System?
im CSS steuerbar. Die Breitenberechnung erfordert keine speziellen hierarchischen CSS-Definitionen, wodurch der Designer wesentlich mehr Freiheiten erhält. Mehr dazu in folgendem Artikel: BASE (Mobile First): Responsive Bilder < 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' ,
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
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
Manuelles Nachrüsten der 16er Statistik in älteren Projekten (z.B. BASE Classic)
Ablage der erforderlichen Skripte (wa.js, wa.php) includes.global.php (im htmlHeader-Template) Anpassungen in der design.js Weiterführende Links Ablage der erforderlichen Skripte (wa.js, wa.php)
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
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
BASE (Mobile First): Responsive Bilder
Bildgröße auszuliefern. Funktionsumfang der Responsive Bilder Für den Redakteur Für den Administrator bzw. den Designer So funktioniert die Breitenberechnung Hinweise Funktionsumfang der Responsive Bilder Bilder werden als Einzelelemente,
Textfilter in Listen nutzen
die CSS-Only-Variante der entsprechenden Liste die Maske für die "Daten für Textfilter": Beispiel: Auszug aus der design.css zur Listen-Variante 111 mit aktiviertem Textfilter .listDefault_var111 {...; -w-editmaskExtended-textsquickfilter:
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
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
Wasserzeichen / Copyright in Bilder setzen
liefert Ihnen hierzu bereits im Standard das Bild-Element als Weblic® schon entsprechend vorbereitet aus. In der design.css sind die Einträge hierzu bereits gesetzt, nur im Standard erstmal deaktiviert (
JavaScript-Callback nach öffnen einer Lightbox
Anpassungen durchzuführen. Damit der Callback wirkt, muss lediglich die Funktion wOnAfterInitLightbox z.B. in der design.js eingebunden werden. Callback, der nach dem Öffnen einer Lightbox aufgerufen wird und in der design.js definiert ist
Anwendungsbeispiel: Formular mit Registerlaschen-Container strukturiert
abhängig von Pflichtfeldern (Validator) kenntlich gemacht werden sollen, können Sie dies durch eine Ergänzung in der design.js und per CSS z.B. wie folgt realisieren. Beispiel: Auszug aus design.js // ...
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 Version 19
E-Mail-Text des Anmeldeformulares optimiert 08.07.2025 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
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
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
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 ...
Weblication® Entwicklerbereich
Bedienung per Tabulator-Taste möglich 01 Oktober BASE für Version 20: BASE JavaScript Dateien 1.0.457: ui.js / design.js: Zur Bildergalerie-Variante 608 (PDF Blätterkatalog) ermöglicht die ui.js nun den direkten Aufruf einer
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
NEUES Weblic®: Listen um beliebige Elemente erweitern
Über das neue Weblic® "Listenerweiterungen" können Sie beliebige Elemente in eine Liste integrieren ...
Design Container: Webseiten gestalten per Mausklick ohne Programmierung
Design Container: Webseiten gestalten per Mausklick ohne Programmierung 14. Feb 2014 Weblication bietet inzwischen mehr als 20
Responsive Container: Inhalte abhängig von der Bildschirmbreite ein-/ausblenden
Über den Responsive Inhaltscontainer kann ein Redakteur Bereiche definieren, die ab einer bestimmten Bildschirmgröße ausgeblendet werden. Der Container kann mit beliebigen Strukturelementen befüllt werden. Inhalte werden ausgeliefert und sind für den Besucher nicht sichtbar, falls er nicht die geforderte Bildschirmgröße hat. Damit lassen sich Responsive Webdesign-Funktionen auf Inhaltsebene umsetzen. Auf der folgenden Seite können Sie das Prinzip testen
3 Videos zu CSS-Only: Die Design-Technologie by Weblication®
zu CSS-Only: Die Design-Technologie by Weblication® 08. Dez 2015 Mit den folgenden drei Videos zu CSS-Only - der Design-Technologie by Weblication® - zeigen wir Ihnen: das Prinzip die Möglichkeiten wie Sie selbst gestalten mit CSS-Only
Beliebige Designs mit Weblication CMS extrem schnell umsetzen
2011 Mit Weblication CMS setzen Sie beliebige Designs extrem schnell um. Der Film zeigt Ihnen Schritt für Schritt eine Designumsetzung . Play Mute Full-Screen Die nebenstehenden Download-Dateien dokumentieren exakt alle im Film gezeigten Detailanpassungen
Neue designorientierte mobile Menünavigation - erweitert für große Bildschirme
für große Bildschirme 30. Apr 2021 In der neuesten Version der BASE (Mobile First) für Version 15 sind neue designorientierte mobile Menünavigationen verfügbar, die um Gestaltungsmöglichkeiten für große Bildschirme erweitert wurden:
Design und Ergonomie im Editor in Weblication Version 8 nochmals verbessert
verbessert 24. Mai 2013 Design und Ergonomie haben wir in Weblication® Version 8 nochmals grundlegend verbessert. So wurde die Höhe der
Version 15: Neuer Benutzertyp - Designer
installieren sowie im Editor die CSS-Only-Darstellungsvarianten für Administratoren wählen. Lizenztechnisch wird ein - Designer 07. Mai 2020 In Weblication® Version 15 ist ein neuer Benutzertyp " Designer " verfügbar. Dabei handelt es sich um
Gestaltete Tabellen erstellen und bearbeiten in Weblication®
völlig andersartigen Tabellen-Editor . Redakteure müssen sich nicht mehr um die Darstellung der Tabellen kümmern und Designer können beruhigt Redakteure mit dem Tabellen-Editor arbeiten lassen ohne Angst vor einem "Design-GAU": Administratoren
So stellen Sie Projektteile in anderen Projekten bereit
stellen Sie Projektteile in anderen Projekten bereit 22. Sep 2017 In Weblication® können Sie eigene Entwicklungen und Designs aus beliebigen Mobile First Projekten in anderen Projekten wiederverwenden wie beispielsweise: vordefinierte
Umstellung bestehender Weblication® Präsenzen auf Responsive Webdesign
umgesetzt. Es gibt zwei Ansätze , bestehende Weblication® Präsenzen ab Weblication® Version 5 auf ein Responsive Design umzusetzen: Erster Ansatz - nicht empfohlen: Sie integrieren entsprechende Funktionen für die Responsive-Umsetzung in
Verschiedene Seitenlayouts nutzen
nutzen 22. Jan 2013 Wenn es das Designkonzept zulässt, können Sie per Mausklick jederzeit das Seitenlayout jeder einzelnen Seite individuell festlegen. Die
Bildergalerien per Mausklick in Internet-Seiten einbinden
Einzelbilder zum Blättern: Bildergalerien legen Sie einfach per Mausklick in Ihren Seiten an. Dabei läßt sich das Design beliebig von Web-Designern verändern. Bildergalerie: Kleine Bilder mit Vergrößerungsfunktion Bildergalerie: