So beeinflussen Sie die Formatierung in der Bearbeitung
Veröffentlichungsdatum: 05. Juli 2010
Änderungsdatum: 13. September 2013
formatierung bearbeitung css editor
Dieser Artikel beschreibt, wie Sie Formatierungen in der Dateibearbeitung beeinflussen können, um z.B. Positionierungen anders vorzunehmen, Hintergrundfarben, etc. anders zu setzen.
Innerhalb der Seitenbearbeitung nutzt das Beispielprojekt im Editor zusätzlich eine editor.css, über die die Formatierung im Editiermodus beeinflusst werden kann. So haben Sie z.B. die Möglichkeit, Elemente anders zu positionieren, weil diese - im Gegensatz zur Präsenzansicht - Bearbeiten-Elemente überlagern. Oder Sie können darüber z.B. die Hintergrundfarbe, etc. beeinflussen.
Nachfolgend ein Beispiel, anhand dessen ersichtlich ist, wie über das XSL-Template (includes.global.php), das über das Standard-Ausgabetemplate angesprochen wird, die editor.css referenziert wird. Im Auszug der editor.css ist im Beispiel dann ersichtlich, wie bestimmte Elemente über die entsprechende Klassenangabe beeinflusst werden. Im Frontend (Browseraufruf) werden diese Elemente z.B. über einen z-index weit vorne positioniert. Im Editor hingegen wird dieser z-index so beeinflusst, dass diese Elemente andere Elemente in der Bearbeitung nicht mehr überlagern.
Beispiel: Auszug aus includes.global.php
... <xsl:if test="$wIsInEditor"><link rel="stylesheet" type="text/css" href="/deGlobal/wGlobal/layout/styles/editor.css"/></xsl:if> ...
Beispiel: Auszug aus der editor.css eines Projektes
/* Formatierungen, die im Editor anders definiert sein sollen */ #blockTop {} #banner {display:block;position:absolute;z-index:-100;margin:40px 0 0 466px} #navigationTop {position:absolute;z-index:-140;margin:330px 0 0 40px;} /* Ende Editor */