Volltextsuche
Eigene Pflegemasken zu CSS-Only Untervarianten der Inhaltsbox nutzen
Inhaltsbox nutzen Veröffentlichungsdatum: 18. Februar 2020 Änderungsdatum: 16. April 2024 Projektgrundlage: BASE Das Inhaltsbox Weblic® beinhaltet schon im Standard zu diversen Hauptvarianten Umsetzungen mit eigenen Pflegemasken von
Inhaltsboxen individuell über CSS-Only erweitern
über CSS-Only erweitern Veröffentlichungsdatum: 22. November 2018 Änderungsdatum: 19. Juli 2021 weblication cms inhaltsbox layer einblender pflegemaske erweitert css-only Inhaltsboxen lassen sich in der BASE (Mobile First) nun über beliebige
Weblication® Entwicklerbereich
können nun auch eingebettet in einem per Lightbox geöffneten Fenster genutzt werden 13 Februar BASE für Version 18: Inhaltsbox (mit weiteren Elementen befüllbar) 1.0.206: Für die Auswahl des maximal und minimal sichtbaren Bildausschnittes kann
Inhaltsboxen individuell über CSS-Only erweitern
nicht automatisch zum Artikel Inhaltsboxen individuell über CSS-Only
Bildbreite und Hintergrundbildbreite bei Inhaltsbereichen
14. September 2018 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Das Weblic® Inhaltsbereich bzw. Inhaltsbox ermöglicht über die allgemeinen Einstellungen das Setzen einer maximalen Bildbreite und auch eine Mindestbreite bei
Informationen seitlich am Bildschirmrand oder Inhalt platzieren
oder Inhalt platzieren Veröffentlichungsdatum: 19. Juli 2018 Änderungsdatum: 24. Juli 2020 weblication cms inhaltsbox positionieren positioniert rand seitlich box inhalte informationen infobox hinweisbox Inhalte können Sie global am
RSS: Weblication® Mobile First Changelogs
nun auch eingebettet in einem per Lightbox geöffneten Fenster genutzt werden 13.02.2024 14:23 BASE für Version 18: Inhaltsbox (mit weiteren Elementen befüllbar) 1.0.206: Für die Auswahl des maximal und minimal sichtbaren Bildausschnittes kann
Eigene Pflegemasken zu CSS-Only Untervarianten nutzen
Untervarianten für Pflegemasken zu nutzen. Der Screenshot nebenan bildet die Maske zu den Darstellungsvarianten des Inhaltsbox Weblics® ab (Auszug). Zu den Hauptvarianten können bereits vielfältige Einstellungen und Voreinstellungen gesetzt
-w-editmaskExtended-border
wird container.box.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahl für den Rahmen in der Inhaltsbox, Variante 111 .elementBox_var111 { /* ... */ ; -w-editmaskExtended-border: yes; /* ... */ } Inhaltsbox Element Variante
-w-editmaskExtended-parallaxbackgroundspeed
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahl für den Hintergrundbild Scroll-Faktor der Inhaltsbox, Variante 85 .elementBox_var85 { /* ... */ ; -w-editmaskExtended-parallaxbackgroundspeed: yes; /* ... */ } Inhaltsbox
RSS: Weblication® Mobile First Changelogs Version 16
Bildern der Titel als Wert für das alt-Attribut gesetzt. 21.06.2022 15:23 BASE (Mobile First) für Version 16: Inhaltsbox (mit weiteren Elementen befüllbar) 1.0.30: SEO: Für Hintergrundbilder wird bei eingecheckten Bildern der Titel als
-w-editmaskExtended-classes
CSS-Klasse container.box.wItem.php container.layout.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Gibt für die Inhaltsbox die möglichen Werte für die zu verwendende Klasse als Auswahlbox aus .elementBox_var70 { /* ... */ ;
-w-editmaskExtended-backgroundcolorpicker
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahl für die Farbwerte der Hintergrundfarbe in Inhaltsbox Variante 111 .elementBox_var111 { /* ... */ ; -w-editmaskExtended-backgroundcolorpicker: no; /* ... */ } Inhaltsbox
-w-editmaskExtended-backgroundcolor
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahl für die Farbwerte der Hintergrundfarbe in Inhaltsbox Variante 71 .elementBox_var71 { /* ... */ ; -w-editmaskExtended-backgroundcolor: yes; /* ... */ } Inhaltsbox Variante
-w-editmaskExtended-hover
container.box.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahl für den Mouseover-Effekt in Inhaltsbox Variante 111 .elementBox_var111 { /* ... */ ; -w-editmaskExtended-hover: yes; /* ... */ } Inhaltsbox Variante 111 mit
Version 14: WebP auch für Hintergrundbilder
Mit der Version 14 unterstützen Inhaltsbereiche und Inhaltsboxen auch WebP Hintergrundbilder. Über -w-option-backgroundimageCreateWebp:1; lässt sich in der CSS des jeweiligen Elementes einstellen, ob bei entsprechender Browser-Unterstützung eine automatisch generierte, WebP-Version des Bildes genutzt werden soll.
-w-editmaskExtended-backgroundpositionclasses
container.box.wItem.php container.section.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Gibt für die Inhaltsbox die möglichen Werte für die Position des Hintergrundbildes als Auswahlbox aus .elementBox_var33 { /* ... */ ;
-w-use-orig-backgroundimage
werden soll container.box.wItem.php container.section.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Verwendet bei Inhaltsbox-Variante 111 (Individuell) das Originalbild als Hintergrundbild /*@wCssFragment { class: elementBox; variant: 111;
-w-editmaskExtended-target
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert das Dateiauswahlfeld zur Auswahl des Link-Zieles zur Inhaltsbox Variante 34 .elementBox_var34 { /* ... */ ; -w-editmaskExtended-target: yes; /* ... */ } Zu beachten: Diese CSS-Only
-w-editmaskExtended-mouseoverimage
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert das Dateiauswahlfeld zur Bearbeitung des Mouseover-Bildes zur Inhaltsbox Variante 33 .elementBox_var33 { /* ... */ ; -w-editmaskExtended-mouseoverimage: yes; /* ... */ } Zu beachten: Diese
-w-editmaskExtended-link
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert das Dateiauswahlfeld zur Bearbeitung des Linkpfades zur Inhaltsbox Variante 33 .elementBox_var33 { /* ... */ ; -w-editmaskExtended-link: yes; /* ... */ } Zu beachten: Diese CSS-Only
-w-editmaskExtended-ifvisible
/ Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Einblendeffekt, wenn im sichtbaren Bereich' zur Inhaltsbox-Variante 111 .elementBox_var111 { /* ... */ ; -w-editmaskExtended-ifvisible: yes} Inhaltsbox Variante 111 -
Entwicklertools zur schnellen Layoutanpassung nutzen
und können dort den Farbwert wie gewünscht zur Variable anpassen: Auszug aus der design.css zur Hintergrundfarbe von Inhaltsboxen (als CSS-Variable) ... $ backgroundColorBoxSheet: #f0f0f0; /* Hintergrundfarbe Sheet-Boxen */ ... Dieses Verfahren
Eigene Pflegemasken zu CSS-Only Untervarianten der Überschrift nutzen
Darstellung zu nutzen. Das Beispiel finden Sie nachfolgend als Quelltextbeispiel angeführt. Beispiel: Auszug der Inhaltsbox Hauptvariante 540 mit eigenen Pflegemasken /*@wCssFragment { class: elementHeadline; variant: 0; caption:
So erstellen Sie eine weitere Primärfarbe
Beispiel 1: Ergänzen der Farb-Variante in den Überschriften Beispiel 2: Ergänzen der Farb-Variante in den Inhaltsboxen Allgemeine CSS-Deklaration Einsetzen der Primärfarbe Da die Primärfarbe in den Weblic-Varianten automatisch noch
Hinweisbox bei Aufruf einer Seite / Layer für Aktionen
Seite "vorgeschaltet" wird. Allgemein / BASE Classic Störer / Hinweis-Seite in Mobile First Einbindung über eine Inhaltsbox Einbindung über JavaScript Möglichkeit 1: JavaScript einbinden Element Möglichkeit 2: Einbinden über design.js
Beispiele für das Suchen & Ersetzen Werkzeug
anpassen Beispiel 11: Jahreszahlen ersetzen und Text davor merken Beispiel 12: Überschriften-Level innerhalb Inhaltsbox ändern Beispiel 13: Navigations-ID mit regulären Ausdrücken auf Erben einstellen Beispiel 14: Link-Element mit
So setzen Sie ein Element mit unterschiedlichen Darstellungsarten um
(2011-12-21 10:30:18)--> type= " weblication " version= " 5.0 " uid= " 8749dcd97cb5e8bd4e4432f2990cb192 "> Inhaltsbox name= " admin " time= " 1292234420 "/> name= " admin " time= " 1252018717 "/> src= "
-w-editmaskExtended-parallaxcontent
Auswahlbox für den Parallax Effekt Inhalt .elementBox_var111 { /* ... */ ; -w-editmaskExtended-parallaxcontent: yes; /* ... */ } Inhaltsbox Variante 111 mit Auswahl für den Parallax Effekt Inhalt Weiterführende Links weblics.de: Inhaltsbox Variante 111:
Objektwizard - Listeneintrag des Objektes
des Objektes" verfügbar haben wollen, ergänzen Sie im entsprechenden Mastertemplate-Element (z.B. von der Inhaltsbox) die erforderliche Gruppe: Bei Containern (wie z.B. der Inhaltsbox) müssen Sie im Nachgang dafür sorgen, daß dort
CSS-Only Varianten anpassen
die Sie bei Bedarf individuell anpassen können. Aktuell finden Sie zu Weblics® wie u.a. Bildergalerie Bild Inhaltsbox Inhaltsbereich Akkordeon-Container Inhaltscontainer mit Registerlaschen Liste Mehrspaltiger Inhaltscontainer Teaser,
-w-editmaskExtended-position
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahl für die Position / Ausrichtung im Inhaltsbox-Weblic, Variante 111 /*@wCssFragment { class: elementBox; variant: 111; usertypes: admin; caption-en: Individual;
-w-editmaskExtended-parallaxcontentdirection
{ /* .. */ ; -w-editmaskExtended-parallaxcontentdirection: yes; /* .. */ } Weiterführende Links weblics.de: Inhaltsbox Variante 86: Parallax Inhalt Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und
-w-editmaskExtended-parallaxbackgrounddirection
{ /* .. */ ; -w-editmaskExtended-parallaxbackgrounddirection: yes; /* .. */ } Weiterführende Links weblics.de: Inhaltsbox Variante 85: Parallax Hintergrundbild Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic
Weblics® 2.x in BASE 1.x nutzen
vorgenommene individuelle Anpassungen in den einzelnen Weblics® müssen Sie nach dem Update ggf. nochmals nachziehen. Inhaltsbox Mehrspaltiger Inhaltscontainer Layout-Container Inhaltscontainer mit Registerlaschen Inhaltscontainer mit Akkordeon
BASE Neuinstallation mit Übernahme der Inhalte
manuell an. CSS-Only-Varianten nachinstallieren / übernehmen Wurden im alten Projekt CSS-Only-Varianten (für z.B. Inhaltsboxen, Mehrspaltige Inhaltscontainer, Listen, BannerSlider, Bildergalerien, etc.) verwendet, welche in der aktuellen BASE 2.x
Smooth Scrolling per CSS-Only generell aktivieren
wird und der fixierte Kopfbereich berücksichtigt wird. Smooth-Scrolling für verlinkte Container/Boxen Wurde für eine Inhaltsbox oder -container ein Link definiert, wird der Link über die Funktion wOpenURL aufgerufen. Um das smooth-Scrolling für
Projektumstieg: Neue Projektgrundlage für bestehende Projekte nutzen
manuell an. CSS-Only-Varianten nachinstallieren / übernehmen Wurden im alten Projekt CSS-Only-Varianten (für z.B. Inhaltsboxen, Mehrspaltige Inhaltscontainer, Listen, BannerSlider, Bildergalerien, etc.) verwendet, welche im neuen Projekt so im
Projektumstieg von BASE Classic auf BASE (Mobile First)
manuell an. CSS-Only-Varianten nachinstallieren / übernehmen Wurden im alten Projekt CSS-Only-Varianten (für z.B. Inhaltsboxen, Mehrspaltige Inhaltscontainer, Listen, BannerSlider, Bildergalerien, etc.) verwendet, welche im neuen Projekt so im
CSS-Grid-Layout formatieren mit JavaScript in CSS-Only
Die Bild-Elemente verwenden die Bild CSS-Only-Variante 215 ("Füllt den umschließenden Container aus") und die Inhaltsbox ist auf eine Höhe von 100% gesetzt. Sie können diese Umsetzung ab CMS-Version 16 als Komponente fertig vorbereitet
WebP-Unterstützung für hochoptimierte Bilder
/* ... */ } Webp auch für Hintergrundbilder Mit aktuellen Weblic® Versionen unterstützen auch Inhaltsbereiche und Inhaltsboxen Webp Hintergrundbilder. Über -w-option-backgroundimageCreateWebp:1; lässt sich in der CSS des jeweiligen Elementes
Anwendungsbeispiel: Formular mit Registerlaschen-Container strukturiert
können darin z.B. den "Container mit Inhaltselementen" einfügen. Darin können Sie weitere Inhaltselemente (z.B. eine Inhaltsbox o.ä.) platzieren und auch mit dem "Container mit Formularelementen" arbeiten, um die gewünschten Formulare innerhalb
RSS: Weblication® Mobile First Changelogs Version 17
JavaScript Dateien 1.0.106: ui.js: Optimierungen zur Lightbox beim Aufruf verlinkter Inhaltselemente (z.B. verlinkte Inhaltsbox) vorgenommen 09.05.2023 18:51 BASE für Version 17: Veranstaltungskalender 1.0.233: Das Kalenderblatt wurde hinsichtlich
Änderungen in Weblication® CMS Core/GRID
print.scss und additional.scss) versehen. 014.001.031.000 10.07.2019 Innerhalb von mehrspaltigen Containern oder Inhaltsboxen ohne Abständen lässt sich über -w-add-classes:wAdjustsInnerItemIcons; definieren, dass die Elemente-Icons neu
BASE (Mobile First): Responsive Bilder
aktuellstem Stand sein sollten: Inhaltsbereich (container.section) Mehrspaltiger Inhaltscontainer (container.standard) Inhaltsbox (container.box) Objekt aus einer anderen Seite einbinden (container.includeObject) Bild (standard.picture.wItem.php)
-w-editmaskExtended-parallaxbackground
Hintergrundbild Weiterführende Links weblics.de: Inhaltsbereich (mit weiteren Elementen befüllbar) weblics.de: Inhaltsbox (mit weiteren Elementen befüllbar) weblics.de: Inhaltsbereich Variante 20: Parallax Hintergrundbild Zu beachten: Diese
-w-editmaskExtended-padding
(Innenabstände) Weiterführende Links weblics.de: Inhaltsbereich (mit weiteren Elementen befüllbar) weblics.de: Inhaltsbox (mit weiteren Elementen befüllbar) Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic
-w-editmaskExtended-innerheight
die Höhe der Inhalte Weiterführende Links weblics.de: Inhaltsbereich (mit weiteren Elementen befüllbar) weblics.de: Inhaltsbox (mit weiteren Elementen befüllbar) Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic