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
Strukturierte Daten in Webseiten
lokale Video-Element) haben Sie die Möglichkeit eigene JSON-LD Deklarationen anzugeben. Schritt 1: Aktivieren via SCSS Sie können den Callback über die Einstellung: -w-option-addJsonLdCallback aktivieren. Beispiel: Auszug aus 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
wPageCur::appendCss
015.001.011.000) 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',
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
wCSS::getValue
, '#blockContent' , '(int)width' ); ?> Beispiel: Gibt den Farbwert aus der colors.scss Datei aus Quelltext <?php // ab CMS-Version xxx zu SCSS-Dateien möglich $cssPath =
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 (
Menü-Navigationen: Mehrere Varianten für Öffner auswählbar
klicken Sie auf die Schaltfläche "Darstellung des Kopfbereichs anpassen", um die Bearbeitung des Kopfbereichs ( header.scss ) zu öffnen. Im Block "Hauptnavigation" können Sie diverse Einstellungen zur Hauptnavigation vornehmen. Z.B. können
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
Formular: Kategorien als Checkboxen mit aufklappbaren Unterkategorien
BASE Bei Kategoriendateien mit viel Kategorien kann ab CMS-Version 017.007.003.000 und aktuellem Formular-Weblic und -SCSS die Darstellung der Unterkategorien aufklappbar eingestellt werden. Formular mit ausklappbaren Unterkategorien Zum
Formulare - Absenden-Button deaktivieren, bis Eingaben korrekt
So können Sie den Absenden-Button deaktivieren, bis alle Eingabefelder richtig ausgefüllt sind. Auszug elementForm.scss /* Setzen Sie das pointer-event für folgende CSS-Regel auf none */ form[data-hasinputsinvalid='1'] { .buttonSubmit {
includeCssRessources
preload Falls die CSS vorgeladen werden soll Boolean preloadFonts Falls eingebettete woff2 Schriften aus der fonts.scss vorgeladen werden soll Beispiel: Bindet die angegebene CSS-Datei ein ... <!-- Wenn CSS-Dateien über die
Google Fonts bei Github laden und lokal einbinden
Verfügung. 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 /*
So setzen Sie eigene Formatierungen für Textfelder
/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/design.css ). In der BASE Mobile First wird dies in der Regel in der html.scss vorgenommen. Beispiel: Auszug aus der
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
Megadropdown Navigation - HowTo und Tipps
Megadropdown Navigations-ID ergänzen Ja Nein Sie finden diese Einstellungen in der Maske des Kopfbereiches ( header.scss ) im Block "Hauptnavigation". Erforderliche Dateien und Skripte Das aktuelle Mobile First Standard-Projekt liefert
Projektumstieg: Neue Projektgrundlage für bestehende Projekte nutzen
Sofern es Darstellungsprobleme gibt, speichern Sie über "Layout anpassen" die design.css (bei BASE Classic) bzw. page.scss (bei BASE (Mobile First)) nochmals ab. Weiter geht es bei Schritt 3. TIPP: Alternativ zur Neuinstallation eines
RSS: Weblication® Mobile First Changelogs
im Kopfbereich kann nun per Tabulator-Taste genutzt werden. Die Variante 10 der headerElementLanguageSelector.scss ist hierfür entsprechend umgesetzt und eine aktuelle ui.js erforderlich. 16.07.2025 10:38 BASE für Version 19: Liste
Weblication® Entwicklerbereich
Entwicklerbereich Weblication® Content-Management-System Core und GRID
Überschrift: Allgemeine Einstellungen wie Zeilenumbruch, Links, Teilformatierung, etc.
Sie hierzu die aktuelle Version des Überschriften-Weblics® mit den aktuellen CSS-Definitionen in der elementHeadline.scss . Dort finden Sie im Bereich "Allgemein" folgende Felder: Erste Inhaltsgruppe, welche mit einer Überschrift 1 beginnt,
Linken Seitenbereich zur Pflege aktivieren
vorhanden) im Standard eine Navigation eingebunden. Das können Sie deaktivieren, indem Sie das "Seiten-Layout" (page.scss) bearbeiten und die Einstellung " Navigation im linken Bereich anzeigen, falls verfügbar " ($displayNavigationLeft) auf
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
Layout / Design - CSS-Stylesheets | Weblication CMS Onlinedokumentation
Durch Klick auf den Button " CSS-Stylesheets " öffnet sich die Maske zur Bearbeitung des Seiten-Layouts ( page.scss ). Bedienung Die Bearbeitung das
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
BASE Projekt - Mobile First | Weblication CMS Onlinedokumentation
für viewport-abhängige Bildausschnitte. Layoutwizard / Themes Der Layoutwizard wird im entsprechenden Theme (page.scss) selbst als Maske definiert. Listen Die Reihenfolge ist vollständig über CSS definierbar. HTML-Dekoratoren können