CSS Styleanpassungen
Ab Release 5.20 kann unter dem Reiter "Siteedit Ansicht-CSS" in der Seitentemplate-Verwaltung CSS hinterlegt werden, das nur im Site-Edit Modus gerendert wird.
Die Site-Edit Technologie erfordert es, im Bearbeiten-Modus Änderungen am DOM vorzunehmen. Dies betrifft auch die Definition von CSS-Styles, speziell wenn CSS-Styles von Elementen über Kombinatoren basierend auf der ID eines Layoutbereichs vergeben werden. Diese technisch notwendigen DOM-Erweiterungen sind in den CSS-Definitionen für eine contentXXL Webseite zu berücksichtigen, damit das Look & Feel im Site-Edit Modus nicht zerstört wird.
Seitentemplate – Layoutbereiche
Sobald eine Seite im Rahmen des Site-Edit Modus bearbeitbar wird, ändert sich die DOM-Struktur von Layout-Bereichen (contentpane, navigationpane, etc.). Dies ist notwendig, um für die Drag & Drop-Funktionalität entsprechende Drop-Zonen verfügbar zu haben.
Die DOM-Anpassung erfolgt nur in Layout-Bereichen, die im TabLayout-Seitentemplate die CSS-Klasse „LayoutZoneAny“ zugewiesen haben. Dies sind die Bereiche, die im Layout-Reiter innerhalb der Seiteneinstellungen für Drag & Drop aktiviert sind.
contentXXL fügt als erstes Element in dem Layoutbereich ein DIV ein, dem die CSS-Klasse „RadDockZone“ zugewiesen ist.
Für einen Eintrag im Seitentemplate:
<div runat=“server“ id=“contentpane“ class="main-content" ></div>
wird als HTML-Output folgende Struktur erzeugt:
<div id="ctl01_contentpane" class="main-content" >
<div id="ctl01_radDockZone_contentpane" class="RadDockZone RadDockZone_ rdVertical"
dockzoneid="contentpane" >
[Hier werden die Module des contentPane ausgegeben]
</div>
</div>
Modullayouts
Um Module per Drag & Drop verschiebbar zu machen, ändert sich die DOM-Struktur eines Moduls. Um den gesamten Modulcontent wird sowohl ein DIV als auch eine Tabellenstruktur aufgebaut.
Der ursprüngliche HTML-Output eines Moduls ([HTML Modul Output]) wird in folgende HTML-Struktur geschachtelt:
<div id="mod_378fbfeda1ba7a4c6cab6b6af7ed5211824a91" class="RadDock RadDock_None" >
<table class="rdTable">
<tbody><tr class="rdTop rdNone">
<td class="rdLeft" unselectable="on"> </td>
<td class="rdCenter"></td>
<td class="rdRight" unselectable="on"> </td>
</tr>
<tr class="rdMiddle">
<td class="rdLeft" unselectable="on"> </td>
<td class="rdCenter" style="height: auto;">
<div id="mod_378fbfeda1ba7a4c6cab6b6af7ed5211824a91_C" class="rdContent" style="overflow: hidden; width: 100%;">
[HTML Modul Output]
</div>
</td>
<td class="rdRight" unselectable="on"> </td>
</tr>
<tr class="rdBottom">
<td class="rdLeft" unselectable="on"> </td>
<td class="rdCenter" unselectable="on"> </td>
<td class="rdRight" unselectable="on"> </td>
</tr>
</tbody>
</table>
</div>
Das bedeutet, dass sämtliche CSS-Styles, die für die normale Webansicht in der Form
#main-content .myClassDefinition {color: #ff0000 ;}
definiert sind, für die Site-Edit Variante auch noch in der folgenden Form deklariert sein müssen:
#main-content div.RadDockZone div.RadDock table.rdTable td.rdCenter div.rdContent .myClassDefinition { color: #ff0000;}