neues Template (Skin) erstellen

merdi

Hallo Leute,

ich beschäftige mich seit kurzem mit Plone. Habe mir auch das Plone Buch von Andy McKay gekauft, doch leider blicke ich da nicht ganz durch.

Jetzt habe ich von Plone Template, Skins und CMFSkins gelesen bzw. gehört. Ich möchte gern das Aussehen von dem Standardplone komplett ändern. Doch leider weiss ich überhaupt nicht wo ich Anfangen soll. Ob ich jetzt irgendwie ein eigenes Template (Skin) erstellen soll, frage mich nur wie ? oder ob ich das bestehen ändern soll. Also ich bin für jede hilfe Dankbar. Und bitte von Anfang an, da ich kein schimmer hab wie ich das machen soll

Bin die ganze Zeit online. Ich will das jetzt unbedingt lernen.*grrr
D.h. ihr könnt auf eine schnelle Antwort und Fragen von mir zählen, damit das flüssig von statten gehen kann.

Liebe Grüße
merdi

Torty

OOOOKKKKK...dann mal ein paar Hints von mir...

Alle Dateien die man sich von bestehenden Scripts nimmt und verändert *müssen* Kopien sein. Z.b. legt man diese dann in /custom ab. Damit fasst man die originalen Files nicht an und lässt alles "heile".

1.) Du kannst den Plone-Skin weitgehend per CSS umgestalten. Nur eine handvoll Settings sind im Plone-Skin per !important definiert. Das merkt man dann schon bzw. sucht dies in den geladenen Styles.

2.) Für einige Skins kann es notwendig sein im main_template und in einigen anderen PageTemplates Sachen zu deaktivieren oder hinzufügen. Hinzufügen kann man bsp.weise eigene CSS-Klassen bzw. -ID's, die dann gezielt per Stylesheet manipuliert werden.

3.) Es könnte sein, dass die Navigation anders erscheinen soll. Dazu muss man meist direkt in die Templates portlet_navigation.pt und speziell portlet_navtree_macro.pt eingreifen.

Die Thematik ist etwas weitreichend. Um dir zu zeigen, dass der Std.Plone-Skin nicht der schlechteste ist und dass man mit eigenen CSS da ne Menge machen kann, möchte ich dir die folgenden Links vortellen. Sie haben zwar auch Teile, die selbst erzeugt sind bzw. durch eigene CSS-Klassen / -IDs speziell angepasst sind, aber sie zeigen was möglich ist.

http://www.augen-venividi.com
http://www.druckdesignsievers.de
http://www.bestattungshaus-lenartz.de (Hauptarbeit durch Quantagroup)
http://www.pharmareferent.de/
alles Plone-Default-Skin die von mir in Zusammenarbeit mit positiv multimedia entwickelt wurden
http://www.positiv-multimedia.com

Du siehst daran, dass ein prinzipieller Aufbau sicher nicht verkennbar ist, aber dass der Plone-Skin mit einigen eigenen Modulen/Styles durchaus ganz anders erscheinen kann.

Gern geb ich auch Infos dazu, nur würd ich dir vorschlagen, dich nicht gleich zu übernehmen. Einige Sachen können durchaus sehr tricky sein. Deshalb lohnt es sich langsam und systematisch mit dieser Problematik auseinander zu setzen.

Aber ok - frag ruhgi was du wissen willst...

Torty

merdi

Ok, also fangen wir mal an. Ich hoffe Du hast geduldt mit mir.
1. Navi.
Ich würde die Navi gern so gestalten dass sie dem ZMI ähnlich aussieht, also runde Ecken. Wo genau muss ich jetzt hin. Logo kann bestehen, es stört mich nicht.

Torty

in der Weise klappt das nicht. Ich empfehle dir den Firefox als Entwicklerbrwoser in Zusammenarbeit mit dem Webdeveloper-Extension. Ein absolutes Must-Have.

Dort gitb es ein Tool namens "Editor-CSS" - damit kan man live an einer Site Änderungen testen. Dein Vorhaben würde ich mit der base_properties.props beginnen. Dort sind einige Dinge wie auch die Spaltenbreiten oder Farben definiert.

Im Prinzip interessieren dich nicht die Dateien, sondern eher die CSS-Klassen und -ID's die Plone vergeben hat. Dazu musst du nur in den Quellcode der HTML-Seite schauen bzw. beim WebDev-Ext. den Punkt CSS-View Style-Information benutzen und auf die gewünschte STelle klicken. Dann erhälst du idealerweise die Styles des geklickten Elementes. Anderenfalls benutze den DOM-Inspector um dich der Struktur der Seite bewusst zu werden.

Das alles ist ein Lernprozess, den man nicht mit ein paar Forenposts verwitteln kann. Wie gesagt: Gedult und Ausdauer hilft hier weiter.

Bin aber jetzt mal off...
Torty

merdi

Ich zeig dir mal was ich vor habe.
Der Entwurf ist nicht schön aber selten *gg

merdi

Firefox hab ich. Das Developer Ext. hab ich auch heruntergeladen.
Das CSS würde ich schon hinbekommen, wenn ich wüsste, wo ich die Datein und vor allem welche Datein ich anfassen muss. (in Plone bzw. in ZMI)
Ich möchte nicht, dass du mir jetzt alle Css-klassen schreibst. Um Gotteswillen.

Torty

Ich würd das Mainmenu per "Portal Tabs" umsetzen, da bracuhst du nur noch CSS anpassen.

Submenu - sieht nach einem eigenen Script aus. -> Python/CMF lernen

Sidemenu - könnte mit dem Plone-Script funktionieren, wenn man per Python Level 1 (Mainmenu) und Level 2 (Submenu) rausschmeisst.

Hier zeigt sich, dass man um eigene Script (Python und/oder TAL) nicht umhinkommt...

So - jetzt bin ich aber wirklich raus ...
Torty

Torty

Zitat von merdi

Firefox hab ich. Das Developer Ext. hab ich auch heruntergeladen.
Das CSS würde ich schon hinbekommen, wenn ich wüsste, wo ich die Datein und vor allem welche Datein ich anfassen muss. (in Plone bzw. in ZMI)
Ich möchte nicht, dass du mir jetzt alle Css-klassen schreibst. Um Gotteswillen.

Also du gehst im ZMI zu PortalSkins und gehst aus Plone_default.css. Dort auf customize und dann liegt im /custom das Objekt 'Plone_default.css'.
Darin kann du deine Styles speichern. Der custom-Ordner liegt über allen andern bzw. wird als letztes angefasst. Somit sind seine Setings maßgeblich.

Damit hast du eine CSS-Spielwiese wo du Sachen ausprobieren kannst ...

merdi

Erst einmal vielen Dank.

hmm, irgendwie finde ich die Datei Plone_default.css.
ZMI-->PORTAL_SKINS--> ??? leider keine Plone_default.css vorhanden.

Meinst Du vielleicht
ZMI-->PORTAL_SKINS-->PLONE_STYLES--> ploneCustom.css ??

Gute Nacht, ich hoffe du bist morgen auch da
merdi

Torty

Ja genau die mein ich. Draufklicken und auf "customize" klicken. Dann liegt im portal_skins/custom eine Kopie dieser Datei, die du dann frei ändern darfst.

Torty

Guten Morgen,

ich habe mir jetzt eine Kopie erzeugt. D.h. mit der ID ploneStyleseintrag dort finde ich:

/*
* This is the file where you put your CSS changes.
* You should preferrably use this and override the
* relevant properties you want to change here instead
* of customizing plone.css to survive upgrades. Writing
* your own plone.css only makes sense for very heavy
* customizations. Useful variables from Plone are
* documented at the bottom of this file.
*/

/* <dtml-with base_properties> (do not remove this */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either */

/* DELETE THIS LINE AND PUT YOUR CUSTOM STUFF HERE */

/* </dtml-with> */

/* DOCUMENTATION ON PRE-DEFINED PROPERTIES FROM PLONE */

/* You can insert colors and other variables from Plone's
base_properties by doing:

& dtml-variableName ; (without the spaces, excluded here to not make it render)

Example:

myLink {
color: & dtml-fontColor ; (again, without the spaces)
}

This means you can generate your own elements that use Plone's defaults,
and respect any customizations people have done. See base_properties for
the default values.

These are the available properties:

logoName - the file name of the portal logo

fontFamily - the font family used for all text that is not headers
..

d.h. ich kann jetzt hier meine Stylesheets eintragen zu den jeweiligen variablen wie z.b. hier fontFamily "Verdana..." . Wie weise ich das den zu ? Zuweisungsoperatur ?

Es scheint mir auch sehr ähnlich wie die base_properties zu sein. Ist es die Gleiche Datei (Objekt)?

Torty

Also du hast jetzt ein eigenes CSS und zwar als DTML-File. DTML heißt Document Template Markup Language und ist eine eigene Beschreibungssprache. Für das CSS ist dabei nur wichtig, dass der seltsame Kopf und Fuss so ausschaut:

Code

* <dtml-with base_properties> (do not remove this Smile */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either Smile */ 
  ...
/* </dtml-with> */

Danach kannst du hier ganz normale Styles definieren (keine Variablen!). Der Clou hierbei ist nun, dass du wiederkehrende Werte durch Variablen ersetzen kannst.

Code

/* ---  CSS file  --- */
...
  font: &dtml-myGlobalFont;;
  color: &dtml-myFontColor;;
...

Die Definition dieser Werte erfolgt in der base_properties und sieht so aus

Code

# base_properties
...
myGlobalFont:string=normal normal 105% Verdana,sans-serif
myFontColor:string=#556677
...

Also verwendest du sowohl die base_props als auch die ploneCustom.css.
Dadurch ist es einfacher z.B. eine CI-Farbe für viele Eelemente mit einer Änderung zu manipulieren.

So wie ich es in einigen Zope-Warnings erkennen kann, ist diese Methode jedoch als deprecadet markiert. Das bedeutet in späteren Major-Releases wird es diese Möglichkeit wohl nicht mehr geben. Nach welchem Prinzip es dann möglich ist diese globalen Settings in das CSS einfliessen zu lassen, muss ich noch ergründen...

Torty

Tags