Eine der schwierigsten hinzubekommenden Sachen ist regelmäßig die Navigation. Es ist eine schon ziemlich komplexe Struktur,  insbesondere wenn Sie unterschiedliche Stile für unterschiedliche Ebenen wollen — zum Beispiel verschiedene Farben für die zweite und dritte Ebene der Navigation. Glücklicher Weise gibt Ihnen Plone eine ganze Menge CSS-Klassen, in denen Sie sich einklinken können. Und mein bester Ratschlag ist, wenn Sie Ihr eigenes Vorhaben umsetzen, äußerst gewissenhaft den DOM-Inspektor zu benutzen um herauszufinden, welche Klassen Sie manipulieren müssen.

Wir wählen für Demonstrationszwecke einen einfacheren Stil.

Zunächst etwas grundlegende Stilsetzungen für portlet/breadcrumb — fügen Sie folgendes zu Ihrem CSS hinzu:

    /* Navigation */
    #portal-breadcrumbs {
        margin: 1em 1em 1em 19em;
    }

    #portal-breadcrumbs {
        display: none;
    }

    .portlet dt {
        background-color: #d3cebc;
        margin-bottom: 0.5em;
        display: block;
        padding: 0.2em 0.5em;
    }

    .portlet dd {
        margin-left: 0;
    }

    .portlet a {
        text-decoration: none;
    }

    .portletItem {
        padding: 0.5em;
    }

    .portletFooter {
        border-bottom: 1px dashed #c9c4c0;
        padding: 0.5em;
        text-align: right;
    }

    .portletItemDetails {
        text-align: right;
        display: block;
        color: black;
    }

Danach fügen Sie die navigations-spezifischen Elemente hinzu:

    .portletNavigationTree {
        padding-left: 0;
    }

    #portlet-navigation-tree .portletHeader {
        display: none;
    }

    .portletNavigationTree a {
        background-color: #d3cebc;
        margin-bottom: 0.5em;
        display: block;
        padding: 0.2em 0.5em;
    }

    .navTreeItem {
        display: inline;
        list-style: none;
        list-style-image: none;
    }

    .navTreeItem a,
    .navTreeItem a:visited {
        text-decoration: none;
        color: #463229;
    }

    .portletNavigationTree a:hover,
    .navTreeCurrentItem {
        color: #d3cebc !important;
        background-color: #463229 !important;
    }

Uups, dies sieht recht komplziert aus, wenn Sie zuvor noch kein CSS gesehen haben, aber wenn Sie die Regeln eine nach der anderen hinzufügen, können Sie die Entwicklung sehen und dasjenige, was jede Regel auslöst. Wenn Sie Ihre Seite und das CSS neu laden sollten Sie  das Folgende haben:

Wow, nun reden wir. Es beginnt wie ein angemessenes Design auszusehen, braucht gerade noch ein Straffen der Margins (Ränder) und Positionierung.