JOOMLA!
Come aggiungere una posizione in Joomla su Cassiopeia
Passo 1
Nel pannello di controllo di Joomla, selezionare Sistema > Template del Sito e cliccare su Cassiopeia Dettagli e File
Passo 2
Clicca su Create Child Template e poi nella finestra pop-up successiva inserisci un nome a piacere per il tuo template, tipo nuoveposizioni. Poi clicca su Create Child Template. In questo modo si crea una copia del template padre, copia che la si può utilizzare per le ulteriori personalizzazioni, senza toccare il template Cassiopeia originale o padre.
Passo 3
Il Child Template appena creato contiene un unico file, il templateDetails.xml, come tutto il resto eredita i file del template padre. Per iniziare a pesonalizzare dobbiamo creare un file index.php proprio, in pratica una copia del file index.php del template padre. Sono vari modi di raggiungere questo obbiettivo, copiarlo e incollarlo tramite FTP, oppure tra,mite il pannello di amministrazione di Joomla procediamo così. Aprire il file index.php che si trova in /templates/cassiopeia. Selezionare tutto il codice e fare copia (oppure CTRL+C).
Chiudi tutto e torna al Pannello di controllo.
Passo 4
Seleziona Sistema > Template del Sito e cliccare su Cassiopeia_nuoveposizioni Dettagli e File.
Clicca su Nuovo file, inserisci index nel campo nome e seleziona tipo di file .php. Clicca su Crea.
Successivamente incolla il codice copiato in precedenza dal template padre (CTRL+V). Salva.
Passo 5
Come si sa anche dalle versioni precedenti, tutte le posizioni di un template Joomla sono definite dal fine templateDetails.xml. In questo file dobbiamo aportare le modifiche aggiungendo la nuova posizione desiderata, in questo esempio la nuova posizione la chiamiamo top-c. Quindi clicca a sinistra sul file templateDetails.xml per aprirlo in modalità modifica.
Inserisci la seguente riga subito dopo quella che fa riferimento alla posizione top-b (riga 17):
<position>top-c</position>
Clicca su Salva.
Passo 6
Successivamente dobbiamo richiamare questa posizione sul file index.php del Child Template in un grid container. Cliccare a sinistra sul file index.php e inserire subito dopo la riga 200, il seguente codice :
<div class="grid-child container-top-c">
<jdoc:include type="modules" name="top-c" style="card" />
</div>
<?php endif; ?>
Però la posizione pur presente e utilizzabile, non ha alcun stile quindi tutto ciò che verrà inserito avrà un aspetto grezzo e senza alcuna grafica. Andiamo dunque ad aggiungere un paio di istruzioni CSS.
Dobbiamo creare un file
user.css dove andremmo a inserire le nostre personalizzazioni. Si ricorda che il file user.css e l'unico file dove potete inserire le vostre personalizzazioni CSS senza la paura che possono perse ad un successivo aggiornamento del template padre Cassiopeia. Si consiglia, come buona regola, di imparare ad utilizzare questo file sempre.Cliccare dunque nella parte sinistra sulla cartella
css che si trova in /media/templates/site/cassiopeia_nuoveposizioni e poi clicca su Nuovo file. Clicca poi su Crea.Inserisci il seguente codice CSS:
.container-top-c {
position: relative;
}
.container-top-c > * {
flex: 1;
margin: 0.5em 0;
}
@media (max-width: 991.98px) {
.container-top-c {
flex-direction: column;
}
.container-top-c > * {
flex: 0 1 auto;
}
}
@supports (display: grid) {
.site-grid {
display: grid;
grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". top-c top-c top-c top-c ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
grid-gap: 0 1em;
}
@media (min-width: 992px) {
.site-grid {
grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". top-c top-c top-c top-c ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
}
}
}
.container-top-c {
grid-area: top-c;
}
Passo 9
Per testare, bisogna creare un nuovo modulo personalizzato, seleziona la posizione top-c e assegnare questo modulo ad una voce di menu esistente.
