Sektionen
Benutzerspezifische Werkzeuge
Sie sind hier: Startseite Community Vorträge So leicht Theming in Plone So leicht ist Theming in Plone

So leicht ist Theming in Plone

Content Management Systeme sind toll!

 

vor allem Plone ;)

Content Management Systeme sind toll!

 

Aber es kann viel Arbeit machen,
sie auch toll aussehen zu lassen!

Das Problem

 

Content Management Systeme sind viel komplexer als statische HTML-Seiten.

Die Lösung

 

Trennung von Design (Theme) und Content Management System

Diazo

 

Diazo structure

Das Theme

Statisches Theme

 

Rein statisches HTML, CSS, JS

Statisches HTML + CSS + JS

.
├── article.html
├── images
│   ├── icon-home.gif
│   ├── icon-mail.gif
│   ├── input-bg.gif
│   ├── link1-bg.gif
│   ├── logo.jpg
│   ├── main-bg.jpg
├── index.html
├── manifest.cfg
├── rules.xml
└── style.css

Das Content Management System Plone

plone-unstyled.png

Diazo - Content + Theme

Diazo Zusammenführung - Ausgangspunkt

Diazo - Zusammenführung: Navigation

diazo01.png

<replace css:content='#portal-globalnav li'
css:theme-children='.site-nav' />

Diazo - Zusammenführung: Inhalt

diazo02.png

<replace css:content-children="#content"
css:theme-children=".col-1 .section" />

 

Diazo - Zusammenführung: News-Portlet

diazo03.png

<replace css:content='dl.portlet.portletNews'
css:theme='.col-2 .section' />

Diazo - Resultat

plone-styled.png

Diazo rules.xml - Grundgerüst

<?xml version="1.0" encoding="UTF-8"?>
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

[...]

</rules>

Diazo rules.xml - Definitionen

  <rules css:if-content="#visual-portal-wrapper">

<after
content="/html/head/script" theme-children="/html/head" />

<replace css:content='#portal-globalnav li'
css:theme-children='.site-nav' />
<replace css:content-children="#content"
css:theme-children=".col-1 .section" />
<replace css:content='dl.portlet.portletNews'
css:theme='.col-2 .section' />

</rules>

Theme Datei definieren

 

<rules css:if-content="#visual-portal-wrapper">    
<theme href="index.html"
css:if-content="body.section-front-page" />
<theme href="index.html"
css:if-content="body.portaltype-plone-site" />
<theme href="article.html" />

<notheme css:if-content="body.rawpage" />
</rules>

Replace - Rule

 

<replace css:theme="title" css:content="title"/>

<replace css:content-children="#portal-colophon"
css:theme-children="#footer .indent" />

Before & After - Rules

 

<before css:content='#portal-breadcrumbs' 
css:theme-children='.wrapper' />

<after
content="/html/head/script"
theme-children="/html/head"
/>

Copy - Rule

 

<copy attributes="id dir" css:content="body" 
css:theme="body" />

Drop - Rule

 

<drop theme="/html/head/script" />
<drop content="/html/head/link" />

Merge - Rule

 

<merge attributes="class" css:content="body" 
css:theme="body" />

if-path - Attribute

 

<replace css:content-children="#content" 
css:theme-children="#content"
if-path="/site/news" />

if-content - Attribute

 

<replace css:content-children="#content" 
css:theme-children="#content"
css:if-content="body.section-news" />

Dokumentation

  • http://pypi.python.org/pypi/plone.app.theming
  • http://diazo.org
  • http://plone.org

Vielen Dank

 

 

Fragen?