Supporto volontario e collaborativo per Joomla!® in italiano

Mini-guida alla personalizzazione del template Protostar

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

ProtostarProtostar è uno dei template che troviamo già installati nella distribuzione di Joomla!® 3.x

In questo articolo vedremo alcune personalizzazioni, una mini-guida all'uso dello Stile e del Suffisso Classe Modulo, come aggiungere una posizione e alcune comode opzioni per gestire le modifiche dei contenuti da backend e da frontend.

In questo articolo, nella prima parte, troverete una mini-guida per la realizzazione di un sito. Se volete dare un'occhiata, ci sono alcune indicazioni di carattere generale e qualche link a strumenti molto utili a noi, piccoli webmaster.

Posizioni del template
- Personalizzare il css - Il menù a tendinaModifica stile da backend e personalizzazione sfondo con il personal.css - Personalizzare i moduli con il Suffisso classe CSS modulo - Personalizzare i moduli in position-7 tramite css Riga di divisione tra gli articoliBottoni precedente e successivo sotto al testoAggiungere nuove posizioniOpzioni modifica da frontend e da backend

Qui
potete trovare indicazioni sulla duplicazione del template e qui sulla copia del template.

Posizioni del template
Per vedere le posizioni andiamo su Estensioni > Gestione template > Opzioni > Anteprima posizioni modulo > Abilitato e poi su Gestione template > cliccare l'icona occhio a fianco del nome del template. Oppure da frontend, dopo aver abilitando l'Anteprima posizioni modulo, digitando alla fine dell'url ?tp=1

Personalizzare il css
Per personalizzare il css di questo template possiamo intervenire sul file template.css sia da backend che modificandolo in locale e trasferendolo poi via ftp. Ma è possibile che, così facendo, durante un aggiornamento di Joomla!® si perdano tutte le personalizzazioni... Quindi conviene modificare l'index.php del template aggiungendo il richiamo per un file css aggiuntivo, ad esempio personal.css che sovrasciverà le regole del file template.css. In caso di aggiornamento ed eventuale modifica del file index.php, si potrà nuovamente inserire il richiamo. Apriamo il file index.php e sotto la riga 42 aggiungiamo:
$doc->addStyleSheet('templates/'.$this->template.'/css/personal.css');
così:
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
$doc->addStyleSheet('templates/'.$this->template.'/css/personal.css');

Il menù a tendina
Per avere il menù a tendina in position-1: Estensioni > Gestione moduli, clicchiamo sul nome del menù desiderato e in Posizione selezioniamo la position-1 del template Protostar poi in Avanzate in Suffisso classe menu scriviamo  nav-pills lasciando uno spazio davanti.

Modifica stile da backend e personalizzazione sfondo con il personal.css
Andiamo su Estensioni > Gestione Template > protostar Default > Avanzate. Le modifiche che possiamo fare da backend non sono molte:
il Colore del template, cioè dei link, dei bottoni e dei titoli - il Colore di sfondo - inserire il Logo se si vuole un'immagine - scrivere il Titolo, visibile solo se non si è inserita un'immagine - la Descrizione che rimane visibile anche con il Logo - se vogliamo uno dei Font di Google per le intestazioni e quale - se vogliamo o no che il template sia Fluido, cioè che si adatti ala finestra del browser (rimane responsive anche se si sceglie che sia Statico).
Se vogliamo inserire uno sfondo immagine bisognerà intervenire sul css, scrivendolo nel personal.css ad esempio così:
body.site {
background-attachment: fixed;
background-color: #FFFFFF;
background-image: url("/../images/sfondo.jpg");
background-position: center top;
background-repeat: no-repeat;
}

Personalizzare i moduli con il Suffisso classe CSS modulo
Per ottenere classi diverse e personalizzare i moduli, utilizziamo il Suffisso classe CSS modulo: Estensioni > Gestione moduli > Nuovo. In questo caso un modulo menù. Si inserisce il suffisso scelto _min alla Voce Suffisso classe CSS Modulo e in Stile modulo > xhtml

suffissoclassemoduloFirebugEcco come Firebug vede ora il css del modulo: moduletable_min
Con questa classe possiamo scrivere il css personalizzato, da inserire nel file personal.css

 

 

 





