Grundlage

Bevor wir mit dem Schreiben von CSS beginnen können, werden wir noch einige strukturelle Veränderungen vornehmen und die grafischen Elemente exportieren.

Elemente identifizieren

Die erste Frage, die Sie sich stellen sollten, wenn Sie auf die originale Gestaltung schauen: Welche Elemente bilden welche Plone-Strukturen ab?

In unserem Fall können die meisten Elemente an ihrem Platz bleiben, aber die Leiste mit den personalisierten Aktionen und dem Logo sollte verschoben werden. Die Reihe mit den globalen Sektionen / Registern ist ebenso überflüssig.

Es ist in Ordnung, main_template anzurühren!

In Plone ist main_template die Mutter aller Vorlagen (Templates), diejenige, die die ganze Struktur an einem Platz hält. Sie sieht wie eine sehr komplizierte Vorlage aus, wenn Sie sie öffnen ("Was ist dieses ganze metall: Zeugs?), aber das Geheimnis ist, bis zum ersten Body-Tag herunterzuscrollen (irgendwo um Zeile 40 herum, je nach Version) und die Vorlage von da an zu lesen.

Es gibt dort viele Ausdrücke wie diesen:

    <div metal:use-macro="here/global_searchbox/macros/quick_search">
     The quicksearch box, normally placed at the top right
    </div>

Die Details überspringend (aber bitte lernen Sie ZPT [Zope Page Template] , falls Sie mit Plone nicht nur gelegentlich arbeiten wollen, ein Tutorial zu ZPT können Sie hier finden) teilt diese Instruktion Plone im Wesentlichen mit, die Datei global_searchbox holen zu gehen und das Makro quick_search von da aus aufzurufen und auf die Seite anzuwenden.

Sie können diese Elemente dorthin verschieben, wo immer Sie es auf der Seite wollen, sofern Sie Ihren Inhalt / ihre Attribute intakt halten.

Die meisten Bücher empfehlen, dass Sie main_template wegen der Wartung nicht antasten sollten. Dies ist allgemein ein guter Rat, abgesehen von der Tatsache, dass Sie nicht wirklich realistisch über Browsergrenzen hinweg in der Weise positionieren können, dass es mit jedem Design übereinstimmt, dass Ihnen Ihr Client gibt. Deshalb sagt Alexander Lippi offiziell:

Mein Name ist Alexander Limi und ich passe das main_template in meinen Themen an.

Der wichtige Punkt, wenn Sie main_template anpassen und die Elemente neu ordnen, besteht darin, vorsichtig zu sein, wenn Sie updaten. Die Release-Informationen jedes Plone-Releases werden angeben, wenn Veränderungen an main_template vorgenommen worden sind, aber Sie sollten immer ein Diff-Programm benutzen (FileMerge for Mac, WinMerge for Windows), um zu sehen, was sich zwischen den Originalversionen von main_templates in zwei verschiedenen Versionen von Plone geändert hat und dann diese Änderungen entsprechend an Ihrer Version von main_template vornehmen, wenn  Sie updaten.

In unserem Fall werden wir folgendes veranlassen:

• Entfernen der allgemeinen Navigationsleiste (wir haben den Navigationsbaum, weshalb kein Bedarf für ein Doppel der Navigationsstruktur besteht)
• Bewegen des Logos nach oben (es gibt Wege, dies ohne Neuordnen von main_template zu bewerkstelligen, aber so ist es viel einfacher)

Dies wird erledigt, indem Sie die Anweisung tal:replace um den Inhalt herum positionieren und es mit der speziellen Anweisung "nothing" verdrängen. Beispiel:

    <tal:tutorial tal:replace="nothing"> Tutorial: Removing the global nav
      <div metal:use-macro="here/global_sections/macros/portal_tabs">
       The global sections tabs. (Welcome, News etc)
      </div>
    </tal:tutorial>

Der Weg, um Ihre eigene main_template zu bekommen, besteht darin, die im Verzeichnis CMFPlone/skins/plone_templates existierende in das Verzeichnis template des Themen-Produkts zu kopieren, das Sie mit DIYPloneStyle erstellt haben.

Auswählen der Basisfarben, die benutzt werden sollen

Der nächste Schritt besteht darin, die Farben aus dem Übungsbeispiel herauszuziehen. Diese können dann für base_properties benutzt werden, aber in diesem speziellen Tutorial wird hiervon kein Gebrauch geamcht - es macht Sinn, wenn Sie einige Plone-CSS-Stile belassen wollen. Hier sind die Farbeinstellungen, die für unsere Themen benötigt werden:

    border: #c9c4c0
    navigation elements: #d3cebc
    red highlight color: #ec001a

    link color: #463229
    text color: #7e7c7c

Welche Stylesheets sind abgeschaltet?

In unserem Beispiel (und standardmäßig in DIYPloneStyle), haben wir das Stylesheet für die öffentliche Ansicht abgeschaltet, das dafür sorgt, dass Plone wie Plone aussieht.

Die folgenden Stylesheets sind abgeschaltet:

• base.css (Stile für Grundtags - p, a etc)
• public.css (der ganze "Flaum", wie die öffentliche Seite aussieht)
• portlets.css (enthält die Stile für die Portlets, die Boxen in Ihrer Ploneseite)
• generated.css (erstellt Symbole für Inhaltstypen — Alexander Limi stellt generated.css normaler Weise nur für angemeldete Benutzer an — schauen Sie in member.css für eine Beispielseinstellung)

Manchmal ziehe ich es auch vor, base.css zu behalten, die Paar Dinge zu überschreiben, die nicht den eigenen Vorstellungen entsprechen (wie z.B. Überschriften) und die Schriftarten etc. in base_properties anzupassen - aber in unserem Beispiel starten wir bei Null. Dies macht es zukunftssicherer.

Export von grafischen Elementen

Als nächstes sollten Sie die grafischen Elemente, die vom Übungsbeispiel benötigt werden, exportieren. Falls Sie eine Photoshop Testversion haben, machen Sie Gebrauch von der Ebenenfunktion und entfernen Sie jeden Hintergrund von den Logos und anderen Grafiken. Speichern Sie diese im Verzeichnis mytheme_images.

Lassen Sie uns nun zum spaßigen Teil kommen: Hinzufügen des CSS und dafür sorgen, dass Plone wie unser Übungsbeispiel aussieht.