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
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
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
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 ">
wWeblic::renderItemStr
[|Array] Weitere einzubindende Templates können als Array übergeben werden. pathProjectLayout Pfad des Layout-Projektes uid UID, falls diese nicht automatisch generiert werden soll Beispiele: Beispiele: Beispiel 1: Innerhalb
-w-editmaskExtended-class
Definiert, ob das Eingabefeld für die Angabe einer CSS-Klasse angeboten wird container.box.wItem.php container.layout.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Gibt für den Layout-Container Variante 51 die Möglichkeit für die
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 -->
-w-editmaskExtended-id
Einsatzgebiet [yes|no] Definiert, ob ein Eingabefeld für ein Individualformat (CSS id) angeboten wird container.layout.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Aktiviert das Eingabefeld zur Bearbeitung der ID-Bezeichnung zum
So setzen Sie ein Element mit unterschiedlichen Darstellungsarten um
Hintergrundbild, einen Rahmen oder dergleichen für die Ausgabe definieren. Beispiel: Inhalt der /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/items/container.box.wItem.php <?php $version="1.0"; $encoding="UTF-8"; ?>
templatesIncludeItems
Gruppe mit den einzubindenden Elementen [XPATH] xPath xPath der einzubindenden Elementen Beispiel 1: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/mastertemplates/standard.wMastertemplate.php ... name= " content1 "> <!-- Item wird innerhalb
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
Ä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
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
Akkordeon Container über wWeblic::renderItemStr zusammenbauen - Beispiel kann im Objekt-Wizard für die Seitendarstellung verwendet werden.
; print wWeblic :: renderItemStr ( $xmlStr , array( 'includeItemsProject' => true , 'pathProjectLayout' => '/[IHR-LAYOUT-PROJEKT]' )); Weiterführende
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
moverListEntry
die Berechtigung an der aktuellen Seite besteht. Mögliche Werte sind: self, entry, allways Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/lists/default.wFilelist.php ... (Platzierung z.B. im Bereich der Editbuttons, siehe
includeJsRessources
Projektkonfiguration ein ... select= " php:functionString('wPageCur::registerJs', concat($wGlobalProjectPath, '/wGlobal/layout/scripts/items/jquery.js')) "/> ... <!-- aktuelle Auslieferung über die includes.global.php der BASE Classic
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")
Weblication® Entwicklerbereich
alle aktiven Cronjobs auszuführen. 07 November BASE für Version 20: Liste 1.0.374: Für Box-Darstellungen über den Layout-Wizard lassen sich nun Formen als CSS-Only Untervarianten auswählen. 07 November Changelog Version: 020.002.014.000 In
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.
wXSLT::processString
); $xsltString = wReadWrite :: readFile ( $_SERVER [ 'DOCUMENT_ROOT' ]. '/devGlobal/wGlobal/layout/templates/rss.wDocument.php' ); print wXSLT :: processString ( $rssString , $xsltString ); ?> Beispiel: Beispiel
wUserCur::getAlertsJs
::getAlertsJs Zeigt dem aktuellen Benutzer die noch nicht angezeigten Meldungen Funktionsaufruf Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/scripts/pre.php // ... // Hier wird die Seite ausgegeben $alertsJS = '' ; if( method_exists (
Mehrspaltige Seitenlayouts extrem einfach umsetzen
Zahlreiche Werkzeuge in Weblication® CMS vereinfachen das Erstellen mehrspaltiger Seitenlayouts.
Layout und Templates in Rekordzeit erstellen
CSS-Code vor. 3. HTML / CSS bearbeiten: Diese HTML- und CSS-Codes stellen Sie im Quellcode fertig. Sie erstellen Ihr Layout direkt in der Website über das Admin-Panel. Dabei beschleunigen die integrierten Weblication®-Entwickler-Werkzeuge
Version 8: So einfach installieren Sie Layout-Varianten
Sie Layout-Varianten 11. Apr 2013 Rufen Sie "Layout anpassen" im Bedien-Panel auf und wählen Sie den Reiter "Weblic Layout-Varianten" aus. Wählen Sie danach das Weblic® aus und installieren Sie die gewünschte CSS Layout-Variante. Bereits
Layout Beispiele aus Weblication® coredemo.de in eigene Projekte übernehmen
Weblication® coredemo.de in eigene Projekte übernehmen 25. Sep 2025 Unter https://coredemo.de finden Sie zahlreiche Layout Beispiele, die Sie in eigenen Projekten verwenden können. Voraussetzung: Weblication® ab Version 18 mit aktueller
Single Page Layout mit Weblication®
Nov 2013 Mit dem neuen Single Page Weblic® oder der aktuellen BASE lassen sich einzelne Seiten parallel zum gewählten Layout als Single Page darstellen. Das Single Page Weblic® beinhaltet die notwendigen Strukturelemente und CSS-Definitionen.
Newsletter Layout | Weblication CMS Onlinedokumentation
First) BASE Classic BASE (Mobile First) Auszug aus dem Newsletter Seiten-Template /[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/newsletter/standard.wDocument.php <?php $version="1.0"; $encoding="UTF-8"; ?> <?php exit; ?>
Layout vorbereiten und konfigurieren | Weblication CMS Onlinedokumentation
Über das Weblication® Panel steht Ihnen als Administrator in der BASE der Bereich zum Anpassen und Vorbereiten des Layouts zur Verfügung (Layoutwizard). Zu Projektbeginn können Sie hier von den standardmäßig bereits mitgelieferten
Web Fonts einbinden über die Weblication Benutzeroberfläche
02. Mai 2013 In Weblication nutzen Sie beliebige Web Fonts . Diese können Sie ganz einfach über den Layout-Wizard einbinden. ( Über den Layout-Wizard: Dieser bereitet projektspezifisch CSS, JavaScript und HTML-Templates vor,
Web-Projekte mit individuellen Layouts extrem schnell umsetzen
und individuelle Templates erstellen Sie völlig ohne Programmierung per Drag&Drop. Trennung von Inhalt, Layout und Logik Inhalte in XML Das neue Weblication® CMS speichert Inhalte im W3C-konformen XML-Format. Diese Inhalte