Supporto volontario e collaborativo per Joomla!® in italiano

Esempio di layout alternativo per il singolo contatto

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
La scheda di un singolo contatto di Joomla dal punto di vista grafico non è molto curata, vediamo oggi un esempio di come è possibile migliorare la pagina creando un layout alternativo...

Se creiamo un contatto e nella voce di menu impostiamo il parametro Visualizza formato su Esteso, la pagina di default di Joomla con template Protostar si presenta in questo modo:





Come vedete ci sono molti spazi vuoti, alcuni titoli superflui (Informazioni sul contatto, Modulo contatti e Altre informazioni), le icone sono superate e l'indirizzo risulta incolonnato, allungando inutilmente la pagina.
Per intervenire su questa pagina possiamo creare un override del template, che andrà ad influire su tutti i contatti del sito, oppure creare un layout alternativo, come nel nostro esempio.

Creare un layout alternativo


Come abbiamo già visto in questo articolo per creare un layout alternativo dobbiamo copiare i file dalla cartella components/com_contact/views/contact/tmpl/ e inserirli nella cartella html/com_contact/contact/ del nostro template. I file vanno rinominati sostituendo la parola default, ad esempio in questo modo:

- scheda-contatto.php
- scheda-contatto_address.php
- scheda-contatto_articles.php
- scheda-contatto_form.php
- scheda-contatto_links.php
- scheda-contatto_profile.php
 
Per comodità, potete trovare i file dell'override utilizzato in questo esempio nei download della community. La versione di Joomla utilizzata è la 3.6.5, quindi per versioni successive l'override andrà modificato se i relativi file verranno aggiornati.
Assegniamo questo layout al singolo contatto, selezionandolo nel parametro Layout alternativo presente nel tab Visualizzazione del singolo contatto:






Per modificare l'indirizzo del contatto apriamo il file scheda-contatto_address.php. Qui possiamo spostare le varie parti di codice che si riferiscono alla città, al postcode, alla nazione, ecc... a nostro piacimento.
Nel mio esempio ho fatto in modo che l'indirizzo risultasse più compatto, mettendo sulla stessa riga il CAP, la città, la provincia e la nazione.
Successivamente ho cambiato le icone con le Icomoon disponibili con il template Protostar (in questo articolo potete trovare tutte quelle disponibili e imparare ad utilizzarle) e ne ho aggiunta una nuova per il Sito web del contatto (icon-earth), che non aveva icona assegnata, per questo nel pacchetto scaricato troverete anche la cartella fonts.
Ho messo sulla stessa riga anche i numeri di telefono e fax, ma in questo caso risultavano troppo vicini, così li ho distanziati tramite css, creando il file user.css, che va inserito nella cartella css del template.
Questo il risultato ottenuto:




NB: nell'esempio è necessario inserire il numero di telefono perchè appaia l'intera riga.
Da notare anche che ora i numeri di telefono sono cliccabili, funzionalità utile da tablet per poterli chiamare direttamente.

Ho anche rinominato la classe del dl della tabella da dl-horizontal a dl-horizontal-custom per poter eliminare lo spazio vuoto a sinistra.

Fatto questo passiamo alla modifica della parte superiore, modificando il file scheda-contatto.php
In questo caso ho spostato la parte di codice che visualizza le Informazioni varie del contatto a fianco dell'immagine del contatto inserendo il tag blockquote, in modo che sembri una citazione del contatto stesso.
All'immagine ho applicato una classe css che la taglia in modo circolare. Importante in questo caso inserire immagini quadrate per ottenere un cerchio, altrimenti verranno ovali.

Anche in questo caso ho rinominato la classe del dl della tabella da dl-horizontal a dl-horizontal-custom per poter eliminare lo spazio vuoto a sinistra.

Sempre in questo file ho eliminato il codice che visualizza i titoli "Informazioni sul contatto"

<?php echo '<h3>' . JText::_('COM_CONTACT_DETAILS') . '</h3>'; ?>

<?php echo '<h3>' . JText::_('COM_CONTACT_EMAIL_FORM') . '</h3>'; ?>

<?php echo '<h3>' . JText::_('COM_CONTACT_OTHER_INFORMATION') . '</h3>'; ?>

Con le modifiche apportate il nuovo layout della pagina è il seguente:



Queste modifiche avranno effetto solo sui contatti che hanno questo layout assegnato e, importante, devono essere in modalità estesa, non con formato tab o slide.
Ricordatevi che questo layout vale per la versione 3.6.5 di Joomla, per le prossime versioni, nel caso in cui questi file facciano parte dell'aggiornamento, è opportuno riportare le modifiche nel layout alternativo.

 

CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.7.5 Stabile Italiana
Data di rilascio: 17 Agosto 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: