Cambiare il logo in Plone3

2.Cambiare il portal_logo style

Non ci sono stili per impostare #portal-logo, ma ce ne sono alcuni per #portal-logo img in basic.css. Usa l'estensione Firebug per Firefox per trovarli. L'approcio più semplice è di ignorarli e usare i propri stili in ploneCustom.css.

• Va alla Zope Management Interface (Site Setup > Zope Management Interface)
• Assicurarsi di avere attivato la modalità di debug nel registro CSS (portal_css)
• Clicca su portal_skins > plone_styles > ploneCustom.css and poi sul pulsante Personalizza
  
• Ora avrai una versione modificabile di ploneCustom.css nella cartella personalizzata in portal_skins
• Aggiungi qui i tuoi stili, clicca su Salva, e aggiornare il tuo browser per vedere i cambiamenti.

3. Cambiare il codice HTML

Il codice HTML per il logo è generato da logo.pt - un modello di pagina che fa parte di una viewlet chiamata plone.logo. Per personalizzare questo attraverso il web, devi utilizzare portal_view_customizations.

• Va alla portal_view_customizations in Zope Management Interface (Site Setup > Zope Management Interface)

• Clicca su plone.logo e poi sul pulsante Personalizza
  
• Ora avrai un template che si può riscrivere - abbiamo evidenziato i bits più importanti nella sezione teorica qui sotto dando un paio di esempi per iniziare.
•  Salva le modifiche e aggiorna il tuo browser per vederle.

Note: se desideri tornare indietro e apportare ulteriori modifiche successivamente, vedrai che il plone.logo è evidenziato nella lista portal_view_customizations, cliccare su di esso per modificarlo. Se desideri rimuovere completamente le tue modifiche, utilizza il contents tab di portal_view_customizations, spunta la casella accanto al tuo modello e fai clic su Elimina.

Ecco il modello logo.pt. E 'scritto nella lingua di template usata da Plone - TAL (o ZPT) e non richiede molto tempo per imparare, eccone un esempio:

<a metal:define-macro="portal_logo"
   id="portal-logo"
   accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone">
    <img src="logo.jpg" alt=""
         tal:replace="structure view/logo_tag" />
</a>

In primo luogo abbiamo il link tag:

Puoi ignorare metal:define-macro="portal_logo"  questo è solo confezionare il codice in qualcosa che può essere riutilizzato di nuovo se necessario.

Il bit importante è tal:attributes="href view/navigation_root_url", questo è il codice che fornisce l'URL del tuo sito per l'attributo href.

C'è una variabile magica qui, view/navigation_root_url, che sembra essere apparsa dal nulla. In realtà, view è una raccolta di proprietà calcolata dalla viewlet plone.logo e perfettamente passata al modello logo.pt. Qui ci sono le proprietà disponibili:

navigation_root_url

fornisce l'URL del tuo sito (potrebbe potenzialmente essere qualcosa di diverso, se hai impostato una diversa root di navigazione)

logo_tag

cerca il nome del logo da base_properties, trova l'immagine, raccoglie le sue dimensioni e il titolo e trasforma tutto questo in un tag di immagine HTML con gli attributi appropriati (controlla l'approccio alternativo del punto 1 della presente guida per i più informazioni su base_properties)

portal_title

cerca e fornisce il titolo del tuo sito

Ora guarda il tag dell'immagine nel template.

La chiave è tal:replace="structure view/logo_tag". Ciò significa che il modello non accetta il tag dell'immagine scritto qui, invece, sostituirà il tutto con il tag generato dal plone.logo viewlet. Se non desideri che questo accada, devi cancellare questa riga.

Nota: la structure significa trattare il valore come HTML piuttosto che come una stringa di testo.

Esempio 1: Un titolo di testo

<h1 metal:define-macro="portal_logo"
   id="portal-logo">
   <a accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone" tal:content="view/portal_title">
    </a>
</h1>

Naturalmente dovrai fornire il tuo stile, guarda la Sezione 2 di questa guida per informazioni sulla definizione di questi ploneCustom.css. È possibile modificare questo esempio utilizzando un'immagine accessibile nel CSS.

Esempio 2: Fornire i propri tag d'immagine

Non è necessario usare logo_tag se non vuoi:

<a metal:define-macro="portal_logo"
   id="portal-logo"
   accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone">
    <img src="[My logo ID]" alt="[My Logo]"
         width="[My Width]" height="[My Height]" 
         tal:attributes="title view/portal_title" />
</a>

Naturalmente, hai bisogno di caricare il tuo logo personalizzato nella cartella portal_skins, vedi le istruzioni nella Sezione 1 di questa guida.

Federica Pavanelli  -  RedTurtle Technology