JOOMLA!
Personalizzare il css
Per personalizzare il css di questo template si può 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 e modifica del file index.php, si potrà nuovamente inserire la modifica.
Aprire il file index.php e sotto la riga 42 aggiungere:
|
43 |
$doc->addStyleSheet('templates/'.$this->template.'/css/personal.css') |
così:
| // Add Stylesheets | |
| 42(oppure 46) | $doc->addStyleSheet('templates/'.$this->template.'/css/template.css') |
| 43(47) | $doc->addStyleSheet('templates/'.$this->template.'/css/personal.css'); |
Il nuovo file personal.css va inserito nella cartella css tel template.
// Add Stylesheets
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/personal.css'); // nuova riga
___________________________________________________________________________
Per avere il container così come si vede nel sito, questo il css da aggiungere alpersonal.css
background-color: #fff;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
padding: 20px;
border: none;
-moz-box-shadow: 2px 2px 8px #000;
-webkit-box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px #000;
}
__________________________________________________________
Posizioni modulo
Queste le posizioni presenti.
Possono essere visualizzate da backend
Estensioni > Gestione template > Opzioni > Anteprima posizioni modulo > Abilitato
e poi su Gestione template > cliccare icona occhioa fianco del nome del template
e da frontend
digitando alla fine dell'url ?tp=1
sempre abilitando l'Anteprima posizioni modulo
_____________________________________________________________
Il menù a tendina
Per avere il menù a tendina in position-1:
Estensioni > Gestione moduli
Cliccare sul nome del menù desiderato e in
Posizione
selezionareposition-1del templateProtostar
poi inAvanzatein
Suffisso classe menu
scrivere
nav-pills
lasciando uno spazio davanti
__________________________________________________________________
Modifica stile da backend e personalizzazione sfondo con il personal.css
Estensioni > Gestione Template > protostar Default > Avanzate
Le modifiche che si possono fare da backend non sono molte. Si possono scegliere
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 Descrizioneche rimane visibile anche con il Logo
se si vogliono i Font di Google per le intestazionie quale
se si vuole o no che sia Fluido, fluido cioè che si adatta al video, rimane comunque responsive anche se si sceglie che sia Statico, come qui.
Per inserire uno sfondo immagine bisognerà intervenire sul css, scrivendolo nel personal.css ad esempio così:
background-attachment: fixed;
background-color: #FFFFFF;
background-image: url("/../images/sfond_piccoliwebmaster.jpg");
background-position: center top;
background-repeat: no-repeat;
border-top: none !important;
padding: 15px;
margin-top:-20px;
}
Un'altra piccola cosa... Per modificare la descrizione del sito da come si vede qui:
a come si vede nel sito adesso, bisogna aggiungere:
.site-description {
float: right;
font-size: 18px;
line-height: 22px;
margin-bottom: 10px;
margin-top: -15px;
text-align: left;
}
_________________________________________________________________
Personalizzazione container con il personal.css
Per avere il container così come si vede nel sito, questo il css da aggiungere alpersonal.css
.body .container {
background-color: #fff;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
padding: 20px;
border: none;
-moz-box-shadow: 2px 2px 8px #000;
-webkit-box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px #000;
}
____________________________________________________________
Personalizzare i moduli in position-7 tramite css
Il modulo menù inposition-7si presenta così:
Per modificare i moduli che saranno pubblicati in quella posizione, inseriamo il css nel filepersonal.css
Sfondo, bordo e ombreggiatura
.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;
}
Inserimento icona voci menù e ingrandimento font-size
Se il css che disegna un determinato punto del template non fosse univoco, come in questo caso, bisognerà aggiungere il div che lo contraddistingue, qui.well
Infatti il css
.navigation .nav > li {
}
regola anche il menù a tendina, quindi la correzione avrebbe influito anche su quella parte. Perciò:
.well ul {
list-style-image: url(/../images/icona_titoli.jpg);
padding-left:25px;
}
.well .nav li {
font-size: 15px;
padding-bottom: 15px;
line-height: 17px;
}
Eliminazione icona e riduzione font-size dalla voce di sottomenù
#aside .nav .nav-child li {
font-size: 13px;
line-height: 17px;
list-style: none outside none;
padding-bottom: 2px;
padding-top: 3px;
}
Per l'hover da così a così
.well .nav > li > a:hover, .well .nav > li > a:focus {
background: none;
text-decoration: underline;
}
È possibile che inserendo altri moduli ci siano aggiustamenti da fare. Ad esempio per il moduloCategoria articoliin alto alla pagina, fino a questo momento si sarebbe presentato così:
Allineare i titoli deglia articoli e uniformare il font-size
.category-module {
font-size: 15px;
line-height: 25px;
margin-left: 0px;
}
============================================================================
Joomla! - Personalizzare il Template Protostar: CSS
https://www.youtube.com/watch?v=1Cpla83d-vA
https://blog.dangerx82.it/categorie/joomla/98-joomla-3-free-template-protostar.html
http://www.ioeweb.it/lezioni/come-modificare-un-tema-joomla
https://www.joomla.it/blog/7374-mini-guida-alla-personalizzazione-del-template-protostar.html
