Plone 4 Theming

Na installatie van Plone 4, is het tijd om een demosite te bekijken. Na deze opgestart te hebben zie je een complete nieuwe layout. Uit de skin_properties in ZMI blijkt dat er 3 themes zijn geinstalleerd:

• Plone Default Theme: is een kale theme zonder opmaak, waarin alle templates en views zijn gedefinieerd. De main_template gebruikt een tabel voor de content (Table layout).
• Sunburst Theme: is de standaard theme in Plone 4. Sunburst heeft als basis theme Plone Default. Om een tableless layout te gebruiken heeft Sunburst de main_template overschreven.
• Plone Classic Theme: wordt als standaard theme gebruikt in de vorige versie: Plone 3. De Classic Theme heeft als basis Plone Default Theme.

Voor de ontwikkeling van een eigen theme raad ik aan om uit te gaan van de Plone Default Theme en niet de Sunburst Theme. Sunburst Theme maakt namelijk gebruik van Plone Default theme. Neem je Sunburst als uitgangspunt, dan ontwikkel je op 3 lagen ipv 1 (Default Theme bevat alleen de templates). Hoe minder je hoeft te overschrijven hoe beter. Het houdt de code schoon en overzichtelijk. Wil je onderdelen van Sunburst gebruiken, plaats het in je eigen theme.

Skins folder is gereorganiseerd

In de skin_properties van ZMI zie je dat de CSS bestanden in de "plone_styles" map, leeg zijn. De standaard Plone Theme is hierdoor behoorlijk opgeschoond. Het base_properties bestand bestaat niet meer. Hierin stonden DTML variabelen gedefinieerd. Deze worden niet meer in Plone 4 gebruikt.

Zelf de CMS layout stylen?

Nu er geen CSS wordt geleverd, brengt het voor je eigen theme meer vrijheden, maar ook meer werk met zich mee. Wil je je CMS layout integreren met je Publieke theme? Dan zul je zelf de CSS moeten schrijven voor de CMS onderdelen. Je kan CSS van Sunburst of Classic theme kopieren naar je eigen theme. Let op dat de DTML die je uit Classic Theme kopieert wordt vervangen door CSS.

Andere optie is om de CMS layout te scheiden van de Publieke layout door SkinSwitcher te gebruiken. Hiermee kun je bijv. Plone Classic Theme als standaard theme voor je CMS instellen.

Viewlets zijn gereorganiseerd

Voor het reorganiseren van viewlets overschrijf je de viewlets.xml. Er zijn een paar wijzigingen in de structuur van de viewlets. Vergelijk een Plone 3 site met Plone 4 door de http://localhost:8080/name-site/@@manage-viewlets pagina te bekijken:

• Site_actions viewlet is verplaatst naar plone.portal.footer.
• Plone_personal_bar_viewlet valt nu onder plone.portalheader
• Plone_path_bar (breadcrumbs) is toegevoegd aan de ViewletManager plone.abovecontent.
• Related items is als viewlet opgenomen in de plone.belowcontentbody ViewletManager. In Plone 3 waren related items als macro opgenomen in de content templates.
  

Main template styling

In Plone 4 wordt voor Plone Default Theme nog steeds de Tabel-template gebruikt. Wil je een tabeless layout? Overschrijf de main_template.pt met je eigen code, of neem de code van Sunburst theme over. Verder is de html code voor de main_template.pt opgeschoond. Voor het definieren van slots werden div-tags gebruikt, dit veroorzaakte onnodige divs:

<div id="content">
 <div>content</div>
</div>

Deze zijn vervangen door:

<metal:zinnige-naam fill-slot="">
 content
</metal:zinnigenaam>

Wanneer je zelf slots wilt overschrijven of maken, gebruik dan de laatste manier. Zo blijft de genereerde html code vrij van onnodige div-tags. Verder zijn de id/classes opgeschoond voor het definieren van de content-divs. In Plone 3 had je 2 ID's en 1 class voor hetzelfde onderdeel:

• #content
• #region-content
• .documentContent

Dit is nu 1 ID geworden: #content. Houdt hier rekening mee wanneer je gaat migreren van Plone 3 naar Plone 4. Mocht je CSS hebben gedefinieerd op .documentContent of #region-content, wijzig deze dan in #content.

Templates overschrijven

In Plone 4 zijn de templates eenvoudiger gemaakt. Alle hoofdonderdelen zijn opgenomen in de main_template.pt. De titel en de omschrijving van content types zijn als aparte slots in de main_template opgenomen. (Klik op de afbeelding voor een vergroting)

De template van bijvoorbeeld de document_view.pt bestaat nu alleen uit de volgende code:

<metal:content-core fill-slot="content-core">
 <metal:content-core define-macro="content-core">
 <metal:field use-macro="python:context.widget('text', mode='view')">
 Body text
 </metal:field>
 </metal:content-core>
</metal:content-core>

Linker-, rechterkolom deactiveren

Het activeren/deactiveren van de linker- of rechterkolom gaat in Plone 4 anders dan in Plone 3. In bijv. de zoekresultaten (search.pt) staat standaard de linker- en rechterkolom uit. Dit werd in Plone 3 op de volgende manier geregeld:

<metal:left fill-slot="column_one_slot" />
<metal:right fill-slot="column_two_slot" />

In Plone 4 is dit veranderd en wordt de REQUEST variabele gebruikt. Deze variabele werd al in Plone 3 gebruikt voor het wel/niet tonen van de edit-border en op andere plekken. Het activeren/deactiveren van de kolommen gebeurt nu als volgt:

<metal:block fill-slot="top_slot"
  tal:define="disable_column_one python:request.set('disable_plone.leftcolumn',1);
    disable_column_two python:request.set('disable_plone.rightcolumn',1);" />

Verander de 1 naar 0 en de kolommen worden getoond.

Dit is wat ik tot zover zelf heb gevonden in Plone 4. In de loop van het gebruik van Plone 4 en migratie naar Plone 4 zal ik mijn bevindingen posten.