Volltextsuche
Nicht relevante Sass-Bedingungen werden im CSS Editor inaktiv dargestellt
Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Sass-Bedingungen werden bei der Quelltextbearbeitung der page.scss bereits geprüft. Falls diese nicht aktiv sind, werden sie ausgegraut dargestellt, um so die Übersichtlichkeit zu
-w-registerJsDefer
Einbinden einer JavaScript (defer) Datei über CSS
Copyright Angabe für Bilder umsetzen
das Bild selber mit dem Hinweis versehen ist. Bild mit Copyright-Hinweis im Bild Beispiel: Auszug aus elementPicture.scss zum aktivierten Copyrighthinweis in Bild-Variante 0 /*@wCssFragment { class: elementPicture; variant: 0; caption:
Link-Icons (SVG) individualisieren
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: Beispiel: Auszug aus der html.scss des globalen Projektes zu
So erstellen Sie eine weitere Primärfarbe
erstellen Sie eine weitere Primärfarbe Veröffentlichungsdatum: 20. März 2023 Änderungsdatum: 26. April 2023 colors.scss primärfarbe baseColorPrimary Farben Öffnen Sie über die CSS-Styles die Farben (colors.scss) und ergänzen Sie über
wPageCur::insertBeforeCss
path Pfad der CSS Datei insertBeforePath 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',
Unterschiedliche CSS-Definitionen, z.B. zu Farben, in Projekten nutzen
Farben für eine Kontrastanpassung Weiterführende Links Variante 1: Umsetzung über Selektoren Sie können z.B. in den SCSS-Dateien die Selektoren abhängig von der Klasse setzen, welche im html-Tag gesetzt ist. Nehmen wir ein Beispiel eines
Schließen des Megadropdowns mouseleave deaktivieren
mit dem Öffnen der Dropdowns via Klick funktioniert. Einstellbar ist das in der Maskenansicht der Datei header.scss unter "Megadropdown öffnen beim". Deklaration in der entsprechenden navigation[navigationstyp].scss oder der
Vorlesefunktion für Seitentexte nutzen
(Mobile First) BASE Classic BASE (Mobile First) BASE (Mobile First): wglReader Klasse allen Seiten hinzufügen (reader.scss) #blockContentInner { -w-add-classes: wglReader; -w-add-data: 'readertarget=prepend,readertextpre=Ich lese Ihnen nun vor:
Scrollverhalten des Headers
Möchten Sie das Verhalten des Kopfbereiches beim Scrollen beeinflussen, genügt es die Styleregeln in der header.scss anzupassen. Das Verhalten des Kopfbereiches (header) wird über folgende CSS-Klassen gesteuert, die über JavaScript
Seitenbereiche global oder auf Seitenebene ein- bzw. ausblenden
oder auf Seitenebene ein- und ausblenden. Ob und welche Seitenbereiche angezeigt werden sollen, wird global in der page.scss über die Seitenvarianten oder in der Seite selbst über die Metadaten festgelegt. Seitenbereiche global einblenden
Wie blendet man CSS-Variablen in der Maske aus?
zum Layout auszublenden, stehen showIf-Abfragen zur Verfügung. Über folgende Anweisung wird z.B. in der colors.scss (Farben) die CSS-Variable für die Hintergrundfarbe des Kopfbereiches nur angezeigt, wenn der Kopfbereich nicht über
Lightbox-Darstellung beeinflussen
auf welches später per JavaScript und CSS zurückgegriffen werden kann. Beispiel: Auszug aus der listPictureGallery.scss zu Bildergalerie-Variante 2 - Erweiterung per jQuery /*@wCssFragment { class: listPictureGallery; variant: 2; caption:
Änderungen von Layout-Dateien abgleichen
zu früheren Versionen bzw. auch zur aktuellen Version des Weblics-Servers. Änderungen bzw. Anpassungen von Templates, SCSS-Dateien und ähnlichen Layout-Dateien können über die Versionsverwaltung von Weblication® abgeglichen werden. Die
Bildergalerie: Hintergrundfarbe eingebetteter Bilder festlegen
Vor der Anpassung Bildergalerie-Variante 0 Hintergrundfarbe Standard Beispiel: Auszug aus der listPictureGallery.scss zur Bildergalerie-Variante 0 /* ... */ /*@wCssFragment { class: listPictureGallery; variant: 0; caption: Standard;
Scroll-Fortschrittsanzeige für Seiten
wglAddScrollProgress;} BASE (Mobile First): Zeigt den Scroll-Fortschritt im fixierten blockHeader an (page.scss) /* Gestaltung der Kopfbereichs */ #blockHeader { /* ... */ -w-add-classes: wglAddScrollProgress; Scroll-Fortschritt nur
wCSS::deleteVariantOfCssStr
variant) Parameter cssStr CSS variant Zu löschende Variante Beispiel: Löscht die CSS-Only-Variante 42 aus elementBox.scss Quelltext <?php include( $_SERVER [ 'DOCUMENT_ROOT' ]. '/weblication/grid.php' ); $cssStr = wReadWrite :: readFile (
WebP-Unterstützung für hochoptimierte Bilder
" WebP Unterstützung in .htaccess ergänzen " zur Verfügung, um dies schnell nachtragen zu können. elementPicture.scss zu WebP Auszug aus elementPicture.scss /* Bilder */ /*@wCssFragment { class: elementPicture; caption: Bild allgemein;
Tabellen mit dem Tabelleneditor gestalten
First) mit CSS-Only-Varianten umgesetzt, welche dann eine noch flexiblere Möglichkeit bieten. Wenn in der elementTable.scss Varianten verfügbar sind, werden die bisherigen Klassenangaben der Projektkonfiguration durch die CSS-Only-Varianten
SassC im Mobile First Projekt nutzen
Mobile First Projekt nutzen Veröffentlichungsdatum: 06. Februar 2017 Änderungsdatum: 05. Mai 2017 weblication cms css scss sassc wconf mobile first Einsatz von SassC im Weblication® CMS Mobile First Projekt. Das Mobile First Projekt basiert
Barrierefrei-Menü
erforderliche Code eingebunden. Aktiviert werden kann dies über eine CSS-Variable, welche im Standard in der header.scss wie folgt definiert ist (siehe CSS-Beispiel unten). Bevor Sie beim Weblic® Update vorhandene Templates überschreiben,
Banner: Bildausschnitt für kleine Endgeräte anders wählen
(für mehr Höhe) dann auch bei kleinerer Bildschirmbreite ersichtlich ist. Beispiel: Auszug aus der listBannerSlider.scss zur Banner-Variante 0 (Standard) /*@wCssFragment { class: listBannerSlider; variant: 0; caption: Banner standard;
Google Fonts bei Github laden und lokal einbinden
adminsscholl Einbinden über Maske Ab CMS-Version 17 lassen sich über die Layout-Verwaltung bei Bearbeitung der fonts.scss Schriftarten über Masken einspielen, auswählen und konfigurieren. Schrift einbinden Schrift festlegen Schrift
Weblic® Update durchführen
eingespielt werden, sonstiges CSS manuell. Dies bezieht sich ausschliesslich auf das BASE (Mobile First) Projekt und .scss -Dateien. Standardmässig sind .scss Dateien ausgeblendet, können aber über die "anzeigen" Schaltfläche am unteren
Vor/zurück Blätterfunktion Liste um Position ergänzen
Eintrag und Gesamtzahl der Einträge. Formatieren Sie dies individuell für Ihr Projekt, z.B. über die pageNaviList.scss . Ein Beispiel finden Sie nachfolgend. Beispiel: Auszug aus der pageNaviList.scss zur Definition der Positionsanzeige /*
Entwicklertools zur schnellen Layoutanpassung nutzen
eingegangen. Bei Mobile First Projekten ( BMF ) ist der Ablauf grundsätzlich 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
Weblication® Entwicklerbereich
aktiviert werden. Bei aktivierter CSS-Only-Einstellung -w-option-embedClassIcons:yes; in der listEntryElement.scss werden die Standard-Icons als SVG im HTML eingebunden. 30 Oktober BASE für Version 20: BASE Templates 1.0.674: Das
Version 17: Schriften einbinden über Benutzeroberfläche
17. Feb 2022 In Weblication® Version 17 lassen sich über die Layout-Verwaltung bei Bearbeitung der fonts.scss Schriftarten über Masken einspielen, auswählen und konfigurieren. Version 17: Schriften einbinden über
Was sich von Weblication® Version 5, 6, 7, 8, 9,10, 11 bis hin zu Version 12 alles getan hat
Seite eingebunden, um das Rendern nicht zu blockieren. Layoutwizard Der Layoutwizard wird im entsprechenden Theme (page.scss) selbst als Maske definiert. Weblicsverwaltung Ob ein Weblic angepasst wurde, ist in der Weblic-Verwaltung ersichtlich.
Neu in Weblication® Version 19 - veröffentlicht am 01.07.2024
einstellen. Danach können diese sich nicht mehr anmelden. CSS-Only Alle Sass-Farbvariablen in der colors.scss werden auch automatisch als generierte CSS-Variablen ausgeliefert. Analyse Bei Kampagnenlinks lassen sich neben Quellen
Neu in Weblication® Version 17 - veröffentlicht am 01.07.2022
werden im Menü abgesoftet angezeigt, um einfacher zu erkennen, welche CSS-Dateien anzupassen sind. In der fonts.scss lassen sich Schriftarten über Masken einspielen, auswählen und konfigurieren. Bei der CSS-Bearbeitung über Masken
Neu in Weblication® Version 12 - veröffentlicht am 01.07.2017
Seite eingebunden, um das Rendern nicht zu blockieren. Layoutwizard Der Layoutwizard wird im entsprechenden Theme (page.scss) selbst als Maske definiert. Weblicsverwaltung Ob ein Weblic angepasst wurde, ist in der Weblic-Verwaltung
Version 12: Überblick einiger Neuerungen für Agenturen und Entwickler
Auch die Eingabemaske des Layoutwizards wird automatisch aus dem CSS-Quelltext erzeugt. Der CSS-Quelltext der page.scss ... erzeugt automatisch die Eingabemaske des Layout-Wizards Aufgaben und Notizen auch im Agenturboard sichtbar Offene
Weblication®: Google-Fonts lokal einbinden
einbinden In Weblication® Version 17 lassen sich über die Layout-Verwaltung bei Bearbeitung der fonts.scss Schriftarten über Masken einspielen, auswählen und konfigurieren. Google Fonts lokal einbinden - Lösung in älteren
Version 15: Neuer Benutzertyp - Designer
mit Rechten zum Anpassen von CSS-Dateien und zum Gestalten von Seiten. Er darf unter layout/styles alle CSS bzw. SCSS Dateien bearbeiten und neue CSS-Only-Darstellungsvarianten installieren sowie im Editor die
Neu in Weblication® Version 15 - veröffentlicht am 01.07.2020
mit Rechten zum Anpassen von CSS-Dateien und zum Gestalten von Seiten. Er darf unter layout/styles alle CSS bzw. SCSS Dateien bearbeiten und neue CSS-Only-Darstellungsvarianten installieren sowie im Editor die
Neu in Weblication® Version 11 - veröffentlicht am 01.07.2016
(cmd + f), Suchen und Ersetzen (cmd + h), Tauschen von Zeilen (ctrl + cmd + up/down) u.v.m. Code-Highlighting für SCSS Einklappen von Quelltextblöcken Hervorhebung von Quelltextblöcken, wenn der Cursor vor einer Klammer steht
Weblication® Benutzertypen / Berechtigungen | Weblication CMS Onlinedokumentation
Rechten beim Anpassen von CSS-Dateien und beim Gestalten von Seiten. Der Benutzer darf unter layout/styles alle CSS bzw. SCSS Dateien bearbeiten und neue Varianten installieren, sowie im Editor die Varianten für Administratoren wählen.