Supporto volontario e collaborativo per Joomla!® in italiano

Lievi personalizzazioni dei template con T3 framework

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
t3

Uno dei vantaggi di joomla rispetto ad altri cms è sempre stata la facilità di personalizzazione dei template.

L'evoluzione degli strumenti di sviluppo (html 5, css3, bootstrap, javascript etc.) ha reso sempre più valida questa affermazione anche per il ricorso a specifici framework che ne hanno ottimizzato l'uso.

Oggi è infatti possibile conseguire - in tempi ragionevoli - eccellenti risultati nella creazione, modifica e personalizzazione di template anche molto strutturati, ma la maggiore complessità degli strumenti a disposizione potrebbe - nei casi più semplici - favorire il ricorso a soluzioni "pronte" da parte di chi si accontenta di un risultato non completamente originale.

 

 

In questa sede si vuole mettere invece in evidenza come - con l’adozione di alcuni, tra l'altro già ben noti, accorgimenti - sia possibile apportare agevolmente modifiche a template a struttura piuttosto semplice anche utilizzando uno dei framework oggi disponibili.

I framework

Alcuni tra i più noti frameworks sono:

Gantry :

disponibile ormai da alcuni anni, dall'applicazione molto intuitiva, con un elevatissimo numero di opzioni di personalizzazione.

Recentemente è stato completamente rivisto e migliorato (vedi RocketTheme rilascia la versione 5.0 di Gantry) e il fatto di essere stato scelto da joomla.it per la stesura del templare joomla estesa è abbastanza eloquente.

Nel sito ufficiale http://gantry.org/ sono disponibili i file di installazione e la documentazione.

Per le finalità del presente lavoro è molto utile consultare  l’articolo Gantry - Aggiungere un tocco di stile.

T3:

presenta una minore numero di opzioni e strutture più semplici rispetto al precedente ma consente ugualmente di creare un numero illimitato di layout a partire da quelli predefiniti.

Il funzionamento non è molto immediato ma le operazioni di modifica degli stili non presentano particolari difficoltà.

Il sito ufficiale http://www.t3-framework.org/ fornisce i file di installazione e la documentazione.

E' molto utile anche la lettura di Documentazione T3 Framework mentre Aggiornamento T3 Framework tratta dell'aggiornamento e Come inserire Custom Code in T3 Framework si sofferma su come inserire codice nel template, mostrando anche la funzione del file custom.css.

Helix:

è molto simile al precedente e, forse, ha una maggiore snellezza.

La documentazione ufficiale e i flle d'installazione si trovano in http://www.joomshaper.com/joomla-templates/helix3 ed è molto utile anche l'articolo Sviluppo siti in Joomla! con HELIX 3 Framework.

Tutti i citati prodotti consentono la programmazione degli stili con less facilitando, unitamente alle funzionalità offerte per la predisposizione dei layout, la progettazione completa di un template di qualunque complessità.

I loro produttori offrono, anche a pagamento, template già elaborati per mezzo dei relativi framework, che possono poi essere ulteriormente modificati una volta compreso il funzionamento degli stessi.

I frameworks citati ben si adattano, pertanto, alla elaborazione di template abbastanza complessi.

In questa sede vengono invece esaminate alcune modalità di modifica con T3 framework di un sito già esistente ma con una struttura molto semplice.

Installazione di T3 framework

Il download del frameworks è disponibile nel sito ufficiale come:

  • T3 Quickstart for Joomla 3.x.x (quickstart)
  • T3 Framework plugin (solo plug-in)
  • T3 BS3 Blank Template (solo templare)
  • T3 Package (plug-in e template insieme).

Per lo scopo che ci prefigge si installa sul sito joomla da modificare - necessariamente in locale per poter più agiatamente effettuare tutte le prove necessarie - il T3 Package. E' però molto utile disporre un'altra installazione a parte, da effettuarsi con quickstart e completa degli esempi, al fine di ispezionarne i contenuti quando si rende necessario consultarne alcune funzionalità.

La traduzione in italiano è reperibile in Pacchetto lingua italiana T3 Framework + Blank.

Creazione degli stili

E' certamente consigliato, prima di effettuare qualsiasi modifica, duplicare l'unico stile che il template mette a disposizione per il bootstrap 3 (che porta lo stesso nome del template: t3_bs3_blank). Per fare ciò, dopo essere entrati in Estensioni/Template per visualizzare l'elenco degli stili, si seleziona lo stile t3_bs3_blank e si clicca sul tab “Duplica” in alto e poi lo si rinomina opportunamente.

Successivamente si potranno creare, al "momento opportuno", tutti gli stili necessari, duplicando via via gli esistenti per poi configurarli adeguatamente.

Nell'esempio della figura sono stati creati gli ultimi due stili della lista:

stili

Configurazione degli stili

Ci si limita a descrivere solo le operazioni da eseguire per le modifiche che si ci propone di mostrare, rimandando ai documenti già citati alla precedente trattazione di T3 gli approfondimenti per tutti i dettagli sia per la configurazione che per la personalizzazione.

Cliccando sul nome dello stile da configurare si apre una finestra che contiene i seguenti tab:

  • Overview
  • Generale
  • Temi
  • Layout
  • Navigazione
  • Componenti aggiuntivi
  • Personalizzazione codici
  • Assegnazione

configurazione

Generale

Settaggi:

  • Abilita ThemeMagic: su si per potere personalizzare il tema da assegnare al corrente stile con questo strumento
  • Abilita Responsive Layout: per poter assegnare una larghezza ai contenuti, avendo stabilito di presentare un riquadro a bordi arrotondati sullo sfondo anzicchè un contenuto che fluisce su tutto lo schermo.
  • Non-Responsive larghezza: per inserire una larghezza in px
  • Mostra il logo T3: su no per non visualizzarlo

generale

Temi

Settaggi:

Tema: è possibile scegliere un tema fra quelli disponibili (dark, blue e arancione); si scelto per es. arancione. E’ possibile anche la creazione di nuovi temi seguendo l’apposita procedura nella documentazione ufficiale.

Tipo di logo: tipicamente si sceglie immagine

Immagine per il logo: per caricare il logo

temi

Inoltre dopo aver abilitato l’opzione Abilita ThemeMagic nel precedente punto è possibile accedere all'omonimo tab posizionato in alto e inserire le variazioni desiderate al tema. E' disponibile una descrizione di questa funzionalità.

thememagic

Layout

A ciascuno stile è assegnato un layout, che può essere scelto fra quelli disponibili.

Un layout, a sua volta, è formato da blocchi (block) che hanno una disposizione orizzontale.

I blocchi a loro volta sono costituiti dai segnaposto relativi alle posizioni dei moduli e sono di tipologia diversa come si può intuire facilmente dalla figura:

layout

Il numero di layout e di blocchi è limitato, ma se ne possono duplicare e modificare tanti quanti ne servono.

Basta poi posizionarsi sull’icona a forma di ingranaggio visibile al passaggio dell mouse sul segnaposto all'interno del blocco per poter selezionare la desiderata posizione modulo. E' ovvio che si è preliminarmente provveduto, in Estensione/Gestione moduli, a selezionare il modulo da posizionare assegnadogli la posizione in cui lo vuole visualizzare.

Si rinvia alla documentazione ufficiale per la completa trattazione della modifica del codice necessario per una completa personalizzazione dei layout, limitandoci a illustrare quì solo alcuni piccoli ritocchi che possono tornare utili nei casi meno complessi.

Il local folder

Al fine di evitare che i vari aggiornamenti possano compromettere le variazioni apportate nel sito è stata predisposta dalla versione 2.3.0 una cartella denominata local destinata a contenere una duplicazione dei file presenti nel template e responsabili della struttura dei layout.

In un server locale xaamp installato nella root del disco D la cartella local è situata nel seguente percorso:

D:\xampp\htdocs\nomesito\templates\t3_bs3_blank\local

local

