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
das 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
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
-w-add-data
{ -w-add-data: effect=fadeIn,duration=0.3s} /* HTML-Ergebnis: Beispiel 4: Beispiel BASE Mobile First zur elementLink.scss > a { -w-add-data: 'scrollingauto=yes,scrollsmoothtotargetduration=400'; /* ... */ } /* HTML-Ergebnis: ... */
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;
Änderungen in Weblication® CMS Core/GRID
Funktionen wPageCur::appendCss und wPageCur::insertBeforeCss lässt sich die design.css dynamisch um weitere SCSS-Dateien ergänzen. 015.001.009.001 01.07.2020 Bei Listen wird neben dem Sortiertyp random() nun auch dailyRandom()
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
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
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 /*
Weblic® Update durchführen
und können nur manuell aktualisiert werden. Dies bezieht sich ausschliesslich auf das BASE (Mobile First) Projekt und .scss -Dateien. Zur SCSS-Datei wird ein "Änderungen anzeigen" Link angezeigt, über welchen die Änderungen zwischen der
Änderungen in Weblication® CMS Core/GRID
Speichern der ausgehenden Mails. 012.003.184.000 14.09.2017 Nicht erfüllte Bedingungen werden in der page.scss standardmäßig ausgeblendet, wodurch die Arbeit im CSS noch deutlich übersichtlicher wird. 012.003.181.000 13.09.2017
Projektumsetzung mit dunklem Hintergrund und heller Schrift
Dieser Artikel zeigt auf, wie Sie allgemein die Farbgebung schnell und komfortabel beeinflussen können. Die colors.scss (Farben) liefert Ihnen in der Masken-Ansicht die Möglichkeit, für diverse Bereiche und Elemente der Seite die Farben /
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
Änderungen in Weblication® CMS Core/GRID
019.001.100.000 19.08.2024 Im Projekt lässt sich einstellen, ob eingebettete woff2 Schriftarten aus der fonts.scss vorgeladen werden sollen. 019.001.086.000 13.08.2024 Neue PHP-Framework Funktion
Ü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,
Snippets
Möchten Sie das Verhalten des Kopfbereiches beim Scrollen beeinflussen, genügt es die Styleregeln in der header.scss anzupassen. Zum Snippet Sortieren von Objektdaten via PHP Der Artikel beschreibt, die Objekdaten, die via PHP
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
Was sich von Weblication® Version 5, 6, 7, 8, 9,10 bis hin zu Version 11 alles getan hat
(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
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
Linkbearbeitung | Weblication CMS Onlinedokumentation
zur Pflegemaske erweitert werden. Schauen Sie sich hierzu am besten die Standard Auslieferung der elementLink.scss an, welche in der Regel alle Möglichkeiten schon vorbereitet hat. Über die weiterführenden Links finden Sie die