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:
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
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
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',
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
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
(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:
Ä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
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
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',
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
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
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:
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: 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: ... */
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;
, '#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 =
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
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;
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
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;
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 (
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
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
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
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 */
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
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
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
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()
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
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
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
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 {
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 ausblenden, wenn die Bildschirmauflösung der definierten Breite entspricht. Auszug aus elementSection.scss zur Untervariante 510 "Ausblenden in Mobilansicht" /*@wCssFragment { class: elementSectionOptions; variant: 510;
). removeClass ( 'wglKeepInsideTopOnScroll' ); } }); Auszug aus der elementNavigationSection.scss /*@wCssFragment { class: elementNavigationSections; variant: 0; caption: Horizontale Bereichsnavigation; caption-en: In
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;
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
true);}); } }); // ... Beispiel: Auszug aus additional.scss zu JS-Umsetzung #preContainer { width: 100%; border: 1px solid orange; background-color: tomato; color: #FFFFCC;
(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;
(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:
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;
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 */
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" 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
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
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'
<= 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:
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: