Uso dei livelli dentro uno Skin

Uno skin è suddiviso per collezioni logiche di modelli e di script dette livelli. La modifica di queste singole collezioni consente la semplice aggiunta o la rimozione di elementi da parte dell'utente. I livelli sono rappresentati in uno skin con un elenco gerarchico di cartelle. A ciascun livello corrisponde un nome di una cartella, ed ogni cartella contiene gli elementi dello skin.

Per esempio uno skin può avere i seguenti livelli:

custom, gruf, plone_ecmascript, plone_wysiwyg ...

L'ordine dei livelli di quest'elenco è la chiave di come Plone trova gli elementi. Quando viene richiesto un elemento dallo skin, come per esempio l'immagine logo.jpg, lo skin guarda tra i livelli per trovarla. Lo skin parte cercando nel primo livello assegnato (nel nostro esempio custom). Se lo skin non riesce a trovare l'elemento nel primo livello, passa al secondo (nell'esempio gruf). Poi prosegue cercando nell'elenco dei livelli fino a che non trova l'elemento cercato. Se non trova quell'elemento solleva un errore 404 e lo passa al browser.

Un concetto simile in molti sistemi è l'uso della variabile d'ambiente PATH. Quando si lancia un comando o si cerca un programma il sistema operativo cerca nelle cartelle del file system specificate nella variabile PATH. Un approccio simile lo si ha con i livelli, quando i livelli sono attraversati alla ricerca di un certo elemento.

Predisponendo la precedenza dei livelli superiori rispetto a quelli sotto, gli sviluppatori e gli amministratori possono quindi personalizzare e manipolare il proprio sito tramite i livelli. Se non si desidera un particolare elemento di uno skin Plone, spostandolo in un livello, è possibile deciderne la modalità di visualizzazione. È possibile ordinare i propri livelli con lo strumento portal_skins che affronteremo di seguito.

Gestire gli Skin con lo strumento portal_skins

In Plone per definire le caratteristiche dello skin e dei livelli si usa lo strumento portal_skins. Lo strumento portal_skins fornisce inoltre un servizio ed una API (application programming interface) per la creazione e l'uso degli skin.

Per accedere allo strumento portal_skins si va nella interfaccia di Zope ZMI e si clicca su portal_skins. Ci sono due schermate chiave nella ZMI; la prima, la scheda Contents, mostra tutte le cartelle e viste delle directory del file system (FSDVs) posizionate dentro questo strumento (vedere Figura 7-1).

Figura 7-1. I contenuti dello strumento portal_skins in una installazione Plone standard

Non tutte le cartelle o le viste delle directory del file system della scheda Contents sono livelli, ma è possibile trasformarle in livelli. Inoltre, la seconda importante schermata, la scheda Properties, mostra tutti gli skin e livelli definiti nel proprio sito Plone (vedere la Figura 7-2).

Figura 7-2. Gli skin e i livelli di una installazione Plone standard

Come mostra la figura 7-2, l'elenco di questi livelli è abbastanza lungo. Sebbene ciò intimidisca, questo gran numero di livelli permette allo sviluppatore un grado di flessibilità e di riusabilità notevole. Ciascuno skin è mostrato sulla sinistra con una propria area di testo sulla destra contenente i livelli di quello skin. Come detto in precedenza, Plone, per trovare elementi, ricerca nei livelli dall'inizio alla fine. Ciascun livello è il nome di una cartella o di un FSDV della scheda Contents. Nella Figura 7-2 si vede una cartella plone_ecmascript e in Figura 7-1 c'è l'oggetto FSDV corrispondente.

Un FSDV è un nuovo oggetto di Plone che offre una utile funzionalità; consente l'accesso diretto agli elementi dello skin che sono stati definiti nel file system piuttosto che nel database ad oggetti di Zope , come d'abitudine. FSDV rende facili lo sviluppo e la personalizzazione. Leggendo direttamente gli oggetti dal file system, per gli sviluppatori è molto più semplice scrivere o modificare il codice che genera il sito. Quando si installa Plone lo skin viene scritto dentro il file system. Quando si personalizza un oggetto se ne fa una copia locale dentro il database di Plone. L'uso di un FSDV consente di mantenere una netta separazione tra il codice scaricato dalla rete ed il codice personalizzato nella propria istanza locale.

Plone 2 è fornito con due skin, Plone predefinito e Plone Tableless. Lo skin Plone predefinito usa le tabelle per rendere il corpo principale affiancato da due celle di tabella dalle parti contenenti i riquadri (slot) di destra e di sinistra. Per compatibilità con i browser questa è l'impostazione predefinita. Comunque, cambiando a Plone Tableless, si ottiene uno skin che sembra uguale tranne che non ci sono tabelle che producono la pagina, il che ci da, come sviluppatori del sito, maggiore flessibilità. Mentre scriviamo lo skin Plone Tableless da un po' di problemi con alcuni browser, tipo Internet Explorer. Speriamo che in futuro lo skin Plone Tableless possa diventare lo skin predefinito di Plone.

Per cambiare lo skin scorrere fino al fondo del modulo dove si trova lo skin predefinito e selezionare lo skin di default dall'elenco di scelte. Selezionando l'opzione Skin Flexibility gli utenti potranno scegliere successivamente un proprio skin dalla sezione preferenze personali

Ritornando nella scheda Contents dello strumento portal_skins si può notare che alcune delle cartelle, la custom per esempio, sono cartelle standard di Zope. Hanno infatti la normale icona delle cartelle. Altre, per esempio plone_images, sono viste FSDV che puntano ad aree del file system. Queste hanno la stessa icona delle cartelle ma con un lucchetto verde dentro. Questo lucchetto indica che non è possibile aggiungere o modificare degli elementi di una vista FSDV tramite web; è possibile farlo solo tramite il file system.

Per capire dove risiedono i file di una vista FSDV nel proprio disco rigido cliccare sulla scheda Properties dell'FSDV. Per esempio dalla scheda Contents dello strumento portal_skins cliccare Properties e verrà elencato il path del file system di CMFPlone/skins/plone_images. Questo path è la posizione di questa cartella sul file system relativo alla istanza principale specificata nel processo di installazione. Siccome si possono vedere i file tramite il web nell'FSDV oppure dal file system, per leggerli vi si può accedere in entrambi i modi. E siccome visualizzare file tramite il file system è decisamente piu amichevole e facile, ci riferiamo ad un file come al path di un file system, a cui si può accedere con strumenti famigliari.

Personalizzare il Logo, ripetizione

Nel Capitolo 4 abbiamo imparato come personalizzare il logo dell'angolo in alto a sinistra del sito Plone ma abbiamo sorvolato su cosa realmente accade. Questa sezione rivisita quell'esempio.

L'immagine logo.jpg è l'immagine che appare in ogni pagina nell'angolo in alto a sinistra. Vediamo quindi cosa succede quando un browser cerca di visualizzare questa pagina. Quando Plone riceve la richiesta di quella immagine egli cerca tra i livelli per trovare logo.jpg. In un sito predefinito c'è un elemento in plone_images denominato logo.jpg. Siccome questo è un oggetto FSVD, come detto precedentemente, non è possibile modificare l'immagine via web. In vista di future modifiche al sito non si vorrà neppure modificarlo sul file system. Guardiamo meglio cosa fa il pulsante Customize. Se guardiamo nuovamente questo pulsante possiamo vedere che c'è, a sinistra del pulsante, un elenco di scelta di cartelle contenute nello strumento portal_skins.

Cliccando sul pulsante Customize si crea una copia nella cartella locale dell'elemento selezionato nell'elenco di scelta. Per default questa è la cartella custom, quidi ora avremo una copia nella cartella custom. Quando Plone cerca l'elemento logo.jpg, accede alla versione della cartella custom. Guardando nuovamente i livelli dello skin predefinito di Plone, la cartella custom è il livello in cima allo skin. Quando viene chiamato logo.jpg verrà trovata l'immagine nel livello personalizzato (custom). Così è come viene reso il nuovo logo.jpg.

Mettere elementi personalizzati nella cartella custom è la strada più veloce per iniziare a distinguere il proprio sito Plone. La cartella custom è una cartella Plone standard ed è quindi possibile inserirvi quanti elementi si vogliono per sovrascrivere gli elementi precedenti.

Introduzione al foglio di stile (CSS) di Plone

La rappresentazione visiva di un sito Plone in un browser è messa insieme quasi interamente usando il CSS. Forse il miglior sistema per capire cosa fa il CSS per un sito Plone è quello di paragonare la Figura 7-3 con la Figura 7-4. La prima mostra Plone con il foglio di stile, e la seconda mostra Plone senza alcun foglio di stile.

Figura 7-3. Plone con foglio di stile

Figura 7-4. Plone senza foglio di stile

La differenza non è da poco. Il CSS determina non solo la rappresentazione visiva della pagina ma anche il suo aspetto. Cambiando il CSS è possibile modificare questa rappresentazione e l'aspetto di un sito Plone (con i vincoli del CSS).

Realizzare l'aspetto di Plone utilizzando il CSS è una impressionante attività svolta da talentuosi utenti sviluppatori di interfacce. Quelli che seguono sono alcuni dei benefici dell'usare il CSS per determinare l'aspetto:

• Il CSS fornisce un livello di separazione tra la presentazione ed il modello di pagina che genera la presentazione.
• È possibile effettuare molte modifiche senza dover toccare il sottostante modello di pagina. Tutto quello che serve è un esperto sviluppatore di CSS.
• Il CSS rende più veloce il sito poiché invia file più piccoli. Ciascun file HTML (Hypertext Markup Language) è più piccolo di quanto l'aspetto del sito non è descritto nell'HTML bensì nel CSS, che può essere mantenuto nella cache.
• Il CSS consente di personalizzare l'aspetto senza rompere il sottostante lavoro sull'accessibilità.

Personalizzare caratteri, colori e spaziature

Il foglio di stile attuale che fa gran parte del lavoro, plone.css, contiene numerose variabili inserite usando il DTML, l'HTML dinamico (Dynamic HTML). In questo libro non trattiamo il DTML; questo è probabilmente l'unico uso che se ne fa in Plone, quindi non è necessario conoscerlo già, e, se possibile, raccomandiamo di evitare di studiarlo! Il sistema Zope Page Templates ha tutto quello che ci serve. In rete esistono dei riferimenti eccellenti al DTML per Zope; riferirsi comunque a http://docit.bice.dyndns.org/Zope/ZopeBook/DTMLBase.rst (http://zope.org/Documentation/Books/ZopeBook/2_6Edition/DTML.stx).

La sintassi DTML di questo foglio di stile è veramente semplice; ciascuna variabile è correlata ad un corrispondente attributo di un foglio di proprietà. Per accedere a questo foglio di proprietà cliccare su portal_skins, plone_styles e poi su base_properties. Nella Figura 7-5 si vede come questo file viene mostrato nella ZMI.

Figura 7-5. Le proprietà base del foglio di stile

Per esempio, dtml-fontColor; individua la variabile fontColor e la mette nel foglio di stile in modo che qui fontColor è black. Ora possiamo vedere dove la variabile è referenziata nel file plone.css. Per accedere al file CSS, cliccare su portal_skins, plone_styles e poi plone.css. In questo file è possibile vedere che mainFontColor è referenziata in più punti, per esempio è referenziata nel corpo di una pagina; in questo modo:

body {
    font: dtml-fontBaseSize; <dtml-var fontFamily>;
    background-color: dtml-backgroundColor;;

    color: dtml-fontColor;;

    margin: 0;
    padding: 0;
}

Si può continuare a leggere il foglio di stile, se si vuole realmente, ma cambiare la variabile è sempre il modo più rapido per vedere esattamente su cosa interviene.

Ritornare alla ZMI, cliccare portal_skin cliccare su plone_styles, cliccare poi base_properties e quindi cliccare il bottone Customize. Come si potrà vedere, questo creerà un oggetto nella ZMI che è possibile personalizzare. Questa volta l'oggetto personalizzato è davvero una cartella che ha le proprietà contenute nella cartella. Per accedere alle proprietà che abbiamo appena personalizzato, cliccare portal_skin, cliccare custom e quindi cliccare base_properties. In seguito, selezionare la scheda Properties (vedere Figura 7-6).

Figura 7-6. Le proprietà della cartella

Questa elenco di proprietà permette di modificare le proprietà di mainColor a qualche cosa di differente, per esempio red o #cc9900. Cambiare il valore di quella proprietà, e cliccare Save Changes. Ritornando al sito Plone, si dovrebbe quindi vedere il nuovo gradevole colore .

Nel Capitolo 4 abbiamo visto un esempio dove, per cambiare una scheda in cima ad una pagina, gli utenti possono cambiare le azioni. Anche se è possibile inserire un'azione con il primo carattere maiuscolo (come Members) questa viene poi visualizzate in lettere minuscole nella pagina web. Questo perché il CSS trasforma il testo in minuscolo per via della proprietà textTransform nel foglio delle proprietà. Per bloccare questa trasformazione, cambiare la proprietà textTransform a none.

Nel foglio di stile, le proprietà sono definite per tutti i colori, la spaziatura, ed il tipo di carattere usati in un sito Plone. La tabella 7-1 descrive tutti i parametri.

Tabella 7-1. Proprietà del CSS

Personalizzare il CSS

Se si hanno poche personalizzazioni, è possibile metterle in ploneCustom.css. Questo è il secondo foglio di stile che viene caricato dopo plone.css. Usando la funzionalità a caduta dei fogli di stile, è possibile applicare qualsiasi modifica a ploneCustom.css per sovrascrivere il foglio di stile.

Per esempio, per cambiare la byline che appare sul fondo di ciascuna pagina, è sufficente cambiare ploneCustom.css. Di nuovo, accediamo al file attraverso la ZMI, e quindi clicchiamo Customize. Questo crea una copia di quel foglio di stile nella cartella custom. Per modificare il byline, muoverlo al lato sinistro ed impostarlo a grassetto, come dimostrato in Figura 7-7.

Figura 7-7. Il nuovo byline in grassetto sulla sinistra

Per fare ciò aggiungere il seguente:

div.documentByLine {
    text-align: left;
    font-weight: bold;
}

Qui abbiamo impostato due attributi per l'elemento byline: text-align e font-weight. Notare che non abbiamo cambiato nessun altro attributo dell'elemento byline; gli attributi rimasti sono ereditati dal foglio di stile originale. Con alcune semplici linee di CSS, abbiamo cambiato il sito e assicurato che altre modifiche a Plone non influenzeranno il nostro sito. Modificare ploneCustom.css è la migliore scelta per delle piccole modifiche.

Usando fogli di stile diversi, è possibile utilizzare Plone ed offrire un'aspetto diverso a client diversi. Spesso i siti Web hanno un pulsante che stampa una pagina più semplice, senza molta formattazione. Plone attenua questo problema offrendo un foglio di stile separato; quando un browser stampa la pagina, quel foglio di stile formatta la pagina. Tutti i fogli di stile alternativi sono inclusi in cima ad una pagina; si possono trovare cliccando portal_skin, cliccando plone_template e quindi header.pt.

Personalizzare il modello di pagina principale

Come  visto nel capitolo precedente, per dare un certo aspetto in una pagina a Plone , abbiamo bisogno di usare la macro master del main_template. Ciascuna pagina Plone usa questa macro e quindi riempie gli slot adatti. Dando un sguardo nei dettagli al modello principale, è possibile vedere come una pagina Plone venga costruita da un modello di pagina e quindi vedere con precisione come si possano singolarmente personalizzare quegli elementi della pagina.

Se si guarda la pagina principale di Plone, si notano numerosi elementi. La Figura 7-8 mostra una pagina Plone con tutti gli elementi chiave dell’interfaccia utente. La Tabella 7-2 descrive ognuno degli elementi ed il loro scopo. Per ogni elemento della Figura 7-8 si trova un numero corrispondente nella tabella.

Figura 7-8. Tutti gli elementi principali dell'interfaccia utente di Plone

Tabella 7-2. Elementi dell’interfaccia utente

Non abbiamo ancora trattato una sezione di questo modello di pagina: il contenuto. Tutto il testo da Welcome to Plone giù fino a The Plone Team è il contenuto aggiunto e modificato dagli utenti. Questo è lo slot principale del modello di pagina che viene riempito con un particolare tipo di contenuto o modello di pagina, come abbiamo visto. Nel Capitolo 6 abbiamo trattato l’uso degli slot;  in quel capitolo abbiamo mostrato come, usando lo slot principale, possiamo essere sicuri che il contenuto appaia in una pagina Plone.

Quindi, determinati i componenti della nostra pagina Plone, com'è possibile personalizzarne una singola parte? La risposta è: trovare la sezione corrispondente nel main_template, vedere quale parte chiama, e poi personalizzarla. Per questa ragione, tratteremo in dettaglio il modello principale.

A prima vista, il modello principale appare molto lungo e complicato, ma è costituito essenzialmente tutto da macro, ed il suo scopo principale è di prelevare contenuto da altre aree. È possibile trovare il modello principale cliccando portal_skin, cliccando plone_templates, e cliccando quindi main_template.

La filosofia retrostante al modello principale è che un utente non dovrebbe aver bisogno di modificare la configurazione del modello corrente, a meno che si siano pianificate grandi modifiche. Siccome il modello principale preleva tutto il contento da altri posti all’interno di Plone, è possibile modificare la pagina così assemblata personalizzando quei singoli elementi. Questo significa che è possibile modificare solo le sezioni che interessano piuttosto che modificare l’intero modello.

Il modello principale usa pesantemente lo spazio dei nomi dell'XML (Extensible Markup Language) per presentare il più semplicemente possibile il codice METAL. Per esempio:

<metal:headslot define-slot="head_slot" />
   <!--Uno slot dove è possibile inserire gli elementi dell'header da
   un modello-->

Qui, il nome del marcatore non è un elemento standard dell'XHTML (Extensible HTML); invece, usa il prefisso metal: per definire uno spazio dei nomi come metal:headslot. Questo da i seguenti vantaggi:

• L'elemento headslot è semantico, cioé descrive l'elemento. È facile evidenziare che questo è lo slot per aggiungere qualsiasi cosa che si voglia aggiungere in cima alla propria pagina.
• Gli attributi in quell'elemento usano lo spazio dei nomi dell'elemento se non altrimenti dichiarato; quindi, invece di metal:fill-slot, si può usare solo fill-slot.
• Il marcatore corrente non è un marcatore XHTML valido, così non verrà visualizzato. Comunque, se la traduzione del marcatore genera qualcosa di XHTML` valido, allora l'``XHTML viene visualizzato.

Quando viene usata una macro, il contenuto nel modello chiamante viene rimosso, così è possibile mettere nel modello chiamante dei commenti inseriti nella macro come testo. Per esempio:

<div metal:use-macro="here/global_searchbox/macros/quick_search">
    Il box di ricerca veloce, normalmente posizionato in alto a destra
</div>

In base al commento, è facile capire che questa macro si riferisce al box di ricerca nell'angolo in alto a destra di un sito (elemento 2 in Figura 7-8). Per vedere la macro, si trovi lo script denominato global_searchbox e la macro quick_search contenute al suo interno. Il modello principale continua con macro principali, recuperando informazioni da diversi modelli e script, e costruisce la pagina nel modo giusto.

Dopo questa sezione, il modello principale giunge al contenuto principale della pagina che è l'oggetto che dev'essere reso. Nel Capitolo 6 abbiamo spiegato la differenza tra uno slot ed una macro; ricordiamo che un modello definisce gli slot che poi vengono riempiti dal contenuto. In realtà c'è un solo slot di qualche importanza per il contenuto, ed l'abbiamo detto molte volte: lo slot principale (main slot).

Una argomento comune in Plone che può generare confusione è come definire uno slot all’interno di un'altro slot (a riempimento). Per esempio, il seguente è la definizione per il css_slot:

<metal:cssslot fill-slot="css_slot">
    <!-- Uno slot dove si può inserire il CSS da un modello -->
    <metal:cssslot define-slot="css_slot" />
</metal:cssslot>

Questo tipo di schema sembra un pò strano, ma definisce lo slot e quindi ricrea lo slot a riempimento. Se guardiamo attentamente il modello principale, questi slot sono proprio nell'header use-macro, così la macro degli header può riempire questo slot. Ma vogliamo anche il modello finale per riempire lo slot, per questa ragione lo slot viene ridefinito. Questo vuol dire che uno slot può essere ora riempito in due posti che è una utile tecnica per modificare i modelli.

Continuando l'esame per il resto del modello principale, giungiamo alle colonne di sinistra e di destra, al piè di pagina ed al Colophon. Si noti che la colonna sinistra può apparire prima del contenuto principale di una pagina (peraltro, solo se la nostra lingua si legge da sinistra a destra), ma il foglio di stile la mette là. Questo assicura che se si visita il sito con un browser testuale, il contenuto principale appaia prima e non dopo tutte le opzioni di navigazione.

Tabella 7-3 Descrive le macro e gli slot del modello principale

Dotati di queste informazioni, ora cambiare l’aspetto della pagina è solo una questione di personalizzare le macro o gli slot. Si raccomanda nuovamente di non personalizzare realmente il modello principale di pagina stesso, ma di personalizzare invece le parti che vengono chiamate dal modello principale. La sezione successiva mostra alcuni esempi di personalizzazioni che è possibile fare a Plone.

Frammenti di personalizzazione

Le seguenti sezioni mostrano alcuni esempi che dimostrano delle semplici personalizzazioni che si possono fare al proprio sito Plone. Alcune soluzioni offrono uno o due modi diversi di effettuare lo stesso compito.

Rimuovere un Block

Un trucco abbastanza pulito è la possibilità di rimuovere facilmente un blocco dall'interfaccia utente come la barra degli indirizzi o il box di ricerca. Abbiamo due modi di farlo; il più ovvio è personalizzare la macro che visualizza l'elemento. Per esempio, per rimuovere le briciole, possiamo cliccare portal_skin, cliccare plone_template, cliccare global_pathbar e poi spegnere l'elemento (breadcrumbs) al livello del modello di pagina; per esempio, possiamo cambiare il codice che segue:

<div metal:define-macro="path_bar"
    id="pathBar"
    tal:define="breadcrumbs python:here.breadcrumbs(here);
        portal_url portal_url|here/portal_url">

quindi aggiungiamo le seguenti linee:

<div metal:define-macro="path_bar"
    id="portal-breadcrumbs"
    tal:condition="nothing"
    tal:define="breadcrumbs python:here.breadcrumbs(here);
        portal_url portal_url|here/portal_url">

Questo significa che personalizzare un modello di pagina non è proprio un problema e che da ora è un qualche cosa con la quale dobbiamo avere famigliarità. L'approccio lievemente diverso è la possibilità di nascondere elementi a livello CSS. Questo vuol dire che l'oggetto viene ancora reso e che l'HTML viene generato, ma che non viene dato ai client di chi non può vederlo. Siccome l'HTML viene ancora generato, questa non è la soluzione ottimale, ma è un bel trucco.

La maggior parte degli elementi Plone possiede un identificatore unico Document Object Model (DOM); che, per esempio, nel caso delle briciole è portal-breadcrumbs, come si può vedere nel codice precedente. Per bloccare la visualizzazione di portal-breadcrumbs, semplicemente aggiungiamo a ploneCustom.css le seguenti righe di codice:

#portal-breadcrumbs {
    display: none;
}

Cambiare le schede del portale

Abbiamo già mostrato come sia possibile cambiare il testo delle schede del portale cambiando le azioni. Sono visualizzate usando il foglio di stile, e non usando delle tabelle (anche se gli utenti possono pensare inizialmente così). Guardando alla Tabella 7-3, possiamo vedere che il codice per le schede del portale è in portalTabs. Per rendere punteggiato il bordo delle schede non selezionate, si può semplicemente cambiare il foglio di stile ploneCustom come segue:

#portal-globalnav li a {
    border: 1px dotted;
}

Le schede sono una serie elementi composti di elenchi puntati (li) e di ancore (an) HTML, così cambiando il CSS per questi elementi, possiamo cambiare l'aspetto delle schede. In un secondo tempo nella sezione Caso reale:  Esame dello Skin Nasa mostreremo come cambiare queste schede in immagini.

Mediante l’uso del CSS si può muovere l’ubicazione di qualsiasi elemento tramite l'attributo position. Successivamente, trasportiamo le nostre schede in cima allo schermo, sopra il logo ed il box di ricerca. Per fare questo, usiamo il valore assoluto della posizione che permette di definire la posizione usando gli attributi left, right, top e bottom. Aggiungiamo il seguente codice al nostro foglio di stile ploneCustom per posizionare le schede del portale in cima al nostro sito Plone:

#portal-globalnav {
  position: absolute;
  top: 0em;
}

Questa è una tecnica potente per muovere degli elementi. Ci sono più opzioni per posizionare gli elementi, incluso il posizionamento relativo ma quello richiede un po' di lavoro con il CSS per trovare il posizionamento corretto.

Muovere gli slot di sinistra e di destra

Abbiamo discusso degli slot di sinistra e di destra nel Capitolo 4, ed abbiamo mostrato come aggiungere un nuovo slot all'elenco degli slot. Abbiamo potuto anche notare che i termini left slot e right slot possono essere un po' fuorvianti. L'opzione predefinita è mostrare gli slot in quelle posizioni, ma è facile spostarli.

Per esempio, se volessimo trasportare la portlet sinistra sul lato destro della pagina, allora potremmo fare questo cambiando ploneCustom.css come segue:

#portal-column-one  {
    float: right;
}
#portal-column-content {
    float: left;
}

Questo trasporta la colonna più a sinistra sul lato destro e spinge la sezione principale alla sinistra.

Nascondere l'aiuto dei moduli

Se volessimo nascondere l'aiuto in tutti i moduli,sicuramente non vorremmo cambiare tutti i modelli. Ma potremmo assumere una tattica simile al nascondere la barra degli indirizzi ed impostare solo display:none negli elementi del modulo. Il codice seguente ha l'effetto desiderato di non mettere l'elemento in ingresso su una nuova riga:

div.formHelp {
    display: none;
}

La Figura 7-9 mostra la pagina di feedback senza le briciole, con l'aiuto nascosto, con le schede punteggiate e con lo slot di sinistra messo sulla destra della pagina, il tutto modificato con solo poche linee di CSS.

Figura 7-9. L'effetto combinato di alcuni degli esempi

Come cercare l’elemento X?

Come abbiamo mostrato, i modelli, gli script, e le immagini contenute nelle cartelle skin di una installazione Plone creano uno skin Plone. In questa cartella ci sono molti file, cosicché navigare attraverso ogni file sarebbe lungo e controproducente quando questi file vengono modificati. Risulta invece utile per capire le tecniche di base per trovare gli elementi che si vogliono modificare.

Si tenga presente a quale livello si vuole personalizzare l'elemento. Come precedentemente notato, abbiamo tre livelli per visualizzare un oggetto. Se vogliamo cambiare la rappresentazione visiva o la sua posizione, allora si può cambiare il CSS e non occorre fare ulteriore lavoro.

Se il CSS non è sufficiente, allora la successiva migliore mossa sarà fare una ricerca nei modelli. Per esempio, supponiamo di voler cambiare il testo che viene mostrato sulla pagina quando un utente si registra, o di voler cambiare l’intera pagina. In questo esempio, modifichiamo la pagina mostrata nella Figura 7-10 e lo fa uno script che fa qualche cosa di insolito.

Figura 7-10. La pagina " Benvenuto! Ora sei connesso."

Ci sono alcuni indizi per trovare questo modello per poi poterlo modificare; li proveremo subito, uno ad uno.

Cercare usando l'URL

L'URL di una pagina (Uniform Resource Locator) si traduce in una serie di oggetti di Plone che vengono attraversati. Nella Figura 7-10, abbiamo attraversato fino alla pagina login_success. In questo caso, la parte finale dell'URL è login_success, come si può vedere nella barra degli indirizzi in figura 7-10. Quando un oggetto è caricato in un FSDV, l’estensione viene eliminata, così da cercare un modello o uno script che inizi con login_success.

Figura 7-11. Cercare un ID

In Zope è possibile effettuare questa ricerca con lo strumento portal_skin e cliccando la scheda Find. Una volta là, digitare login_success nel campo with ids. Lasciare inalterate tutte le altre impostazioni, e cliccare il pulsante Find. Sicuramente troveremo il modello login_success.

Si può fare questa ricerca anche nel File System, in funzione del proprio sistema operativo e degli strumenti disponibili. Il modo più rapido di trovare questo file in Linux è posizionarsi nella nostra cartella CMFPlone e fare come segue:

$ cd skins
$ find -name 'login_success*' -print
./plone_forms/login_success.pt

In Windows, si apra la cartella CMFPlone con Windows Explorer e poi si clicchi sulla scheda Search. Poi inserire il nome del file login_success e cliccare Search. Questo dovrebbe fornire un elenco di file simili.

Questa ricerca dovrebbe dare come risultato CMFPlone/plone_forms/login_success.pt. Se si fa la stessa ricerca nella ZMI,  cliccare portal_skin, cliccare plone_forms e quindi cliccare login_success.

Cercare un pezzo di testo

Un approccio piuttosto grezzo che qualche volta ha successo è fare una ricerca a pieno testo nel codice per localizzare l'elemento che visualizza la pagina. Per esempio, osservando la pagina in figura 7-12, si può vedere che contiene il testo Notice that the top. Il modo più semplice di trovare i bit che visualizzano quel testo è cercarlo.

Figura 7-12. Cercare testo

In Zope è possibile anche effettuare questa ricerca con lo strumento portal_skin cliccando sulla scheda Find. Una volta là, inserire Notice that the top (il testo che vogliamo cercare - n.d.t.) nel campo containing. Lasciare invariate tutte la altre impostazioni, e cliccare il pulsante Find. Sicuramente troveremo il modello login_success.

Possiamo operare la stessa ricerca anche nel File System, in funzione del nostro sistema operativo e degli strumenti disponibili. Il modo più rapido di trovare questo file in Linux è posizionarsi nella nostra directory CMFPlone e fare come segue:

$ grep -ri "Notice that the top" *
plone_forms/login_success.pt: Notice that the top

In Windows, aprire la cartella CMFPlone con Windows Explorer e cliccare la scheda Search. Poi digitare i contenuti del file come Notice that the top (il testo che vogliamo cercare - n.d.t.), e cliccare Search. Questo dovrebbe dare un elenco di file simili. Usando questa tecnica piuttosto grezza, abbiamo trovato un modello, login_success, che visualizza il messaggio di ritorno all'utente.

Questa tecnica ha i seguenti problemi:

• Cura del contenuto in caratteri minuscoli nel CSS; fare sempre le ricerche in modalità case insensitive (predefinito in Windows). E’ irritatamente cercare home quando nel modello c'è Home e nel CSS è in caratteri minuscoli.
• Se si sta cercando di farlo in un linguaggio diverso dall'inglese, il contenuto potrebbe essere localizzato e causare così il fallimento della ricerca.
• Occasionalmente potrebbe non esserci testo ricercabile che corrisponda; in questo caso, l'approccio raccomandato è di ricercare tramite l'URL.

Realizzare un nuovo skin

Come abbiamo visto, uno skin in realtà non è nulla di più di una raccolta di livelli. Per un nuovo skin, vogliamo mettere tutto il nostro codice personalizzato in un solo luogo, così andiamo nello strumento portal_skin, aggiungiamo una nuovo contenitore, e gli diamo l'ID custom_chrome.

Quindi, per aggiungere un nuovo skin, dobbiamo cliccare su portal_skin, selezionare la scheda Properties, ed aggiungere un nuovo skin sotto il testo Add a new skin. Abbiamo bisogno di inserire una serie di livelli che vogliamo preparare per questo skin. In questo esempio, abbiamo aggiunto un nuovo skin chiamato Custom Chrome ed una serie di livelli, come mostrato in Figura 7-13.

Figura 7-13. Aggiungere lo skin Custom Chrome

Quindi abbiamo aggiunto i livelli per lo skin. In questo caso, lo skin non ha in sé un livello denominato custom; invece ha una cartella chiamata custom_chrome. Abbiamo quindi due diversi skin che usano due livelli e due cartelle. Qualsiasi oggetto aggiunto alla cartella custom_chrome riguarda quello skin, non lo skin predefinito Plone Default.

Usare Skin multipli

Come abbiamo già menzionato, un sito Plone standard possiede due skin, Plone Default e Plone Tableless. Nella sezione precedente, abbiamo aggiunto un nuovo skin, Custom Chrome. Come abbiamo discusso nel Capitolo 4, è possibile impostare lo skin predefinito usando l'interfaccia Plone. Cliccare configurazione di plone, e poi cliccare il pulsante Skin. Questo rispecchia le opzioni disponibili nella ZMI dopo avere cliccato portal_skin, selezionato la scheda Properties, ed essere andati in fondo alla pagina.

Inoltre abbiamo un’ulteriore scelta: REQUEST *nome variabile*. Questa è la variabile richiesta che conterrà le informazioni dello skin dell'utente. Il valore predefinito è plone_skin che è il nome del cookie. Ma potrebbe essere passato anche tramite altre variabili di richiesta come una (stringa) query. È disponibile solo dalla ZMI.

È inoltre possibile impostare skin programmaticamente. Questo consente agli sviluppatori di mostrare skin diversi ad utenti differenti in base a logiche di affari o del sito. Per esempio, se un utente sta scrivendo contenuto per un sito, potrebbe vedere lo skin standard di Plone. Se invece è un utente anonimo, allora potrebbe vedere uno skin totalmente diverso. Piuttosto che lasciare scegliere all'utente, che sia il sito a prendere questa decisione. Se proprio si vuole, si può basare la scelta dello skin sulla cartella a cui si sta accedendo; comunque questo approccio potrebbe portare in confusione, così non lo raccomandiamo.

Per cambiare lo skin, aggiungiamo un oggetto Script (Python) chiamato setSkin alla radice del nostro sito Plone. Poi aggiungiamo il codice seguente:

##title=Skin changing script
##parameters=
req = context.REQUEST
if req['SERVER_URL'].find('internal.somesite.org') > -1:
    context.changeSkin("Plone Default")
context.changeSkin("Custom Chrome")

La vera logica per determinare lo skin dipende dalle regole di affari del sito. In questo caso chiunque acceda a http://internal.somesite.org otterrà lo skin predefinito di Plone, e chiunque acceda a http://external.somesite.org visualizzerà lo skin Custom Chrome. Sfortunatamente, un inconveniente è che non si può determinare lo skin in funzione del livello di sicurezza dell'utente (per esempio, gli utenti autenticati che vedono uno skin ed i manager un’altro). Questa funzionalità piuttosto banale non è ancora disponibile attualmente, senza un pesante hacking del sito Plone.

Per attivare questo codice, assegnamo una regola di accesso a questo oggetto. Questo vuol dire che ogni volta che vi sarà un accesso a questo sito Plone, questo script (Python) verrà eseguito. Ogni volta che lo script viene lanciato lo skin verrà impostato in base allo script. Per assegnare una regola a questo script, selezionare dal menu a cascata Set Access Rule e quindi inserire il nome del nostro oggetto Script (Python). Ora proviamolo visitando il sito, e vediamo quale skin otteniamo.

Dobbiamo stare attenti con le regole di accesso perché vengono eseguite su ogni chiamata di quella cartella (o del sito Plone); dobbiamo assicurare che siano corrette e che non possa avvenire qualcosa di dannoso. Se abbiamo scritto accidentalmente un oggetto Script (Python) brutto o scorretto e non riusciamo a riavere accesso neppure tramite la ZMI per ripararlo, allora possiamo togliere le regole di accesso riavviando Plone con la seguente variabile di ambiente:

SUPPRESS_ACCESSRULE = 1

L’ Appendice B spiega come utilizzare le variabili di ambiente quando non si è famigliari con questo processo.

Realizzare un nuovo skin nel File System

In tutti questi capitoli stiamo usando la ZMI. Ma quello che gli sviluppatori di Plone usano di più per qualsiasi lavoro serio è il File System. Realizzare uno skin nel File System è davvero facile.

Andiamo nella cartella home dell’istanza della nostra installazione Plone. All’interno della directory Products, creiamo una nuova cartella; il nome di questa cartella è il nome del prodotto, così per convenzione è qualche cosa di breve, senza spazi o sottolineature o lettere maiuscole e minuscole mescolate. PloneBookExample, CMFPlone, e PloneSilverCity sono degli esempi. In questa cartella , creiamo un nuovo file chiamato __init__.py ed una cartella denominata skins. Nel file __init__.py, dobbiamo aggiungere le due linee seguenti:

from Products.CMFCore import DirectoryView
DirectoryView.registerDirectory('skins', globals())

Successivamente, riavviamo Plone, e poi clicchiamo su portal_skin per aggiungere un FSDV. Ciò apre un elenco di cartelle registrate. Muoviamoci in giù finché troviamo quello che corrisponde alla cartella che abbiamo registrato; questo sarà il nome della directory con /skin alla fine. Inseriamo un ID che abbia senso, e clicchiamo Add. Ora abbiamo una cartella vuota dove poter aggiungere i livelli del nostro skin.

Eseguire il debug di uno Skin

Un'altra ragione per cui abbiamo usato ripetutamente la ZMI, piuttosto che il File System è che quella restituisce gli errori e che è comoda per collocare oggetti all’interno di altri. Un'ulteriore caratteristica positiva dell’uso della ZMI è che i cambiamenti sono immediati. Se si cambia un oggetto e poi si aggiorna, immediatamente si vedono i cambiamenti (presumendo che non usiamo la cache).

Questo non avviene con il File System. Se si cambia qualche cosa nel File System, questo non viene aggiornato in Plone. Questo per ragioni di prestazioni. Plone non ha alcun modo di sapere che abbiamo fatto quelche cambiamento, e deve aggiornare la copia di quel oggetto nella cache di Zope. Senza entrare nei meccanismi del sistema di notifica dei file, un sito Plone ha due stati: modalità di produzione e modalità debug. Quando  Plone è in modalità di debug, controlla tutte le cartelle, trova i file che sono stati cambiati, e quindi aggiorna  Plone. Questo significa che si può fare un cambiamento, ed immediatamente sarà visualizzato. Invece, quando viene eseguito in modalità di produzione, non si vedono le modifiche fatte finché non si aggiorna lo skin (si veda il Capitolo 11) o si riavvia Zope.

Per ragioni ovvie, se si sta sviluppando uno skin Plone, eseguire in modalità di debug è quindi il modo migliore. Nel Capitolo 2 abbiamo mostrato come cambiare la configurazione di Plone per eseguirlo in modalità debug. Come veloce riepilogo, apriamo il file zope.conf all’interno della cartella etc della nostra installazione ed assicuriamoci che la direttiva debug-mode sia impostata ad on.

Usare oggetti nel File System

I FSDV permettono di mappare solamente quegli oggetti Zope che specificamente sono stati configurati per essere usati in questa modo. Determinano gli oggetti Zope basandosi sull’estensione del nome del file. I contenuti di questo file sono i contenuti di un attributo dell'oggetto, di solito il contenuto principale, come i contenuti binari di un'immagine o il testo contenuto nel modello.

Per creare un oggetto nel nostro FSDV vuoto, andiamo semplicemente nella cartella dello skin ed iniziamo aggiungendo i file che corrispondono agli oggetti che vogliamo creare. Una volta che il file è caricato in Zope come oggetto Zope, quell’estensione viene eliminata. Per esempio, some_template.pt diventa un modello di pagina nel File System con l'ID some_template. La Tabella 7-4 descrive le estensioni.

Tabella 7-4. Estensioni

Quindi, per trovare un'immagine nella nostra cartella, vediamo i file .gif o .jpeg. Per cercare un oggetto Script (Python), aggiungiamo quindi un file che termini con .py.

Impostare i metadati degli oggetti del File System

I contenuti extra di un oggetto come titolo, sicurezza o cache sono conservati in un file separato. Questo file ha lo stesso nome del file originale, con aggiunto alla fine .metadata. Se il file originale è, per esempio, logo.jpg, allora i metadati saranno contenuti nel file logo.jpg.metadata.

Il file dei metadati è nel formato .ini di Windows con coppie chiave = valore. Questo formato è stato esteso per contenere informazioni su moduli per l'oggetto Form Controller che vedremo nella prossima sezione. Tutte le opzioni, anche la presenza di questo file, sono opzionali. Il seguente è un esempio del file:

[default]
title = Test object
cache = RAMCache
proxy = Manager
 
[security]
Access contents information = 1:Manager,Anonymous

Quelli che seguono sono i valori che possono essere impostati in questo file:

title

Questo è il titolo applicato all'oggetto nella ZMI di Plone; questo verrà mostrato nei modelli di Plone.

cache

Questo è l'ID dell'oggetto cache nel quale si vuole che l'oggetto sia tenuto (in cache). Per default Plone viene fornito con due oggetti per la cache:  una gestione della cache RAM (RAM Cache Manager) ed una gestione della cache HTTP (HTTP Cache Manager). Il Capitolo 14 tratta la funzione di questi due oggetti.

proxy

Questo è il ruolo proxy che si vuole applicare a questo oggetto. Si veda il Capitolo 9 per ulteriori informazioni.

security

Questa è l'area della sicurezza che permette l'impostazione di più linee. La chiave contiene il nome del permesso. Il lato destro contiene le impostazioni dell'acquisizione, seguito dai ruoli separati da virgole. Per esempio, View = 0:Manager significa che solamente gli utenti con i ruoli di member e di manager possono vedere un oggetto, e che le impostazioni di sicurezza non sono acquisite per quel permesso.

Usare validatori nel File System

Per specificare validatori nel File System, si aggiunga il volore validator al file  .metadata. La sezione validator del file .metadata dovrebbe essere come questa:

[validators]
validators = validate_script1, validate_script2

Questo eseguirà i due script di validazione: validate_script1 e validate_script2, in questo ordine. Uno script di validazione esaminerà i dati e, se c'è un problema, aggiungerà errori al modulo controller state.

I contextType e le opzioni button hanno bisogno di una sintassi lievemente diversa. Validazioni sono eseguite sul contesto che viene eseguito, per esempio un documento o una immagine.  Potremmo avere due differenti validazioni da eseguire una per il documento ed una per l'immagine. Per esempio, per avere un diverso script di validazione da eseguire quando questo è invocato come un documento, si aggiunga la linea seguente:

validators.Document = validate_script2

Possiamo variare la validazione in base al pulsante cliccato sul modulo aggiungendo il nome del pulsante nel modulo al lato sinistro del validatore. Il nome del pulsante deve cominciare con form.button. Per esempio:

<input type="submit" name="form.button.button1" value="First" />

Il file metadata dovrà allora somigliare al seguente:

validators..button1 = validate_script1

I .. sono uno spazio per il tipo di contenuto, cosicché se, come in precedenza, vogliamo che questo accada per button1 su un documento, allora il file dei metadati dovrà essere come segue:

validators.Document.button1 = validate_script5

Usare le azioni nel File System

Come per i validatori,  possiamo specificare anche azioni nel file .metadata. La sintassi per la sezione delle azioni del nostro file dovrebbe somigliare a questa:

[actions] action.success = traverse_to:string:script1

Nell'esempio precedente, quando il modulo è inviato e gli script di validazione ritornano con uno stato success, l'attraversamento dell'azione viene chiamato con l’argomento string:script1. Tale argomento è in realtà un'espressione. L'azione predefinita per lo stato failure è di ricaricare il modulo corrente. Il modulo avrà accesso a tutti i messaggi di errore tramite l’oggetto state nelle sue opzioni.

Di nuovo, possiamo specificare una particolare azione in un particolare contesto; per esempio, per specificare un'azione di successo quando si è su un documento, possiamo fare come segue:

action.success.Documnent = traverse_to:string:document_script

Di nuovo è possibile specificare l'azione per il pulsante come segue

<input type="submit" name="form.button.button1" value="Button" />

aggiungendo il seguente codice al file .metadata:

action.success..button1 = traverse_to:string:script1

In questo esempio non abbiamo alcun contesto esplicito, quindi è valido per qualsiasi tipo di contesto.

Rimuovere le portlet ed alcuni degli elementi principali

Il sito non ha portlet. Sono stati rimossi perché in questo sito nessuno di loro è utile. Invece, le notizie appaiono sulla pagina iniziale. Per rimuovere queste portlet dal nostro sito, andiamo alla radice del sito Plone e clicchiamo Properties. Nei campi del modulo cancelliamo tutti i valori vicino a left_slots ed a right_slots.

Nel sito di Maestro, sono stati rimossi alcuni elementi. Alcune volte abbiamo trovato che questa sia la migliore cosa da fare per le caratteristiche che non sono necessarie in un sito. Può essere un poco faticoso restringere ogni elemento dell’interfaccia utente di un sito Plone, ma in realtà non dobbiamo farlo sempre; invece, rimuoviamo solamente gli elementi dei quali non abbiamo bisogno. Alcuni elementi qui sono stati rimossi: le azioni del sito, il box di ricerca, il piè pagina, ed il Colophon.

Per terminare, quei modelli che producono il codice furono personalizzati, e poi modificati così che non visualizzassero nulla. Per esempio, per rimuovere il box di ricerca, nella ZMI cliccare su portal_skin, cliccare plone_template, e quindi cliccare global_searchbox. Successivamente, cliccare il pulsante Customize. Poi modificate il modello come segue:

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en"
    i18n:domain="plone">
    <body>
 
        <div id="portal-searchbox"
               metal:define-macro="quick_search"
               tal:condition="nothing">
            Nothing to see here.
        </div>
    </body>
</html>

Questa è la tecnica che abbiamo mostrato precedentemente per rimuovere gli elementi; impostare solamente tal:condition sull'elemento macro per assicurare che la condizione sia a false.

Personalizzare i colori

Impostare i colori di base del sito nell'oggetto base_properties. Questo oggetto è stato personalizzato, ed i colori cambiati con i seguenti colori (se non menzionati, gli altri elementi sono immutati):

linkColor: #776a44
globalBorderColor: #776a44
globalBackgroundColor: #e0d3ad
globalFontColor: #776a44

Il cambiamento di colore più evidente è il globalBackgroundColor, che interessa i colori della barra personale e che è stato cambiato da blu a marroncino. Queste modifiche minori ai colori modificheranno il foglio di stile cosicché corrisponderà esattamente alle immagini ed all’aspetto complessivo e sembrerà grazioso.

Creare il foglio di stile

La gran parte di questo sito è il foglio di stile che è riportato interamente nell’`Appendice B`_. Qui esaminiamo alcune delle parti principali del foglio di stile. Questo foglio di stile è basato su ploneCustom.css che è stato personalizzato nella cartella custom. Poi, alcuni degli elementi della pagina web, sono stati sovrascritti nel nuovo file ploneCustom.css.

Primo, l’intero sfondo per il corpo è impostato al colore #343434.

body {
    background: #343434;
}

Secondo, il reale contenuto di una pagina Plone, la parte che può essere modificata è contenuta all’interno di una classe chiamata documentContent. Siccome il colore di sfondo dell'elemento documentContent è impostato a bianco nel file principale plone.css, lo sfondo del testo è bianco e forma l’area bianca nel mezzo dello schermo.

Quindi, l'immagine del satellite ed il robot in alto nel sito web è una immagine grande. Si può posizionare in cima usando il CSS. Il codice per farlo è il seguente:

#portal-top {
   background: url("http://mars.telascience.org/header.jpg") transparent no-repeat;
   padding: 162px 0 0 0;
   position: relative;
}

Questo codice CSS imposta i parametri per l’elemento che ha l'ID portal-top. Se si guarda il codice HTML di un sito Plone, si vede l'elemento portal-top in cima alla pagina, giusto sotto l'elemento body. Impostando lo sfondo per quell'immagine all'URL dell'immagine in questione, si può ottenere la visualizzazione dell'immagine. L'immagine è alta 162 pixel, e questo è il motivo perché il padding per la cima dell’elemento #portal-top è impostato a 162px. Se non si fa questo, allora tutti gli elementi sottostanti saranno spinti su, e si sovrapporranno all'immagine.

L'immagine di testa è larga 677 pixel, e si noterà che il testo nella pagina va a riempire in modo pulito il sotto dell'immagine, piuttosto che spuntar fuori a sinistra o a destra. È possibile fare ciò impostando il valore dell'elemento a 680px. L’elemento HTML visual-portal-wrapper è attualmente giusto sotto il body, e pone l'ampiezza per l’intero corpo pagina. Il codice di questo è il seguente:

#visual-portal-wrapper {
   width: 680px;
   margin: 1em auto 0 auto;
}

Questo imposta l'ampiezza fissa per tutte le pagine, che sta bene finché ci si assicura che l'ampiezza sia più piccola dell'ampiezza dello standard industriale di 800 punti. Nessuna problema per come l’utente renda grande la finestra del browser, la parte principale della pagina non crescerà mai oltre quei 680 punti, assicurando che corrisponda gradevolmente all'immagine.

Probabilmente le altre ovvie modifiche sono le schede in alto nella pagina che ora sono immagini invece dei soliti box standard di Plone. Tre immagini formano le schede in cima alla pagina:  uno spazio fra le schede, la parte sinistra della scheda, e la parte destra della scheda. Mettendo insieme queste tre immagini, si ottiene l'effetto della scheda. La Figura 7-15 mostra queste tre immagini.

Figura 7-15. Le tre immagini che combinandosi formano la tab

Per modificare il CSS, si ricordi che ciascuna delle schede è in realtà un elemento di elenco contenente all’interno un elemento con l'ID portale-globalnav. Per impostare lo spazio di sfondo fra ciascuna scheda, lo skin prima imposta lo sfondo per l'intero elemento. Di nuovo, si noti che mettendo l'altezza dell'immagine a 21 pixel, l’identica dimensione dell'immagine, abbiamo assicurato che ci sia lo spazio adatto per l'immagine. Il codice è il seguente:

#portal-globalnav {
    background: url("http://mars.telascience.org/listspacer.gif") transparent;
    padding: 0;
    height: 21px;
    border: 0;
    margin: 0 0 1px 6px;
    clear: both;
}

Per impostare l'immagine sulla sinistra in fondo della scheda, usare l'immagine iniziale. Impostare l'immagine iniziale ponendo il valore nell'elemento li, piuttosto che nell'elemento anchor in questo modo:

#portal-globalnav li {
   display: block;
   float: left;
   height: 21px;
   background: url("/liststart.gif") transparent no-repeat;
   padding: 0 0 0 33px;
   margin: 0 0.5em 0 0;
}

Finalmente, impostare la parte destra della scheda aggiungendo un'immagine all'elemento anchor. Per fare questo modificare l'elemento anchor all’interno della scheda. Il codice seguente mostra dove si imposta l'immagine di background perché sia la parte destra:

#portal-globalnav li a {
    display: block;
    float: left;
    height: 21px;
    background: url("/listitem.gif") transparent right top;
    padding: 0 33px 0 0;
    border: 0;
    line-height: 2em;
    color: black;
    font-size: 90%;
    margin: 0;
}

Ora, abbiamo sostituito a sufficenza l’aspetto standard delle schede Plone con pulsanti great-looking.

Creare la pagina Splash

Questa pagina ha un altro elemento chiave. La pagina frontale del sito è una pagina splash che mostra un bel grafico ed invita l'utente ad entrare. Possiamo aggiungere questo andando nella ZMI e rimuovendo l'oggetto index_html che normalmente è là. Una volta rimosso, creiamo un nuovo file chiamato index_html. In questo file, mettiamo del codice personalizzato per realizzare la pagina iniziale, incluso un CSS personalizzato. L'elemento principale è un'immagine, posta qui dal seguente CSS:

div {
    background: url(/splash.jpg) transparent no-repeat;
    width: 260px;
    height: 335px;
    position: absolute;
    ...
}

Il rimanente CSS gestisce la posizione del testo ed i collegamenti all'interno di quell'immagine. Questa pagina non ha alcun elemento Plone; è HTML statico.

Conclusioni

Questo appare come un sito ragionevolmente complesso, con un CSS relativamente semplice che fa la maggior parte del lavoro duro. Usando il CSS`` abbiamo cambiato l'aspetto di Plone senza aver una grande conoscenza di Plone oltre l’ ``HTML . Inoltre, assicurando che le immagini siano posizionate usando il CSS, abbiamo conservato le funzioni fondamentali di accessibilità.

Grazie alla Nasa ed a tutte le persone della comunità Plone coinvolte per l’aiuto dato a questo sito e caso di studio. Questi ringraziamenti includono ma non sono limitati solamente a John Graham, Alma Ong, Joe Geldart, Michael Zeltner, e Tom Croucher.