Volltextsuche
Grundlagen - BASE (Mobile First) - Weblication® Projektbasis
Auf Sass basierte, modular aufgebaute Projektvorlage mit einer Vielzahl an vorgefertigten CSS-Only Varianten, Elementen, Komponenten und anwendungen. Enthält Masken und Wizards zur Layoutanpassung.
RSS: Weblication® Mobile First Changelogs
befüllbar) 1.0.170: Copyright-Informationen von Hintergrundbildern als Layer einblenden möglich, aktivierbar in der CSS-Only-Variante über -w-option-backgroundimageAddCopyrightAsLayer:yes; und formatierbar über .copyrightLayer 11.04.2024
Farbe von SVG Bilder beim Überfahren mit der Maus ändern
IMG-Tag geladen werden. Für Bilder selbst gibt es dafür die Variante "SVG-Grafik eingebettet, per CSS formatierbar". CSS-Only der SVG-Bildvariante, um SVG Icons mit fixer Größe per CSS formatierbar einzubetten -w-embedSVG: yes; /* SVG-Bild
Inhalte ein- / ausblenden, falls eine Liste keine Einträge hat
ausblenden, wenn die Liste selbst keine Inhalte hat oder statt dessen einen globalen, alternativen Inhalt einblenden. CSS-Only Einstellmöglichkeiten, um Inhalte anzuzeigen bzw. auszublenden, falls eine Liste keine Einträge hat. - w -
Liste: Alternativtext des Bildes nutzen
zu verwenden. Hierzu muss das Bild eingecheckt und ein Titel zum Bild vergeben sein. Verwenden Sie zur Liste keine CSS-Only-Variante für den Objekt-Wizard, sondern eine normale CSS-Only-Variante (z.B. Standard, Box-Darstellung, etc.) können
Listeneinträge ohne Verlinkung - nur anteasern
2023 Projektgrundlage: BASE Listeneinträge einer Weblication® Liste zum Anteasern verwenden. a) Einstellung über CSS-Only b) Einstellungen im Objekt a) Einstellung über CSS-Only CSS-Only Listen-Variante 0 ohne Verlinkung Bei Meldungen,
Änderungen in Weblication® CMS Core/GRID
schreiben. 018.007.000.000 19.12.2023 Final Version (sicherheitsrelevantes Update) 018.006.012.000 30.11.2023 Über CSS-Only lassen sich nun beliebige Attribute mit der aktuellen ui.js setzen. Zum Beispiel:
Text in Listen ausgeben und die Anzahl der Zeichen begrenzen
kompakt zu halten, können Sie den Text der eingelesenen Dateien auf eine bestimmte Anzahl an Zeichen kürzen. Über CSS-Only Über das XSL-Template Über CSS-Only Weblication® CMS bietet ab Version 8.x vielfältige Möglichkeiten, rein über
Zeilenumbrüche im Beschreibungstext von Listen berücksichtigen
der News-Meldungen zu nutzen, bietet sich die CSS-Eigenschaft white-space an. Definieren Sie dazu in der verwendeten CSS-Only Untervariante für die Beschreibung zum listEntryDescription-Selektor die white-space Eigenschaft mit dem Wert pre-wrap
RSS: Weblication® Mobile First Changelogs Version 16
Mobile First Weblics® der CMS-Version 16. 22.06.2022 11:29 BASE (Mobile First) für Version 16: Formular 1.0.58: Neue CSS-Only Variante verfügbar, bei der Eingabefelder lediglich als Linien dargestellt werden. 22.06.2022 10:02 BASE (Mobile
Informationen seitlich am Bildschirmrand oder Inhalt platzieren
Classic als auch Mobile First die Möglichkeit von Positionierungen anbietet. Dies kann entweder über die Inhaltsbox CSS-Only-Variante 111 und Untervariante "Positionierung" oder über eigene Inhaltsbox-Varianten, welche entsprechende
Mobile First BASE: Responsive Bilder
das passende Bild ausgeliefert werden soll Frei definierbare Qualitätsstufen pro Bild, pro Bildtyp oder global über CSS-Only Art Direction, um bei kleinen Bildschirmen einen alternativen Bildausschnitt anzuzeigen Für den Redakteur Für den
BASE (Mobile First): Responsive Bilder
das passende Bild ausgeliefert werden soll Frei definierbare Qualitätsstufen pro Bild, pro Bildtyp oder global über CSS-Only Art Direction, um bei kleinen Bildschirmen einen alternativen Bildausschnitt anzuzeigen Für den Redakteur Für den
RSS: Weblication® Mobile First Changelogs Version 17
umgestellt 04.05.2023 18:58 BASE für Version 17: Bild 1.0.55: Die Farbe des Copyright-Schattens lässt sich über die CSS-Only Einstellung -w-copyrightShadowColor:#000000; anpassen. 03.05.2023 12:06 BASE für Version 17: Team, Ansprechpartner,
Tabellen mit dem Tabelleneditor gestalten
der Projektkonfiguration (pricelist(Preisliste)). Seit 14.05.2019 ist das Tabellen-Weblic® der BASE (Mobile First) mit CSS-Only-Varianten umgesetzt, welche dann eine noch flexiblere Möglichkeit bieten. Wenn in der elementTable.scss Varianten
Interaktive Erklärbilder (ImageMap): Scrollevent nach Klick auf Labels bzw. Icons aktivieren
oder .imageMapLabels) das Attribut data-scrollToElement=yes hinzugefügt wird. Sie können das entweder über CSS-Only lösen oder über Javascript . CSS-Only Javascript/jQuery CSS-Only Scrollverhalten für Marker und/oder Labels
wCSS
CSS String optimizeCSS(String cssStr, Array options = array()) setWidthBlock Setzt die Breite eines Blocks für CSS-Only Variante (verfügbar ab CMS-Version 014.003.081.000) String deleteVariantOfCssStr(String cssStr, String variant)
Framework
execute(string $cronId, bool $forceExecute = false) wCSS Zugriff auf CSS-Daten deleteVariantOfCssStr (1) Löscht eine CSS-Only Variante (verfügbar ab CMS-Version 014.003.081.000) String deleteVariantOfCssStr(String cssStr, String variant)
Listen um Pflegemasken erweitern
sich vorrangig auf Projekte vor BASE 2.x Version. Mit Einsatz von Weblics® 2.x Versionen erhalten Sie über die CSS-Only die Möglichkeit, in den meisten Listen-Templates die Steuerung der Listenoptionen-Maske rein über CSS vornehmen zu
Eigene Strukturelemente umsetzen
kommt. Vergewissern Sie sich vor Erstellen eines eigenen Strukturelementes, ob nicht bereits ein Weblic® bzw. eine CSS-Only-Variante hierzu besteht, welche Ihre geplante Umsetzung bereits abbildet! Gerne können Sie hierzu beim Weblication®
Links / Querverweise über Lightbox
die aktuellste ui.js (BASE bzw. Weblic®) individuelle Breiten- und Höhenangaben über Data-Attribute, welche über CSS-Only definiert werden können. Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/design.css /* ... */ /* bei
Wasserzeichen / Copyright in Bilder setzen
bereits gesetzt, nur im Standard erstmal deaktiviert ( -w-editmaskExtended-copyrighttext:no;-w-addCopyright:no ). Diese CSS-Only-Werte setzen Sie jeweils auf yes , damit das Eingabefeld für den Copyright Text ersichtlich ist und ein gesetzter Text
Facebook Teilen-Funktion
wird der Button dann eingeblendet, wenn es sich um eine Seite vom Objekt-Typ " news " handelt oder in der ausgewählten CSS-Only-Variante die Eigenschaft -w-show-facebookpublisher aktiviert ist. Ist mindestens eine der Bedingungen erfüllt, steht
Untervariantendefinition von Überschriften
Das Level wird bei Überschriften nun alternativ über das Fragment layoutLevel als klassische CSS-Only Untervariante definiert. Bestehende Umsetzungen über das Fragment display werden weiterhin unterstützt, können aber über "Werkzeuge / Updater / Überschriften anpassen" in das neue Format überführt werden.
WebP-Bilder nutzen
zu beachten. Die BASE (Mobile First) ist bereits im Standard so 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
Weblication® Dokumentationen
für die Software Weblication® zur Verfügung: PHP-Framework WSL Tagreferenz WSLPRE Tagreferenz Pflegetag Referenz CSS-Only Referenz Desweiteren bietet Ihnen dieses Portal zahlreiche Wissensartikel rund um die Software. Die Weblication® CMS
Google Map: Individuelle Styles
Maps können Sie auch individuelle Styles, z.B. von snazzymaps.com nutzen. Schalten Sie dafür über die verwendete CSS-Only-Variante das Feld zur Eingabe des JSON-Codes aktiv: Beispiel: Auszug aus elementGoogleMaps.scss /* ... */
Horizontale Footermap Navigation
welches durch entsprechende Einstellung unterschiedliche Darstellungen ermöglicht. Der Screen anbei zeigt die CSS-Only Darstellungsvariante 50 "Horizontale Map" auf. Um diese Darstellung z.B. im Fussbereich der Webseite zu erreichen,
Zeichenbegrenzung in Listen und per Ajax nachgeladenen Listen
/ abgeschnitten werden. Eine Möglichkeit hierzu ist der Einsatz des WSL-Tags cropText , welches auch über eine CSS-Only-Eigenschaft (-w-wsl) angesprochen werden kann. Diese Funktion greift allerdings nicht bei über Ajax nachgeladenen
Objekte über Banner Slider anzeigen
callCurrentObjectListEntry So können Sie die Listendarstellung des Objektes innerhalb des Banners verwenden. Über die CSS-Only Deklaration -w-displayElements können Sie für Objekte einstellen, dass die Darstellung nach deren Listenansicht
Online-Status von Inhaltsbereichen festlegen
über die Einstellungen des Inhaltsbereiches in der Maske freizuschalten. Dies kann nach wie vor über die verwendete CSS-Only-Variante zur Bearbeitenmaske definiert werden (siehe unten). Inhaltsbereich - Online-Status
CSS - first-child bei Inhaltsbereichen
{ + .elementSection { padding-top: 2rem !important; } } } } Tipp Alternativ kann dies auch über folgende CSS-Only-Eigenschaft ermöglicht werden: -w-option-addPositionOfElement:1; /* Position des Elementes als Data-Attribut eränzen
Schließen des Megadropdowns mouseleave deaktivieren
Im Standard wird das Megadropdown beim Verlassen des Containers geschlossen. Ist das nicht gewünscht, kann das via CSS-Only deaktiviert werden. Der Dropdown-Container wird dann geschlossen, wenn der Besucher außerhalb klickt. Beachten Sie,
Überschrift: Allgemeine Einstellungen wie Zeilenumbruch, Links, Teilformatierung, etc.
die definierten Sonderzeichen automatisch als hochgestellte Zeichen dar. Standardüberschrift (var0): Einstellungen Zur CSS-Only-Variante 0 (Standardüberschrift) ist zudem bereits im Standard folgende Möglichkeit definiert, welche nochmals
Responsive Toggler-Navigation anpassen
(z.B. 768 px) legen Sie fest, was zu den jeweiligen CSS-Selektoren definiert sein soll. Sofern Ihr Projekt noch keine CSS-Only-Variablen unterstützt, notieren Sie anstatt der Variablen direkt die entsprechenden Werte für Farbe, Schriftgröße,
CSS-Rendering - Inhalte wie Bilder automatisch in passender Breite generieren
Ursache ist in den meisten Fällen ein nicht zum Bild passendes Seitenverhältnis (aspectratio), welches z.B. über CSS-Only (-w-aspectratio) definiert werden kann. Passen Sie dies entsprechend an. Weiterführende Links PHP-Framework Funktion -
CSS-Definitionen exklusiv in der Webseite oder im Editor einsetzen
für den Editor können in der parallel zur design.css liegenden editor.css definiert werden. Kleinere Anpassungen und CSS-Only Definitionen lassen sich in der design.css selbst über die vorangestellte Klasse .weditor bzw. .no-weditor erstellen.
Textfilter in Listen nutzen
Sie in der Konfigurationsmaske den Ausfüllhinweis, Darstellung und den Modus festlegen. Aktivieren Sie dann über die CSS-Only-Variante der entsprechenden Liste die Maske für die "Daten für Textfilter": Beispiel: Auszug aus der design.css zur
Jedem Client sein Bild
Skripte notwendig Als Entwickler brauchen Sie nichts weiter zu tun, als die eigentliche Seite zu gestalten. Über CSS-Only erkennt Weblication die jeweiligen Breiten und Qualitäten. Auch das dynamische Nachladen von Bildern, sobald diese
So richten Sie die Schnittstelle zu Twitter ein
wird der Button dann eingeblendet, wenn es sich um eine Seite vom Objekt-Typ " news " handelt oder in der ausgewählten CSS-Only-Variante die Eigenschaft -w-show-twitterpublisher aktiviert ist. Ist mindestens eine der Bedingungen erfüllt, steht
Ursachen / Lösung für: Seitenbearbeitung - Probleme Ladezustand, Elemente löschen
ein Neuladen des Entwurfs erfordert, nicht beendet bzw. hängt sich auf. Dies kann z.B. die Auswahl einer anderen CSS-Only-Variante im Link-Element o.ä. sein. Strukturelemente innerhalb der Seite können nicht abschließend gelöscht werden.
Weblic® Update durchführen
individuelle Anpassungen an XSL-Templates von Weblics® nicht erforderlich, da es meist eine Lösung rein über CSS (CSS-Only) gibt. Somit können Sie bei Weblic® Updates ohne Bedenken die Aktualisierung durchführen, um auf dem neusten Stand zu
Änderungen von Layout-Dateien abgleichen
Zusatzmodules Versionierung sind auch ohne lizenziertes Modul im Layoutbereich nutzbar. So lassen sich CSS-Definitionen, CSS-Only Varianten, XSLT- und PHP-Skripte des Projektes z.B. gegen die aktuelle Version des Weblics® Servers abgleichen. In der
Automatisches Ermitteln des Überschriften-Level
welche zu Anfang mit einer Überschrift 1 beginnt und weitere Überschriften sich dann im Level automatisch anpassen. CSS-Only-Einstellung zum Überschriften-Level Über CSS-Only können Sie auch eine andere Inhaltsgruppe festlegen, ab der sich
Bildbreite und Hintergrundbildbreite bei Inhaltsbereichen
Diese Einstellung ist z.B. in der Inhaltsbereich-Variante 111 aktiviert und können Sie bei Bedarf auch für andere CSS-Only-Varianten des Inhaltsbereiches aktivieren. Bilder werden beim Seitenaufruf über die Einstellung erst ab der
Individuelle Elemente ohne eigene Templates nutzen
im Einsatz, wo man z.B. eine formatierte Telefonnummer pflegen kann. Datenfragmente unterstützen zudem die Auswahl von
Kategorienfilter - Konfigurationsbeispiel in Listen
'Darstellung': Über dieses Auswahlfeld legen Sie die Darstellung des Kategorienfilters fest. Diese können über CSS-Only-Varianten individuell definiert werden. Liste - Kategorien über URL-Parameter Nach Einfügen des Strukturelements
Link-Icons (SVG) individualisieren
anstatt der Standardfarbe der Icons auch ein Auffüllen mit einer individuellen Farbe vornehmen. Hierzu legen Sie eine CSS-Only Untervariante zu IconColor in der elementLink.scss an und definieren unter den allgemeinen Einstellungen die
Login / Logout in vorangestellter Kopfleiste
vor. Das Beispiel nutzt das "Datenfragment" mit der Variante 350, welches in aktueller Version als Weblic® und CSS-Only-Variante installiert sein muss. Ein Online-Beispiel für solch eine Umsetzung finden Sie in unserer Online-Demo (siehe
Lazy Loading für Interaktive ImageMaps bzw. Erklärbilder
für das ImageMap Weblic® bereits aktiviert. Bei älteren Projekten kann das manuell in der elementImageMap.scss über CSS-Only aktiviert werden. Auszug aus elementImageMap.scss /*@wCssFragment { class: elementImageMap; caption: Allgemein;