La cartella local contiene le stesse sottoelencate 4 cartelle, contenute nella cartella t3_bs3_blank, ma dove è possibile effettuare le modifiche necessarie:

  • css contenenti i file css
  • etc contenenti i file .ini dei layout
  • less conteneti i file less
  • tpls contenenti i file di configuazione delle posizioni moduli create in precedenza

Si ci occupa quì solo di quest’ultima, questo il suo contenuto:

tpls

Spostamento di un blocco all'interno di un layout

Nella precedente figura sono elencati i file corrispondenti ai layout.

Se si apre con un editor (es. notepad ++) uno dei file contenuti: ad es. default-we-copy, corrispondente ad uno dei layout in uso che si è avuto cura di duplicare prima di configurare, se ne visualizza il contenuto:

default we copy

Nel codice si possono notare le chiamate ai vari blocchi del layout. Basta modificare l'ordine delle righe di codice per modificare la posizione dei blocchi all'interno del layout.

E' anche possibile copiare il pezzo di codice corrispondente ad un blocco da un layout all'altro nella posizione che si desidera.

Aprendo poi la cartella: D:\xampp\htdocs\NomeSito\templates\t3_bs3_blank\local\tpls\blocks si nota che sono presenti due file utili per la personalizzazione di parti del layout (nello specifico footer e del menu principale):

  • footer.php
  • mainnav.php

override

questi file sono stati copiati dalla cartella

D:\xampp\htdocs\nomeSito\templates\t3_bs3_blank\tpls\blocks

contenenti i codici dei blocchi di cui sono formati i layout

blocchi

per poi poterli personalizzare a piacimento.

Personalizzazione del footer

Per es. si ipotizza di effettuare le modifiche per sostituire nel footer la scritta di pubblicità del bootstrap con un'altra (come suggerito nella documentazione), sulla copia di footer.l'ho in local si apportano le modifiche di cui in figura.

Codice footer.php nella cartella originale:

footer

Codice footer.php nella cartella local

localFooter

Sticky menu

Analogamente nel secondo file mainnav.php sono state fatte le modifiche necessarie per rendere fissa in alto la barra dei menu (come suggerito ancora dalla documentazione):

Codice mainmenu.php nella cartella originale

MainMenu

Codice mainmenu.php nella cartella local

MainMenulocal

Navigazione

Settaggi:

  • Menu:selezionare il menu principale
  • Abilita Megamenu: selezionare si per abilitare il Megamenu

cliccando ora sul tab MegaMenu in alto si può personalizzare il menu principale. Nel'esempio si è lasciato il menu principale inalterato.

Ecco una descrizione dettagliata delle funzionalità del Megamenu

Assegnazione

In questa sezione si può segnare uno stile alle voci di menu presenti in joomla.

assegnazione

Modifica dei css

Le modifiche agli stile del template apportati utilizzando gli strumenti del framework difficilmente sono sufficienti a garantire perfettamente il risultato finale voluto.
Per es. Avendo settato nel tab Generale "Abilita responsive" su no per avere un contenuto più stretto dello sfondo e i bordi arrotondati, ha comportato qualche sbavatura.

In questi casi occorre effettuare delle piccole modifiche ai css.

Per fare questo si utilizza un comodissimo file custom.css posto in questo percorso:

D:\xampp\htdocs\nomeTemplate\templates\t3_bs3_blank\css

ove scrivere le regole css che determineranno la variazione nel template.

Esse sono facilmente individuate con l'ausilio di una idonea estensione dei browser, come Firebug o Ispeziona Elemento, che consentono di effettuare una prova di variazione visiva direttamente a video, visualizzando il relativo codice css, che può tranquillamente copiato e incollato nel file custom.css, che si ha preliminarmente avuto cura di aprire con un editor di codice.

Il custom.css utilizzato per le prove è formato da istruzioni molto elementari e questo è il risultato.


CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Angelo Cani
Alcune informazioni su di me:


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.6.0 Stabile Italiana
Data di rilascio:12 Luglio 2016
(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: