{"id":172,"date":"2010-11-28T22:50:30","date_gmt":"2010-11-28T21:50:30","guid":{"rendered":"http:\/\/www.carinato.net\/?p=172"},"modified":"2010-11-28T22:50:30","modified_gmt":"2010-11-28T21:50:30","slug":"creazione-di-un-tema-personalizzato-per-plone-4","status":"publish","type":"post","link":"https:\/\/carinato.com\/?p=172","title":{"rendered":"Creazione di un tema personalizzato per Plone 4"},"content":{"rendered":"<p>Nell&#8217;<a href=\"http:\/\/www.carinato.net\/uncategorized\/installazione-plone-4-0-2-su-ubuntu-server-10-04lts\">articolo precedente<\/a> abbiamo visto come installare Plone in un server Ubuntu 10.04, ora vediamo come creare un tema personalizzato per Plone 4.<\/p>\n<p>Dalla cartella principale dove abbiamo installato Plone 4, entrimo nella cartella <strong>src<\/strong>:<\/p>\n<pre>cd plone402\/src<\/pre>\n<p>Utilizziamo paster per generare il template:<\/p>\n<pre>paster create -t plone3_theme<\/pre>\n<p>Alle richieste rispondiamo in questo modo:<\/p>\n<pre>Enter project name: plonetheme.testplone4\nVariables:\n egg:\u00a0\u00a0\u00a0\u00a0\u00a0 plonetheme.testplone4\n package:\u00a0 plonethemetestplone4\n project:\u00a0 plonetheme.testplone4\nExpert Mode? (What question mode would you like? (easy\/expert\/all)?) ['easy']:\nSkin Name (Name of the theme (human facing, added to portal_skins)) ['']: Tema Test Plone4\nEmpty Styles? (Override default public stylesheets with empty ones?) [False]:\nInclude Documentation? (Include in-line documentation in generated code?) [True]:\nVersion (Version number for project) ['1.0']:\nDescription (One-line description of the project) ['An installable theme for Plone 3']:\n<\/pre>\n<p>Note:<\/p>\n<ul>\n<li>Il nome cos\u00ec formato corrisponde al <strong>namespace<\/strong> tipico dei prodotti Plone<\/li>\n<li>Lo Skin Name e&#8217; il nome che poi sar\u00e0 visibile<\/li>\n<li>Empty styles: impostando su <strong>yes<\/strong> verranno generati automaticamente dei fogli di stile vuoti che avranno la precedenza su quelli standard di Plone. Risulta piu&#8217; semplice per\u00f2 lasciar attivi i CSS originali e andar a sovrascrivere solo le parti da modificare<\/li>\n<\/ul>\n<p>Il tema \u00e8 stato ora generato ma dovremo farlo riconoscere a Plone4<\/p>\n<pre>cd ..<\/pre>\n<p>editiamo il file <strong>buildout.cfg<\/strong> e lo modifichiamo in questo modo:<\/p>\n<table>\n<tbody>\n<tr>\n<th>Originale<\/th>\n<th>Modificato<\/th>\n<\/tr>\n<tr>\n<td>\n<pre>develop =<\/pre>\n<\/td>\n<td>\n<pre>develop =\n src\/plonetheme.testplone4<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<pre>eggs =\n Zope2\n Plone\n ${buildout:eggs}<\/pre>\n<\/td>\n<td>\n<pre>eggs =\n Zope2\n Plone\n ${buildout:eggs}\n plonetheme.testplone4<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<pre>zcml =<\/pre>\n<\/td>\n<td>\n<pre>zcml =\n plonetheme.testplone4<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Salviamo le modifiche e rilanciamo lo script <strong>buildout<\/strong><\/p>\n<pre>.\/bin\/buildout -v<\/pre>\n<p>Il parametro -v aumenta la verbosit\u00e0<\/p>\n<p>Riavviamo il server:<\/p>\n<pre>.\/bin\/instance fg<\/pre>\n<p>(per stoppare il server utilizzeremo la combinazione di tasti <strong>ctrl+c<\/strong>)<\/p>\n<p>Col browser puntiamo al pannello di configurazione di Plone4: <strong>http:\/\/192.168.1.203:8080\/Plone\/plone_control_panel<\/strong><\/p>\n<p>e selezioniamo il link <strong>Prodotti Aggiuntivi<\/strong><\/p>\n<p><a href=\"http:\/\/www.carinato.net\/wp-content\/uploads\/2010\/11\/Schermata-2010-11-28-a-22.15.41.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-177\" title=\"Schermata-2010-11-28-a-22.15.41\" src=\"http:\/\/www.carinato.net\/wp-content\/uploads\/2010\/11\/Schermata-2010-11-28-a-22.15.41-300x112.png\" alt=\"\" width=\"300\" height=\"112\" \/><\/a><\/p>\n<p>in alternativa possiamo puntare direttamente all&#8217;indirizzo: <strong>http:\/\/192.168.1.203:8080\/Plone\/prefs_install_products_form<\/strong><\/p>\n<p>Selezioniamo il tema che abbiamo creato e attiviamolo con l&#8217;apposito tasto<\/p>\n<p>Ora vedremo il sito Plone spogliato di tutti i fogli di stile:<\/p>\n<p><a href=\"http:\/\/www.carinato.net\/wp-content\/uploads\/2010\/11\/Schermata-2010-11-28-a-22.26.41.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-178\" title=\"Schermata 2010-11-28 a 22.26.41\" src=\"http:\/\/www.carinato.net\/wp-content\/uploads\/2010\/11\/Schermata-2010-11-28-a-22.26.41-202x300.png\" alt=\"\" width=\"202\" height=\"300\" \/><\/a><\/p>\n<p>Brutta sorpresa direte, visto che prima abbiamo scelto di non sovrascrivere i css originari.<\/p>\n<p>Con Plene 3 avrei avuto il risultato voluto ma con Plone 4 c&#8217;\u00e8 ancora un passaggio da fare.<\/p>\n<p>Il tema che abbiamo trovato inizialmente su Plone 4 si chiama <strong>Sunburst Theme<\/strong> ma in Plone 3 il tema di default si chiamava <strong>Plone Default<\/strong>. Il vecchio tema \u00e8 ancora disponibile ma ora in Plone 4 si chiama <strong>Plone Classic Theme<\/strong>.<\/p>\n<p>Il tema che abbiamo creato dunque va adattato a Plone 4.<\/p>\n<p>Basta modificare il file che troviamo in <strong>src\/plonetheme.testplone4\/plonetheme\/testplone4\/profiles\/default\/skins.xml <\/strong>in questo modo:<\/p>\n<table>\n<tbody>\n<tr>\n<th>Originale<\/th>\n<\/tr>\n<tr>\n<td>\n<pre>&lt;skin-path name=\"Tema Test Plone4\" based-on=\"Plone Default\"&gt;<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<th>Modificato<\/th>\n<\/tr>\n<tr>\n<td>\n<pre>&lt;skin-path name=\"Tema Test Plone4\" based-on=\"Sunburst Theme\"&gt;<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Una volta salvata la modifica dovremo riavviare il server Zope per vederne l&#8217;effetto.<\/p>\n<p>Ora vediamo come personalizzare il tema che abbiamo creato.<\/p>\n<p>Gli strumenti che ci servono sono:<\/p>\n<ul>\n<li>Firefox ed il plugin Firebug<\/li>\n<li>Un buon editor (Komodo per esempio), magari che supporti l&#8217;editazione di file remoti<\/li>\n<li>Eventualmente un Grid System (<a href=\"http:\/\/deco.gs\">deco.gs<\/a> per esempio) per aiutarci nello sviluppo<\/li>\n<\/ul>\n<p>Il primo lavoro che dovremo fare e&#8217; copiare brutalmente i fogli di stile utilizzati dal tema SunBurst nel nostro tema, per poterli poi modificare a piacere.<\/p>\n<p>Per fare questo in modo semplice creiamo in ubuntu 2 variabili di sistema temporanee partendo dalla directory principale di Plone4 (nel nostro caso ~\/plone402):<\/p>\n<pre>cd ~\/plone402\norig=`cat bin\/instance | grep \"plonetheme.sunburst\" | cut -d \\' -f2`\/plonetheme\/sunburst\/skins\/sunburst_styles\ndest=src\/plonetheme.testplone4\/plonetheme\/testplone4\/skins\/plonetheme_testplone4_styles\/<\/pre>\n<p>Verifichiamo i valori memorizzati con:<\/p>\n<pre>echo $orig<\/pre>\n<pre>echo $dest<\/pre>\n<p>e copiamo i file da modificare:<\/p>\n<pre>cp $orig\/ploneCustom.css.dtml $dest\ncp $orig\/public.css $dest<\/pre>\n<p>Ora col nostro editor di testo possiamo modificare a piacere questi files.<\/p>\n<p>Possiamo pensare di modificare public.css quando volgiamo modificare dei tag esistenti e inserire eventuali tag nuovi nel file ploneCustom.css.dtml ma questa scelta \u00e8 arbitraria. L&#8217;importante \u00e8 sapere che ploneCustom.css.dtml ha la precedenza su public.css.<\/p>\n<p>(work in progress&#8230;.)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nell&#8217;articolo precedente abbiamo visto come installare Plone in un server Ubuntu 10.04, ora vediamo come creare un tema personalizzato per Plone 4. Dalla cartella principale dove abbiamo installato Plone 4, entrimo nella cartella src: cd plone402\/src Utilizziamo paster per generare il template: paster create -t plone3_theme Alle richieste rispondiamo in questo modo: Enter project name: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,14,4],"tags":[11,15,3],"class_list":["post-172","post","type-post","status-publish","format-standard","hentry","category-linux","category-plone-2","category-webutils","tag-plone","tag-ubuntu","tag-web"],"_links":{"self":[{"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/posts\/172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carinato.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=172"}],"version-history":[{"count":0,"href":"https:\/\/carinato.com\/index.php?rest_route=\/wp\/v2\/posts\/172\/revisions"}],"wp:attachment":[{"href":"https:\/\/carinato.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carinato.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carinato.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}