03 suffissoclassemodulomenuQuesto il codice da inserire per un modulo menù come questo a fianco:

.moduletable_min {
-webkit-box-shadow: 2px 2px 8px #000;
-moz-box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px #000;
background: #8D6444;
padding:10px 15px 10px 20px;
margin-bottom: 20px;
}
.moduletable_min h3 {
color: #FBE689;
}
.moduletable_min a {
color: #FFF;
}
.moduletable_min li {
line-height: 25px;
}
#aside .moduletable_min .nav .nav-child {
border-left: none;
padding-left: 15px;
}

Lo stesso suffisso lo possiamo inserire in un modulo HTML personalizzato o in un altro modulo, sistemando eventualmente qualche altra classe...

Personalizzare i moduli in position-7 tramite css
04 position-7 menunuovomenuQuesto a sinistra è il modulo menù in position-7. Per modificare tutti i moduli che saranno pubblicati in quella posizione (come esempio a destra), inseriamo il css nel file personal.css
.well {

background-color: #FBE689;
-webkit-box-shadow: 2px 2px 8px #000;
-moz-box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px #000;
border: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}

Riga di divisione tra gli articoli
Protostar non ha una riga orizzontale di divisione tra gli articoli. Possiamo inserirla nel personal.css così:
.items-row .span12, .items-row .span6, .items-row .span4, .items-row .span3, .items-row .span2 {
border-bottom: 3px dotted #EE8033;
margin-bottom: 15px;
padding-bottom: 10px;
}

Bottoni precedente e successivo sotto al testo
precedentesuccessivoSe in un articolo c'è un'immagine più alta del testo, i bottoni Prec e Succ si posizionano sotto al testo... Se vogliamo che Prec e Succ stiano sotto all'articolo aggiungiamo questo al personal.css

.pager:before, .pager:after {
clear: both;

}
.pager li > a, .pager li > span {
margin-top: 20px;
}

Aggiungere nuove posizioni
05 position-iconePer inserire una nuova posizione bisogna modificare l'index.php del template. Aggiungiamo, ad esempio, una posizione in alto a destra, per avere la possibilità di pubblicare un modulo HTML personalizzato in cui inserire le icone e i link ai Social media.

Apriamo il file index.php e inseriamo appena sotto la riga 149 inseriamo:

07 prima posizione

Nota: style="none" non pubblicherà il titolo del modulo, normalmente si può usare style="xhtml"




e il relativo css nel file personal.css
.icone_social {
float: right;
margin-top: -10px;
}

06 position-slideE una posizione per la slide sotto al top menù.

 

 

 

 



 






appena dopo la position-1 inseriamo:

08 seconda posizione

e questo il css da inserire per modificare padding, margin o altro:
.slide {

}

Per inserire il modulo nella nuova posizione basta scriverne il nome nella tendina delle posizioni, oppure si può inserire il nuovo nome posizione (così da vederla fra le altre) nel file templateDetails.xml del template in questo modo:

position

Quindi si può scegliere uno dei tanti moduli slide tra le estensioni di Joomla!®.

Opzioni modifica da frontend e da backend
09 modifica moduli frontend
Da frontend, quando siamo loggati, possiamo intervenire direttamente sugli articoli e sui moduli, mediante i bottoni modifica. Cliccando si aprirà il contenuto o, nel caso dei moduli, una pagina di backend con il modulo da modificare. Moooolto comodo.

 

 

 







 

10 modifica articolo  voce menuDa backend ad una voce menù di tipo Singolo articolo, dopo aver assegnato l'articolo e salvato la voce di menù, comparirà il tasto Modifica. Cliccandolo si aprirà, in una nuova pagina browser, l'articolo assegnato per le eventuali correzioni.

Dal tab Assegnazione moduli, possiamo assegnare o disattivare, per questa voce menù, i moduli senza fare tutto il giro dalla Gestione moduli.

 

 

 

 

Bon. Il template è semplice, facilmente gestibile e adattabile alle varie esigenze. Ha un'unica pagina .php da modificare e per cominciare a lavorare anche un po' sui codici è l'ideale... Buon lavoro.


CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.8.1 Stabile Italiana
Data di rilascio: 04 Ottobre 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: