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">&nbsp;</td>
                                   <td class="rdCenter"></td>
                                   <td class="rdRight" unselectable="on">&nbsp;</td>
                        </tr>
                        <tr class="rdMiddle">
                                   <td class="rdLeft" unselectable="on">&nbsp;</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">&nbsp;</td>
            </tr>
            <tr class="rdBottom">
                        <td class="rdLeft" unselectable="on">&nbsp;</td>
                        <td class="rdCenter" unselectable="on">&nbsp;</td>
                        <td class="rdRight" unselectable="on">&nbsp;</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;}

CSS Styleanpassungen