Template derivati

Introduzione

I template derivati utilizzano tutti i file dei loro template principali, eccetto per eventuali file con lo stesso nome inseriti nel template derivato. I file del template derivato non sono interessati dagli aggiornamenti di Joomla. Potresti quindi inserire il tuo file index.php in un template derivato e fargli produrre qualcosa di piuttosto diverso dal template predefinito, come posizioni di moduli aggiuntive o override di estensioni alternativi.

Uno scenario di esempio: supponi di voler far apparire alcune delle tue pagine con un tema blu, i colori predefiniti di Cassiopeia, e altre pagine con un tema verde. Un modo semplice per farlo è usare un template derivato che utilizza il proprio foglio di stile user.css,

Esempio pratico

Crea un Template derivato

Partendo da Sistema → Pannello Template → Template del sito

• Clicca Dettagli e File di Cassiopeia.
• Clicca il pulsante Crea Template derivato.
• Compila il modulo e clicca il pulsante Crea Template derivato:
  • Nome: Green
  • Stili aggiuntivi del template: lascia vuoto.

• Clicca Chiudi dalla barra degli strumenti per chiudere il modulo del template principale.
• Clicca il nuovo template, Dettagli e File di Cassiopeia_green, dalla lista dei Template.

A questo punto c'è una struttura di cartelle ma un solo file: templateDetails.xml. Quel file può essere modificato se desideri cambiare alcuni aspetti della configurazione del template, ad esempio per aggiungere o rimuovere posizioni del template.

Crea un File user.css

• Clicca il pulsante Nuovo File nella barra degli strumenti.
• Nel modulo Crea o carica un nuovo file assicurati di selezionare la cartella css
• Compila il nome del file con user. NON aggiungere un suffisso!
• Clicca il Tipo di File .css.
• Clicca il pulsante Crea.

Il file user.css è vuoto, pronto per inserire alcuni stili personalizzati. Inserisci quanto segue per iniziare il tema verde:

    .container-header {
      background-color: darkgreen;
      background-image: none;
    }
    h1, h2, h3, h4, h5, h6 {
      color: darkgreen;
    }
    .h1, .h2, .h3, .h4, .h5, .h6 {
      color: darkgreen;
    }
    a, a:hover, a:focus {
      color: darkgreen;
    }
    .btn-info {
        background-color: darkgreen;
        border-color: #30638d;
        color: #fff;
    }
    .btn-primary, .btn-primary:focus, .btn-primary:hover {
        background-color: darkgreen;
        border-color: var(--cassiopeia-color-hover);
    }

    .btn-check:focus + .btn-info, .btn-info:focus, .btn-info:hover {
        background-color: darkgreen;
        border-color: #264f71;
        color: #fff;
    }

Potrebbe essere necessario tornare a questo file user.css per aggiungere altri stili in seguito.

• Clicca Salva & Chiudi.
• Clicca Chiudi per chiudere il modulo di personalizzazione.

Aggiungere una voce di menu utilizzando il Template derivato

A questo punto è necessaria una voce di menu per utilizzare il template derivato. Una nuova installazione di Joomla ha il Menu Principale nella posizione della barra laterale destra con una voce al suo interno. Quello sembra un buon posto per una nuova voce di menu.

• Seleziona Menu → Menu Principale dal menu dell'Amministratore.
• Clicca il pulsante Nuovo dalla Barra degli strumenti.
• Inserisci un titolo adatto, Articoli in evidenza verdi sembra appropriato in questo caso.
• Clicca il pulsante Tipo di voce di menu → Clicca.
• Clicca un tipo di voce di menu dalla finestra popup Tipo di voce di menu - Articoli in evidenza in questo esempio.
• Clicca cassiopeia_green - Predefinito dal campo del modulo Stile template.

Vista del sito

• nella Home page del tuo sito, clicca la voce di menu appena creata.

Modificare lo stile

• Seleziona Sistema → pannello Template → Stili del Template del sito dal menu dell'Amministratore.
• Clicca Cassiopeia_green - Predefinito dalla lista degli Stili.
• Cambia il Nome dello Stile in Cassiopeia Green. Questo serve solo a sistemare il nome così come appare nelle liste.
• Clicca Salva e chiudi.