Volltextsuche
Entwicklertools zur schnellen Layoutanpassung nutzen
Layoutanpassung nutzen Veröffentlichungsdatum: 03. September 2018 Änderungsdatum: 15. Mai 2020 weblication cms layout anpassungen css html firebug entwicklertool base mobile first Layoutelemente schnell und einfach umbauen. In diesem
CSS-Grid-Layout formatieren mit JavaScript in CSS-Only
kann man auch komplexeres jQuery nutzen, um damit dynamisch CSS-Variablen zu setzen, die wiederum z.B. ein CSS-Grid-Layout formatieren. Das folgende Beispiel zeigt eindrücklich die Möglichkeiten, die diese Technik bietet. CSS GRID LAYOUT
HD-Funktion in BASE-Projekten nachrüsten
hat} */ @media ( -webkit-min-device-pixel-ratio: 2) { #blockTop #searchBox #searchSubmit { background-image: url (/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/backgrounds/button-search@2x.png) ; background-size: 22px 20px;} .elementText ul {
Eigene Strukturelemente umsetzen
das individuell angepasste Strukturelement " Horizontale Linie (mit Farbauswahl) " angezeigt (Stand: November 2014). layout.hr.wItem.php (Standardauslieferung) <?php $version="1.0"; $encoding="UTF-8"; ?> <?php exit; ?> xmlns:xsl= "
Umsetzung einer Internetpräsenz für mobile Endgeräte in älteren Projekten
mobile.wDocument.php ). Beispiel: https://www.weblication.de/cms/index.php?viewmode=mobile Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/scripts/pre.php zum mobilen Ansichtsmodus // Auszug aus der pre.php // Bitte immer mit pre.php des
Änderungen von Layout-Dateien abgleichen
2021 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Die IDE von Weblication® CMS erlaubt den Abgleich von Layout-Dateien zu früheren Versionen bzw. auch zur aktuellen Version des Weblics-Servers. Änderungen bzw. Anpassungen von
Multiprojekt Umsetzung
Veröffentlichungsdatum: 14. Dezember 2015 Änderungsdatum: 16. März 2023 projekte multiprojekte mehrere superglobal layout design sprachen Dieser Artikel beschreibt, wie Sie für einen Kunden mit mehreren Projekten auf das gleiche Layout
-w-editmaskExtended-layout
Nutzbar ab: Version 11.x Mögliche Werte Beschreibung Einsatzgebiet [yes|no] Definiert, ob die Auswahlbox für das Layout im Bildelement angeboten wird picture.standard.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Aktivert die
Projektumstieg: Neue Projektgrundlage für bestehende Projekte nutzen
/ Updater" Werkzeugs. Schritt 1: Entwicklungsumgebung schaffen Schritt 2: Kundenprojekt anlegen Schritt 3: Gesamtes Layout-Projekt neu installieren Schritt 4: Installieren benötigter Weblics® / Templates nachrüsten Schritt 5: Layout
Links / Querverweise über Lightbox
-Template. In der BASE werden jeweils die aktuellsten getesteten Skriptdateien mitgeliefert. Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php ... <!-- HTML-Header --> name= " htmlHeader "> ...
Inhalt des Dateiexplorers beeinflussen
des Projektes /base ein zusätzlicher Bereich mit der URL zu einem Produktshop eingeblendet. Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/fileselector/default.wFileselector.php <?php $version="1.0"; $encoding="UTF-8"; ?>
Darstellungsvarianten von Slidern
von Slidern gestalten Sie in Weblication® ab BASE-Version 2 vollständig über CSS-Varianten. Redakteure können die Layout-Varianten in der Konfiguration ganz einfach wie gewohnt auswählen. Beispiel: Darstellung von Slidern
Darstellungsvarianten von Bildergalerien
Sie in Weblication® ab BASE-Version 2 vollständig über CSS-Varianten gestalten. Und auch hier können Redakteure die Layout-Varianten in der Konfiguration ganz einfach auswählen. Beispiel: Darstellung von Bildergalerien Darstellungsbeispiele
Darstellungsvarianten von Boxen
Weblication® können Weblics® so auch Boxen vollständig über CSS-Varianten gestaltet werden. Redakteure können die Layout-Varianten in der Konfiguration ganz einfach wie gewohnt auswählen. Beispiel: Darstellung von Boxen Box-Varianten:
Bereich mit wechselbarem Bild umsetzen
, searchbox , etc.) einen Templateaufruf auf Ihr individuelles Template (z.B. headerBild ). <!-- Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/standard.wDocument.php --> ... <!-- Headerbild --> name= " headerBild "
Navigationsbeispiel: Hauptnavigation getrennt mit Logo mittig
Einsatz von Dekoratoren / Effekten. Gehen Sie ausgehend von einer aktuellen BASE Projektbasis wie folgt vor: Schritt 1: Layout anpassen - Darstellung des Kopfbereichs anpassen Rufen Sie über das Weblication® Panel den Layoutwizard auf
Logo sprachabhängig ausgeben
der Projektsprache ein anders Logo (z.B. wegen anderem Schriftzug/Text) einbinden können. Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/globals/logo.wGlobal.php <?php $version="1.0"; $encoding="UTF-8"; ?> <?php
Der neue Layout-Wizard in Weblication Version 10
kommende Version 10 wurde der Layout-Wizard überarbeitet. Neben der Definition von neuen CSS-Only Varianten können Sie auch verschiedene
Google Fonts bei Github laden und lokal einbinden
Verfügung. Nur sichtbar für die Gruppen: 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
Formatierung der Druckansicht beeinflussen
und übersteuert somit die dort hinterlegte Schriftfarbe. Beispiel: Inhalt des Ausgabetemplates /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/print.wDocument.php <?php $version="1.0"; $encoding="UTF-8"; ?> <?php exit;
wProject::getPathLayout
verwendet. Funktionsaufruf String getPathLayout(String project) Parameter project Projektpfad Beispiel: Ausgabe des Layout-Pfades des angegebenen Projektes Quelltext <?php $wPathLayoutProject = wProject :: getPathLayout ( "/dev" ); print
So schreiben Sie Hintergrundbilder der Navigation in eine CSS-Datei
wird. Die Pfade und CSS-Klassen passen Sie Ihrem Projekt entsprechend an. Beispiel: Auszug aus /deGlobal/wGlobal/layout/editor/navigation/attributes.wEditorNavpoint.php <?php $version="1.0"; $encoding="UTF-8"; ?> <?php exit; ?>
So schreiben Sie Hintergrundbilder sprachabhängig über CSS
bereits definiert und muss ggf. nur noch einkommentiert werden ( wLanguageProject ). Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php mit wLanguageProject ... name= " wLanguageProject ">
Einfügen von Struktur-Elementen einschränken bzw. erlauben
zu BASE (Mobile First) Beispiele zu BASE Classic Beispiele zu BASE (Mobile First) Beispiel 1.1: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/globals/content.wGlobal.php zu content5 (Standard-Auslieferung) ... <!-- Hier
Menünavigation (Toggler) seitlich oder von oben einfahren
2020 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Die Menünavigation (Toggler-Navigation) kann über den Layoutwizard hinsichtlich des Einfahr-Verhaltens eingestellt werden. Kopfbereich - Menünavigation Öffnen Sie hierzu über das
XSL-Stylesheets für Strukturelemente
werden pro Element in einer eigenen Datei abgespeichert. Diese liegen in folgendem Verzeichnis ab: /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/items/*.wItem.php Ein solches XSL-Stylesheet besteht aus XSL- und HTML-Code und
RSS: Weblication® Mobile First Changelogs Version 18
23.04.2024 17:15 BASE für Version 18: Bildergalerie 1.0.157: Neue Darstellungsvarianten verfügbar: Collage - Grid Layout 1 (3x3) und Collage - Grid Layout 2 (3x2) 23.04.2024 11:24 BASE für Version 18: Liste 1.0.216: Die
Wie blendet man CSS-Variablen in der Maske aus?
aus? Veröffentlichungsdatum: 12. September 2023 Projektgrundlage: BASE Um CSS-Variablen in Konfigurationsmasken zum Layout auszublenden, stehen showIf-Abfragen zur Verfügung. Über folgende Anweisung wird z.B. in der colors.scss (Farben) die
Einsatz von Isotope Darstellungen für Bildergalerien
kategorien-filter Unterschiedliche Möglichkeiten, um Bildergalerien in Isotope oder ähnlichen Mauerwerk Layouts darzustellen. Zur Vielfalt an unterschiedlichen Bildergalerien innerhalb von Weblication® CMS Projekten, können Sie
Scroll-Fortschritt im Kopfbereich anzeigen
kann an beliebiger Stelle eingebunden werden. Neben dem Body z.B. auch im Kopfbereich, wodurch je nach Layout beim hochgeschobenen Kopfbereich nur noch genau der Scrollbalken sichtbar bleibt. Scroll-Fortschritt im Kopfbereich
Pflegemasken für Metadaten aus der Dokumentenerweiterung
durch ein eigenständiges XSLT-Stylesheet erzeugt. Dieses Stylesheet liegt in der BASE unterhalb folgendem Pfad: /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/editmasks/standard.metadata.php Dieses Stylesheet wird im XSL-Darstellungstemplate
HTML Meta-Daten setzen und pflegen
diese Angaben im htmlHead -Template, welches über ein separates XSL-Template abgelegt ist. Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/standard.wDocument.php zum Head ... ... <!-- Definition der Darstellung -->
Grundlagen - BASE Classic - Weblication® Projektbasis
Klassische, universelle Projektvorlage mit einer Vielzahl an vorgefertigten Elementen, Anwendungen und Style-Vorlagen. Enthält Wizards und Masken zur Layoutanpassung.
Manuelles Nachrüsten der 16er Statistik in älteren Projekten (z.B. BASE Classic)
Anpassungen in der design.js Weiterführende Links Ablage der erforderlichen Skripte (wa.js, wa.php) /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/scripts/wa.js /[IHR-LAYOUT-PROJEKT]/wGlobal/scripts/php/wa.php Diese Skripte finden Sie in
Link-Icons (SVG) individualisieren
.isDarkBackground .isInverseBackground { a. intern: before { background-image: url ("# {$wGlobalProjectPath} /wGlobal/layout/images/links/intern.svg?stroke=# {$colorLinkIcon} ") } a. extern: before { background-image: url ("#
Weblics® 2.x in BASE 1.x nutzen
Unterstützung von Responsive Webdesign im Basisprojekt und Weblics® Erweiterte und vereinfachte Funktionen für die Layoutumsetzung (Layoutwizard) Optimierte Bildbreitenberechnung (CSS-Picture-Rendering) Verbesserte Updatefähigkeit und beschleunigte
Änderungen in Weblication® CMS Core/GRID
Redakteur bereits während der Bearbeitung, ob die verlinkten Seiten existieren. 008.001.009.000 14.11.2013 Neue Grund-Layouts auswählbar, um den vorangestellten Bereich z.B. auf 100% Breite anzuzeigen. 008.001.008.000 13.11.2013 Über
wPageCur::registerJs
die JS-Datei für Ihre Anwendung (über XSL eingebunden) select= " php:functionString('wPageCur::registerJs', '/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/scripts/items/IhreAnwendung.js') "/> Registriert die JS-Datei für Ihre Anwendung (über PHP
Festlegen des darzustellenden Bildausschnittes und verschiedene Seitenverhältnisse
Mit aktueller BASE liegt hierfür eine eigene Maske für die Pflege bzw. Auswahl der Seitenverhältnisse ab: /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/editor/picture/standard.wPictureCutArea.php Diese wird für die Bearbeitung des
wPageCur::registerCss
die CSS-Datei für Ihre Anwendung (über XSL eingebunden) select= " php:functionString('wPageCur::registerCss', '/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/items/IhreAnwendung.css') "/> Registriert eingebettete Style-Angaben im Head-Bereich
Änderungen in Weblication® CMS Core/GRID
Funktion wForm::getMailDataStr unterstützt nun die Option projectCSS, um die im Projekt abliegende wGlobal/layout/styles/mail/default.css für die Formatierung von HTML E-Mails zu nutzen. 012.005.025.000 24.10.2017 Die PHP-Framework
JavaScript Dateien im HTML-Head einbinden
um eigene HTML-Skripte ergänzen, können Sie das in folgendem Template vornehmen: /[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/globals/htmlHead.wGlobal.php Einbinden von HTML-Skripten Verfügen Sie bereits über ein HTML-Snippet ist es
Facebook-Pixel im Projekt nutzen
im Head der Seiten für Seitenbesucher eingebunden wird. Beispiel: Auszug aus /[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/globals/htmlHead.wGlobal.php ... name= " htmlHead "> ... ... <!-- Falls das Facebook Pixel aktiviert
Facebook Teilen-Funktion
Über die Konfiguration des Elementes können Sie optional auch den Titel-Text des Buttons definieren, sowie das Layout des Buttons bestimmen. Social Button für Facebook Social Button für Facebook - Link zum Teilen 1.3 Veröffentlichen
CSS-Only: Individuelle Layouts rein über CSS
8 bietet mit CSS-Only eine grundlegend neue Technologie . Mit CSS-Only erstellen Sie rein über CSS individuelle Layouts , individuell gestalteter Anwendungen, Logik sowie responsive Designs. Ihre Vorteile: Sie können beliebig individuell
Aufbau eines Weblication® Projektes
etc.). Parallel zu diesen Sprachverzeichnissen werden zwei weitere Verzeichnisse abgelegt, das Global-Verzeichnis (Layout) sowie das Assets-Verzeichnis (Bilder, Media-Dateien, ...): Das Global-Verzeichnis beinhaltet sämtliche
SEO: Optimierte Eingabe von Titel / Beschreibung
Metadaten-Maske zum Pflegetag des Titels und der Beschreibung um das optimizer -Attribut: Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/editmasks/standard.metadata.php ... class= " wEditorExtensionLabel "> select= "
Die Definition der Dateiauswahlmaske kann nun im Projekt unter /wGlobal/layout/fileselector/default.wFileselector.php geschehen.
nun im Projekt unter
So greifen Sie über XSLT auf CSS-Daten zu: select="php:functionString('wCSS::getValue', '/wGlobalProject/wGlobal/layout/styles/design.css', '#blockContentStart .col1_100', '(int)width')"
'/wGlobalProject/wGlobal/layout/styles/design.css',
Die Darstellung des aktuellen Strukturelementes kann aus dem Struktureditor heraus angepasst werden, wenn im web:item:start der Pfad angegeben ist. (pathEdit="/wGlobalProject/wGlobal/layout/templates/items/xyz.wItem.php")
heraus angepasst werden, wenn im web:item:start der Pfad angegeben ist. (pathEdit="/wGlobalProject/wGlobal/layout/templates/items/xyz.wItem.php")