Volltextsuche
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 {
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
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
-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
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
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 "> ...
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
Projektumstieg von BASE Classic auf BASE (Mobile First)
ist. Das Vorgehen wie nachfolgend beschrieben hat dennoch seine Gültigkeit, wenn Sie z.B. auf das Werkzeug "Gesamtes Layoutprojekt neu installieren" verzichten wollen. Um die Inhalte eines bestehenden BASE Classic 2.x Projektes in ein BASE (Mobile
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"; ?>
wWeblic::renderItemData
headline.standard, falls die Funktion innerhalb einer Seite ausgeführt wird oder andernfalls /wGlobalProject/wGlobal/layout/templates/items/headline.standard.wItem.php data Daten, wie Sie in Seiten über wd:fragment-Elemente übergeben werden.
So nutzen Sie in der Dateiauswahl eigene Auswahlmasken
die eigene Auswahlmaske geladen, die eine Auswahl der dort definierten Links ermöglicht. Beispiel: Inhalt der /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/fileselector/default.wFileselector.php mit wURLs-Block <?php $version="1.0";
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 "
Listen
Verhalten der Liste steuern: XML-Code eines Listenelements name= " Liste " en:name= " List " icon= " /deGlobal/wGlobal/layout/images/element-icons/element_list.gif " type= " list.standard "> id= " listtemplate " type= " src.file ">
Listen
die das Verhalten der Liste steuern: XML-Code eines Listenelements name= " Liste " en:name= " List " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_list.gif " type= " list.standard "> id= " listtemplate " type=
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
So verwenden Sie eine globale Variable zur Steuerung der Ausgabe
Benennen Sie über die standard.wParams.php die globale Variable (z.B. designSwitcher ). Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php <?php $version="1.0"; $encoding="UTF-8"; ?> <?php
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
Google Fonts bei Github laden und lokal einbinden
stellt Google verschiedene Schriftarten zur Verfügung. 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;
wProjectCur::getPathLayout
Funktionsaufruf String getPathLayout() Parameter Diese Funktion benötigt keine Parameter. Beispiel: Ausgabe des Layout-Pfades des aktuellen Projektes Quelltext <?php $wPathLayoutProject = wProjectCur :: getPathLayout (); print
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
Das wGlobal Verzeichnis - Anpassungen für Ihr Projekt
Editoreinstellungen für die Bearbeitung von Navigationen, Links, Bildern, Tabellen und den WYSIWYG-Editor Zentrale Layout-Bilddateien (Hintergrundbilder, Icons, etc) CSS-Stylesheets Script-Definitionen (Javascript-Libraries) XSL-Stylesheets
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
Globale Projekteinstellungen
möchten oder nicht. Variablen stehen Ihnen nur im globalen Projekt, nicht in Sprachprojekten zur Verfügung Globale Layouteinstellungen In der Regel haben alle in einem Projekt vorhandenen Sprachprojekte ein einheitliches Layout und greifen auf diesselben
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; ?>
wList::createList
$listParameters = array(); $listParameters [ 'dir' ] = '/dev/dokumentationen/framework/klassen' ; $listParameters [ 'layout' ] = '7dev' ; $template = '/devGlobal/wGlobal/layout/templates/lists/default.wFilelist.php' ; print wList :: createList (
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 ">
Elemente des Mastertemplates bedingt zur Auswahl anbieten
wEnv::getGlobalValue('wEditorPath'))){ name= " Überschrift " en:name= " Headline " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_headline.gif " type= " headline.text "> id= " title " type= "
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
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
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
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
Unterschiedliche CSS-Definitionen, z.B. zu Farben, in Projekten nutzen
design_varXXX.css tragen (XXX steht für die entsprechende Benennung). Beispielpfade: [IHR-GLOBALES-PROJEKT]/wGlobal/layout/styles/design_var2.css [IHR-GLOBALES-PROJEKT]/wGlobal/layout/styles/design_varABC.css Beispiel 1: Unterschiedliche
Hintergrundbilder dynamisch anzeigen
anzeigen Veröffentlichungsdatum: 07. Dezember 2022 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Über den Layout-Wizard können Sie ein Hintergrundbild der Seite definieren. Soll nicht immer das gleiche Bild erscheinen und auch
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
-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
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 -->
BASE (Mobile First): Responsive Bilder
Bedeutung haben sie? Wann werden die Werte aus dem Raster in der breakpoint.scss eingesetzt? Maßnahmen zu CLS (Content Layout Shifting) Problemlösungen bei falscher Bildbreitenberechnung Wann und wie werden die Bilder gerendert Grundlage für
So geben Sie Listeninhalte in der Navigation aus
method= " xml " indent= " no " omit-xml-declaration="yes" encoding= " UTF-8 "/> href= " $XSLTPRE[wDocumentRoot]/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php "/> href= "
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.
-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
Systemparameter bei der XSL-Transformation
aus der standard.wDocument.php) ... <!-- System-Parameter einbinden --> href= " $XSLTPRE[wDocumentRoot]/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php " wd:pathTemplate= " misc/includes.global.php "/> ...
Das HTML Seiten-Template (standard.wDocument.php)
zurückgegriffen, das HTML Seiten-Template standard.wDocument.php . Pfad des Standard-XSL-Stylesheets: /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/standard.wDocument.php Die Zuweisung des Stylesheets wird im wd:extension-Bereich