Il template Cassiopeia è già predisposto con molte posizioni dove inserire contenuti, posizioni che in teoria devono essere sufficienti per la maggior parte dei siti web. Ma se vogliamo aggiungere una nuova posizione, come si può fare ?

Joomla 4 ha portato con se un ottimo template, Cassiopeia, che a differenza di quelli nelle versioni precedenti, con Cassiopeia non servono molte personalizzazioni e fatica per avere pronto un bel sito ed accessibile sopratutto, con un sacco di funzionalità.
In questa guida si fa uso della più importante funzionalità presente in Joomla 4.1, quella del'utilizzo dei Child Templates. Vediamo in dettaglio i passaggi.

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 :

<?php if ($this->countModules('top-c', true)) : ?>
    <div class="grid-child container-top-c">
        <jdoc:include type="modules" name="top-c" style="card" />
    </div>
<?php endif; ?>

Salva e Chiudi.

A questo punto abbiamo creato e definito la nuova posizione sul Child Template Cassiopeia.
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.

Passo 7
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.

Passo 8
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. Che ne dite, funzionerà ?

NOTA
Ricordo di nuovo che queste istruzioni sfruttano la funzionalità di Child Templates presente su Joomla a partire dalla versione 4.1. Non funzionerà su Joomla 4.0 !