Volltextsuche
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
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:
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
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',
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: ... */
Dekoratoren: Listenelemente mit DIVs umschließen
enthalten. Beispiel: Telefon und E-Mail mit einem DIV umschließen innerhalb einer Listen-Variante in der listDefault.scss -w-displayElements: thumbnail=yes,title=yes,decorator[div.listEntryContact]=yes,phone=yes,email=yes,decorator[/div]=yes;
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 =
Zeichenbegrenzung in Listen und per Ajax nachgeladenen Listen
auf 1 . Ab CMS-Version 15 können Sie dies zudem auch im aktuellen Banner-Weblic einsetzen. Auszug aus der listDefault.scss /*@wCssFragment { class: listDefaultDescription; variant: 10; caption: Darf Bild umfließen; caption-en: May surround
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
Tabelle: Zeilen, Spalten und Zellen individuell formatieren
dies für eine rote Hintergrundfarbe für Tabellenzeilen auf (Variante: ...varred). Beipiel: Auszug aus elementTable.scss zur Standard-Variante (var0) mit individueller RowClass und ColClass /* ... */ /*@wCssFragment { class: elementTable;
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 (
Hintergrundfarbe und Schriftfarbe in Inhaltsbereichen (z.B. Fußbereich)
BASE (Mobile First) Projektgrundlage liefert Ihnen hierzu bereits eine dynamische Umsetzung im Standard. Maske colors.scss zu Farben im Fußbereich Über die CSS-Datei für Farben (colors.scss) kann im Feld " Hintergrundfarbe des
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
Telefon- und Faxnummern ohne Verlinkung anzeigen
mit dem Fax-Symbol, aber ohne Verlinkung, anzeigen, lassen Sie das Link-Feld in der Bearbeitenmaske leer. Die html.scss sieht zu dieser Definition wie folgt aus. Auszug aus der html.scss zur Definition von Telefon- und Faxnummern ohne
Zurück-Link zu News-Objekten anzeigen
Zu News-Objekten kann optional ein Zurück-Link auf der Detail-Seite genutzt werden. Aktivieren Sie dazu in der Objekt-SCSS-Datei die Anzeige für den elementLinkBack -Sektor. Beispiel: Auszug aus der objectNews.scss /* Aktuelle Meldung */
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
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
WebP-Bilder nutzen
umgesetzt, daß WebP-Bilder in den entsprechenden CSS-Only-Varianten aktiviert sind. Ein Beispiel nachfolgend aus der SCSS-Datei für das Bild-Element. Auszug aus elementPicture.scss (Allgemein) -w-createWebp: 1; /* Zusätzliches webp-Bild
Ä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
Darstellungsvarianten von Seiten vererben bzw. zentral definieren
definiert. Wenn Sie diese erben oder zentral ändern wollen können Sie das im CSS der Variante innerhalb der page.scss machen. Dort können Sie dann nicht nur die Variante selbst anpassen, sondern die Definitionen auch einfach über
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 {
Google Map: Individuelle Styles
die verwendete CSS-Only-Variante das Feld zur Eingabe des JSON-Codes aktiv: Beispiel: Auszug aus elementGoogleMaps.scss /* ... */ /*@wCssFragment { class: elementGoogleMaps; variant: 0; caption: Standard; caption-en: Default} */ .elementGoogleMaps_var0
Inhaltsbereich in Mobilansicht ausblenden
Inhaltsbereich ausblenden, wenn die Bildschirmauflösung der definierten Breite entspricht. Auszug aus elementSection.scss zur Untervariante 510 "Ausblenden in Mobilansicht" /*@wCssFragment { class: elementSectionOptions; variant: 510;
Bereichsnavigation - Navigation nur beim Hochscrollen Anzeigen
). removeClass ( 'wglKeepInsideTopOnScroll' ); } }); Auszug aus der elementNavigationSection.scss /*@wCssFragment { class: elementNavigationSections; variant: 0; caption: Horizontale Bereichsnavigation; caption-en: In
-w-add-classes
die Klasse ebenfalls zu setzen. -w-addClasses setzt die Klasse serverseitig. Beispiel 3: Fügt in der elementLink.scss dem linkButton Selektor noch die Klasse button hinzu /* ... */ .linkButton { /* ... */ -w-add-classes: button;
Manuelle Sortierung in Listen
können Sie individuell in der entsprechenden CSS-Listen-Variante darauf eingehen. Beispiel: Auszug aus der listDefault.scss einer BASE (Mobile First) /* CSS-Klasse für den Anfasser zum Verschieben */ .wglListEntryMover {} /* CSS-Klassen für
Hinweisbox bei Aufruf einer Seite / Layer für Aktionen
true);}); } }); // ... Beispiel: Auszug aus additional.scss zu JS-Umsetzung #preContainer { width: 100%; border: 1px solid orange; background-color: tomato; color: #FFFFCC;
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;
CSS-Einstellung der Hauptvariante erzwingen
(mit aktivem Link) verwendet werden soll, sondern die der Hauptvariante (kein Link). Beispiel: Auszug aus listDefault.scss zu Hauptvariante /* ... */ /*@wCssFragment { class: listDefault; variant: 20; caption: Kachel-Darstellung; caption-en:
Eigene Pflegemasken zu CSS-Only Untervarianten der Liste nutzen
zu nutzen. Das Beispiel finden Sie nachfolgend als Quelltextbeispiel angeführt. Beispiel: Auszug aus der listDefault.scss - Individuelle Pflegemaske für eigene Untervariante zu Bild Seitenverhältnissen /*@wCssFragment { class: listDefault;
Kategorienfilter Schaltflächen um Icon ergänzen
CSS-Elementes :before, zu welchem Sie nachfolgend Beispiele finden. Beispiel: Auszug aus elementCategoryFilterList.scss zur Erweiterung der Schaltflächen /* Schaltfläche um Icon erweitern - data-value entspricht Shop-Kategorie Systeme */
Link-Element: Teilformatierung im Link-Text vornehmen
die gewünschte Darstellung formatieren können (siehe nachfolgendes Beispiel). Beispiel: Auszug aus der elementLink.scss zur Allgemeinen Definition mit aktierter allowMarkBySquareBrackets-Einstellung /*@wCssFragment { class: elementLink;
Link-Ziel und Link-Symbol automatisiert setzen
Link" um. Dies erspart Ihnen die Arbeit, die Einstellung manuel setzen zu müssen. Beispiel: Auszug aus elementLink.scss zum elementLink-Selektor -w-option-setTargetBlankIfHttp: yes; /* Beim Eintragen eines externen Links automatisch das
Banner: Vorschaubilder auf Banner anzeigen
CSS Beispiel Listenvariante 161: Banner Bild links Text rechts mit Vorschaubild Quelltext CSS Auszug listBannerSlider.scss, Variante 161 /*@wCssFragment { class: listBannerSlider; variant: 161; caption: Banner Bild links Text rechts mit
Semantische Bereiche einer Webseite - header, footer, section
Elemente-Name eines Inhaltsbereiches anstatt div als section ausgegeben wird. Beispiel: Auszug aus der elementSection.scss zur Angabe des Elemente-Names -w-option-elementName: 'div'; /* Elementname von Inhaltsbereichen */ <!-- 'section'
Tabelle über CSS-Only responsive darstellen
<= 768 Pixel so ausgegeben, daß die Werte neben dem Label platziert werden. Beispiel: Auszug aus der elementTable.scss mit aktiviertem responsiveType /* ... */ /*@wCssFragment { class: elementTable; variant: 0; livepreview: yes; caption:
Unterschiedliche Varianten in Listenerweiterungen auswählbar machen
für die Steuerung der Darstellung über eine Listenerweiterung genutzt. Beispiel: Auszug aus der listDefault.scss zur Variante "Darstellung über Objekt-Wizard" /*@wCssFragment { class: listDefault; variant: 20100; caption: