Joomla! 4-Cassiopeia

---------------------------------------------------------------------------------------------

Abilita debug [ modifica ]

Se l'interfaccia dell'amministratore funziona ancora, vai su Home Dashboard → Pannello di sistema → Configurazione globale . Nella scheda Sistema impostare Debug sistema su Sì e nella scheda Server impostare Segnalazione errori su Massimo .

Se la tua interfaccia amministratore non funziona, modifica il file configuration.php nella radice del tuo sito. Per prima cosa imposta i permessi su per rendere il file scrivibile (666). Quindi imposta $debug su true e $error_reporting su ' massimo' . Quindi Salva e chiudi .

Con le modifiche apportate, ricaricare la pagina che causava l'errore. Questa volta dovresti vedere una traccia dello stack, ad esempio:

Il primo elemento nella traccia dello stack indica dove è stato attivato l'errore. A volte questo è sufficiente per identificare l'estensione difettosa. A volte l'estensione difettosa è più in basso nella traccia dello stack. Potrebbe non significare molto per te, ma la traccia dello stack è inestimabile per gli esperti che rispondono alle domande nei forum Joomla.

Se riesci a identificare l'estensione difettosa, disabilitala. Puoi farlo usando l'interfaccia dell'amministratore se funziona. Altrimenti, usa phpMyAdmin per trovare l'estensione nella tabella del database xxxxx_extensions e imposta il suo valore di abilitazione su 0. Non dovresti aver bisogno di disabilitare le estensioni principali di Joomla

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

https://www-joomshaper-com.translate.goog/blog/joomla-4-cassiopeia-template-customization-tips?_x_tr_sl=en&_x_tr_tl=it&_x_tr_hl=it&_x_tr_pto=sc

Personalizzazione del modello Cassiopea

Opzioni predefinite

Ci sono alcune opzioni integrate predefinite che puoi utilizzare per modificare il modello di cassiopeia di Joomla 4. Puoi modificare il logo e il titolo della pagina dalle opzioni fornite.

Per cambiare il logo, vai su Modelli > Stili. Ora seleziona il modello "cassiopea". Qui nella scheda "Avanzate" troverai le opzioni per modificare le cose di base come il logo.
Per modificare il logo, fai clic sul pulsante "Seleziona" nelle opzioni del logo. Usa Joomla 4 media manager per caricare l'immagine e seleziona l'immagine da aggiungere.

Puoi anche aggiungere un titolo e una descrizione del tuo sito utilizzando l'opzione predefinita.

Cambia colore di sfondo

Puoi anche cambiare il colore dell'intestazione del modello. Per farlo, devi fare dei CSS personalizzati.

Per aggiungere il CSS personalizzato, devi aggiungere un file (custom.css) user.css alla cartella CSS del modello e aggiungere lì il codice CSS personalizzato. Abbiamo personalizzato con il seguente CSS per ottenere il risultato desiderato.

.container-header {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    background-color: #434178;
    background-image: linear-gradient(135deg, #578e8e 0%, #14382c 100%);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
}

Cambia la posizione del modulo

Puoi modificare la posizione del modulo dal frontend del sito web. Qui cambieremo la posizione del modulo delle voci di menu. Dobbiamo fare clic sull'icona del modulo di modifica nel modulo del menu.

foto

Ora, qui otterrai alcune opzioni predefinite per modificare il modulo. Trova l'opzione "Posizione". Fare clic sull'opzione. Seleziona la posizione desiderata dal menu a tendina. Qui abbiamo selezionato la posizione "menu".

https://www-joomshaper-com.translate.goog/blog/joomla-4-cassiopeia-template-customization-tips?_x_tr_sl=en&_x_tr_tl=it&_x_tr_hl=it&_x_tr_pto=sc

https://magazine-joomla-org.translate.goog/all-issues/february-2022/joomla-4-cassiopeia-template-a-bunch-of-tips-tricks?_x_tr_sl=en&_x_tr_tl=it&_x_tr_hl=it&_x_tr_pto=sc

--------------------------------------------------------------------

4. Suggerimenti e trucchi su Cassiopea

4.1. Sovrascrivere la Favicon

Il percorso delle favicon predefinite di Cassiopea può essere trovato in<head>

<link href="/media/system/images/joomla-favicon.svg" rel="icon" type="image/svg+xml">
<link href="/media/system/images/favicon.ico" rel="alternate icon" type="image/vnd.microsoft.icon">
<link href="/media/system/images/joomla-favicon-pinned.svg" rel="mask-icon" color="#000">

Se vuoi sovrascriverli, tutto ciò che devi fare è creare un override di queste icone, ad esempio

/templates/cassiopeia/images/joomla-favicon.svgper J!4.0
/media/templates/site/cassiopeia/images/joomla-favicon.svgda J!4.1 in poi

Nota: convertire online un'immagine in svg/ico è facile, basta cercarlo su Google

4.2. Caratteri

4.2.1. Aggiungi Google Fonts al tuo modello

Vai a https://fonts.google.com/
Scegli il carattere che preferisci
Basta adattare e aggiungere il seguente CSS /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0):

/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */
@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');
/* Use the imported font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */
body {
    font-family: 'Georama', sans-serif;
}

Fonte: https://coolcat-creations.com/en/blog/customize-your-cassiopea-template

Nota: questo metodo dovrebbe essere l'ultima scelta, fa troppo male alle prestazioni. Vedi le prossime opzioni

4.2.2. Aggiungi Google Fonts localmente al tuo modello

A causa delle leggi sulla privacy (come il GDPR in Europa), potresti non essere autorizzato a chiamare un carattere distante (perché consente al provider di tracciare i tuoi visitatori).

Nessun problema! Puoi facilmente scaricare i file necessari e aggiungere il CSS corrispondente /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

Vedi https://google-webfonts-helper.herokuapp.com/fonts

Fonte: https://blog.astrid-guenther.de/en/cassiopeia-optionen/ > Schema dei caratteri

4.2.3. Aggiungi qualsiasi carattere al tuo modello txs a Modello figlio

Nota: questo richiede J4.1+ poiché utilizza la nuova funzionalità chiamata Child Template . Txs @dgrammatiko per la funzione e il suggerimento!

Crea un figlio e impostalo come predefinito
Modifica il templateDetails.xml del figlio e aggiungi un'altra riga (sostanzialmente cambia i nomi dei caratteri di un'opzione esistente) nel campo useFontScheme
È tutto

Guarda gli screenshot:

addlocalfont1

addlocalfont2

4.3. Colori

4.3.1. Modifica del colore impostato su tutto il sito

Aggiungi il seguente CSS /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

:root {
  --cassiopeia-color-primary: red;
  --cassiopeia-color-hover: green;
  --cassiopeia-color-link: blue;
}

Adatta i colori ovviamente, questo è solo un esempio...

4.3.2. Modifica del colore impostato su una determinata pagina

Vai a Menu > [il tuo menu]
Fare clic sulla voce di menu scelta
Seleziona la scheda Visualizzazione pagina
Nell'opzione Classe di pagina aggiungi per esempiocolors1
Aggiungi il seguente CSS /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

Esempio di base:

.colors1 {
  --website-color-1: #5e2688;
  --cassiopeia-color-primary: var(--website-color-1);
}

Esempio più avanzato che permette di giocare con la trasparenza (RGBA) perché la mia variabile iniziale non è espressa direttamente come colore, ma come valore RGB (esempio: 37, 143, 167):

.colors1 {
  --website-color-primary: 37, 143, 167;
  --website-color-hover: 242, 48, 48;
  --cassiopeia-color-primary: rgba(var(--website-color-primary),0.5);
  --cassiopeia-color-hover: rgb(var(--website-color-hover));
  --cassiopeia-color-link: rgb(var(--website-color-primary));
}

4.3.3. Aggiungi una nuova combinazione di colori in Cassiopea

Nota: richiede Joomla 4.1+

Il modello front-end predefinito di Joomla, Cassiopea, viene fornito con due combinazioni di colori: standard e alternativo.

Se modifichi una combinazione di colori, la tua modifica potrebbe andare persa in un prossimo aggiornamento. In Joomla 4.1 ora hai la possibilità di aggiungere ulteriori combinazioni di colori:

Crea il tuo file CSS nella media\site\templates\cassiopeia\css\globalcartella con un nome simile custom_colors_orange.csse puoi quindi selezionarlo nel modello di Cassiopea.

Per ulteriori informazioni, vedere https://issues.joomla.org/tracker/joomla-cms/35917

4.3.4. Modalità scura

Ci sono molte buone ragioni per avere la modalità oscura sul tuo sito web.

Grazie al plugin gratuito Dark Magic di Nicholas Dionysopoulos puoi abilitare e personalizzare molto facilmente la Dark Mode

sul back-end (solo con il modello Atum predefinito)
sul front-end (solo con il modello Cassiopea predefinito)

Nota: al momento il README.md su https://github.com/nikosdion/DarkMagic menziona solo Joomla 3. Ma in realtà il plugin ha due versioni, una per J3 e una per J4. Basta fare clic su Rilasci nella colonna di destra

v2.x è DarkMagic per Joomla 4
v1.x è DarkMagic per Joomla 3

Ovviamente, soprattutto per il front-end, probabilmente vorrai personalizzare ulteriormente alcuni colori. Buone notizie: Cassiopeia fa un uso estensivo di quelle che vengono comunemente chiamate "Variabili CSS" (il vero nome è "Proprietà personalizzate"), il che semplifica la personalizzazione dei colori: vengono definiti una volta e vengono quindi utilizzati in oltre 100 luoghi diversi .

Ecco un esempio di CSS che ho aggiunto /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0) per personalizzare ulteriormente i colori del front-end in Dark Mode (per avere l'intestazione, i pulsanti, i collegamenti ecc. con i colori ufficiali di il sito):

:root {
    --website-color-1: #D95F69;
    --website-color-2: #F29544;
}
@media screen and (prefers-color-scheme: dark) { /* to override the Dark Mode Colors defined in the Dark Magic plugin */
    :root {
        --cassiopeia-color-primary: var(--website-color-1) !important;
        --cassiopeia-color-link: var(--website-color-1) !important;
        --cassiopeia-color-hover: var(--website-color-2) !important;
        --cassiopeia-color-gradient-end: var(--website-color-1) !important;
        --cassiopeia-color-gradient-start: var(--website-color-2) !important;
    }
    .btn-primary {
        background-color: var(--website-color-1) !important;
    }
    .btn-primary:focus, .btn-primary:hover {
        background-color: var(--website-color-2) !important;
    }
    .back-to-top-link {
        color: white !important;
    }
    #cf_1 { /* Convert Forms also uses CSS Variables */
        --background-color: rgba(0, 0, 0, 0.9) !important;
    }
}

4.4. Disposizione

4.4.1. Conoscere tutte le posizioni possibili in Cassiopea

La presentazione più completa/accurata di tutte le posizioni disponibili che ho trovato finora è la seguente. Grazie al suo autore, Pedro Olaia, per averlo condiviso.

Nota: l'elemento html e le classi nella posizione “MENU” cambiano in base al modulo interno. Quindi, se il modulo è effettivamente il modulo del menu, sarà: <nav class="navbar ...">e non <div class="moduletable module">. Quindi alcuni elementi e classi html potrebbero cambiare in base al modulo, alle opzioni selezionate e alle dimensioni del viewport

cassiopea-posizioni

In Sistema > Stili modello > Cassiopea > scheda Avanzate > opzione Marchio, se impostato su Sì puoi anche farlo

seleziona un logo
oppure digita un titolo (con o senza slogan)

Questo funziona ovviamente, ma dato il layout di Cassiopea, questo logo o titolo si trova su una riga separata prima della riga di intestazione che in genere contiene il menu.

Ok perché no. Probabilmente c'è una ragione per questo che ignoro, ma chiaramente non è la pratica sul 99,9% dei siti web.

Quindi, se vuoi che il tuo Logo sia sulla stessa riga del Menu, puoi semplicemente procedere come segue:

Vai a Contenuto > Moduli del sito
Fare clic su Nuovo
Seleziona un modulo di tipo Personalizzato (HTML)
Lì inserisci semplicemente il tuo Logo (e se lo desideri aggiungi un collegamento ipertestuale alla home page, ovvero "/")
Seleziona la posizioneMenu
Assegna il Modulo a Tutte le Pagine (a meno che tu non abbia ad esempio un logo diverso a seconda della Lingua)
Salva

Crea il nuovo modulo appropriato

Vai su Contenuto > Moduli sito o vai su Sistema > Gestisci > Moduli sito (sì, 2 modi per arrivarci 🙂)
Fare clic sul pulsante Nuovo
Seleziona il modulo di tipo piè di pagina ("Questo modulo mostra le informazioni sul copyright di Joomla!.")
Dai un titolo
Seleziona PosizioneFooter
Se necessario, vai alla scheda Assegnazione menu e personalizza
Salva

Guarda il risultato sul front-end

nel footer del sito compaiono due righe di testo. La cosa bella è che l'anno e il nome del sito vengono creati dinamicamente
il testo visualizzato è determinato dalle stringhe della lingua nativa di Joomla, ovvero
- MOD_FOOTER_LINE1
  Copyright © %date% %sitename%. All Rights Reserved.
- MOD_FOOTER_LINE2
  <a href="https://www.joomla.org">Joomla!</a> is Free Software released under the <a href="https://www.gnu.org/licenses/gpl-2.0.html">GNU General Public License.</a>

Personalizza queste due stringhe di lingua

Vai a Sistema > Gestisci > Sostituisci lingua
Seleziona la lingua del front-end di tua scelta
Fare clic su Nuovo
Cerca la seguente costante:MOD_FOOTER_LINE1
Fare clic sul risultato corrispondente
Modifica il testo in base a ciò che desideri, ad esempio:© %date% %sitename% | <a style="text-decoration: none;" href="/privacy">Privacy</a>
Fai l'equivalente perMOD_FOOTER_LINE1
Se hai un sito web multilingue, ripeti l'operazione per ciascuna lingua

Se vuoi avere entrambi i testi sulla stessa riga su schermi di grandi dimensioni (che è più bello penso) aggiungi semplicemente il seguente CSS /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

footer div.mod-footer {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) {
  footer div.mod-footer {
    flex-direction: row;
  }
}

Questo non è specifico di Cassiopea: quel Footer era già lì dai tempi del Mambo che ho sentito. Ma poiché Cassiopea non ha decine/centinaia di Opzioni, questo è un modo molto elegante per ottenere un bel piè di pagina personalizzato.

4.4.4. Personalizzazione del layout della vista blog

Oltre alle classiche Opzioni disponibili in Joomla per la Visualizzazione Blog, Cassiopeia ha alcune classi utili che possono essere impostate nella Voce di Menu (di tipo Visualizzazione Blog) > scheda Layout Blog > opzione Classe Articolo:

Incorniciato
immagine-destra
immagine a sinistra
immagine alternativa (in combinazione con immagine-destra o immagine-sinistra)
immagine in basso

Per ulteriori informazioni, vedere https://issues.joomla.org/tracker/joomla-cms/18319

In Cassiopea sono disponibili anche altre Classi che consentono ad esempio di avere un Layout “Massoneria”:

colonne-2
colonne-3
colonne-4
muratura-2
muratura-3
muratura-4

Vedi un esempio di masonry-3su https://cassiopeia.joomla.com/sample-layouts/mansory-layout

Non sono troppo sicuro dell'uso di columns-Xperché ora c'è un'opzione #Columns (che inizialmente non c'era nelle prime bozze di J4)

4.4.5. Immagini degli articoli – Sinistra, Centro o Destra

Joomla 4 ha cambiato le opzioni float per le immagini: non c'è più una casella di selezione con "destra", "sinistra" o "nessuno", ma un campo per inserire una classe css. Cassiopeia offre le classi “float-start” per posizionare l'intera immagine a sinistra (a destra per i linguaggi rtl), “float-end” per posizionare l'intera immagine a destra (a sinistra per i linguaggi rtl) e “float -none” per non fluttuare.

Naturalmente è anche possibile modificare la posizione dell'immagine utilizzando le proprie classi CSS. Esempi:

float-start
float-end
float-centerche sarebbe quindi la tua definizione CSS /media/templates/site/cassiopeia/css/user.cssnel file J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0):

.float-center.item-image {
  text-align: center;
}

Puoi utilizzare le classi a livello globale per tutti gli articoli, vai su Contenuto -> Opzioni -> Layout di modifica e inserisci la classe che desideri nel campo "Classe immagine a testo intero".

Oppure puoi utilizzare le classi su ogni singolo articolo:

Fonte: Viviana su https://cassiopeia.joomla.com/help

4.4.6. Stili del modulo: card o noCard

Vai a Modulo > [il tuo modulo] > scheda Avanzate > opzione Stile modulo
Lì vedi che Cassiopea spedisce con due stili propri
- carta
- nessuna carta

Naturalmente, hai ancora gli stili di modulo Joomla standard, vale a dire

html5
nessuno
schema
tavolo

4.4.7. Cambiare il Layout, cioè spostare le Posizioni

Se ispezioni un sito Web utilizzando Cassiopea, vedrai il seguente CSS:

@supports (display: grid) {
    .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 ."
          ". 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 .";
    }
    @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 ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-a bot-a ."
              ". bot-b bot-b bot-b bot-b ."
        }
    }
}

Questa è la griglia CSS. È molto facile e molto visivo come puoi vedere. Se sai poco o niente su CSS Grid, vale sicuramente la pena imparare le basi, ad esempio su https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas

Quindi, se desideri adattare il layout e avere ad esempio la visualizzazione desktop

la Posizione bannersubito dopo l'area del componente
e le posizioni in basso bot-ae bot-bsulla stessa riga cinquanta e cinquanta

tutto ciò che serve è aggiungere il seguente CSS /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

@supports (display: grid) {
    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas:
              ". top-a top-a top-a top-a ."
              ". top-b top-b top-b top-b ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-b bot-b ."
              ". banner banner banner banner ."
        }
    }
}

In altre parole, la cosa bella di avere un template basato su CSS Grid è che puoi cambiare il Layout solo con poche righe di CSS, senza dover modificare/overridere/fork alcun file PHP.

4.4.8. Modifica della larghezza delle aree Sinistra/Componente/Destra

4.4.8.1. Caso 1 – quando il Layout di Cassiopea è impostato su Fluid

Ciò che determina la larghezza delle colonne in questo caso è la seguente riga CSS (essendo CSS Grid):

body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,25%)) [main-end] 100px [full-end]
}

Nota la parte nel mezzo, vale a dire repeat(4,minmax(0,25%))Questo è equivalente a minmax(0,25%) minmax(0,25%) minmax(0,25%) minmax(0,25%):

Il primo minmax(0,25%)determina la larghezza della posizione Sinistra
L'ultimo minmax(0,25%)determina la larghezza della posizione Right
E i due minmax(0,25%)in mezzo fanno il 50% dedicato all'area Componente (essendo ad esempio l'Articolo selezionato)

Quindi, ad esempio, se voglio ridurre Sinistra e Destra dal 25% di larghezza al 20%, aggiungerei semplicemente il seguente CSS /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,20%) minmax(0,30%) minmax(0,30%) minmax(0,20%) [main-end] 100px [full-end]
}

4.4.8.2. Caso 2 – quando il Layout di Cassiopea è impostato su Statico

In questo caso, per uno schermo grande (ricordate: Cassiopeia è Mobile First) ciò che determina la larghezza delle colonne è la seguente linea CSS (sempre CSS Grid):

@supports (display: grid) {
  @media (min-width: 992px) {
    .site-grid {
      grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end]
    }
  }
}

Nota la parte nel mezzo, vale a dire repeat(4,minmax(0,19.875rem))(rem è un'unità relativa) Ciò equivale a minmax(0,19.875rem) minmax(0,19.875rem) minmax(0,19.875rem) minmax(0,19.875rem):

Il primo minmax(0,19.875rem)determina la larghezza della posizione Sinistra
L'ultimo minmax(0,19.875rem)determina la larghezza della posizione Right
E i due minmax(0,19.875rem)in mezzo fanno il 50% dedicato all'area Componente (essendo ad esempio l'Articolo selezionato)

Quindi, ad esempio, se voglio ridurre Sinistra e Destra da 19.875rem a 9.875rem (ma mantenere comunque la stessa larghezza totale), aggiungerei semplicemente il seguente CSS /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

@supports (display: grid) {
  @media (min-width: 992px) {
    .site-grid {
      grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,9.875rem) minmax(0,29.875rem) minmax(0,29.875rem) minmax(0,9.875rem) [main-end] minmax(0,1fr) [full-end]
    }
  }
}

Ovviamente potrei anche cambiare molto facilmente la larghezza totale giocando con la somma di 4*19.875rem

Vedi "Aggiunta di un'intestazione del sito" su https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template

Adatta semplicemente il seguente CSS alle tue esigenze e aggiungilo /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

/* CLASSIC BANNER */
.container-banner .banner-overlay {
    height: max(300px, 50vh); /* by default is 50vh in Cassiopeia */
}
@media (min-width: 768px) {
    .container-banner .banner-overlay {
        height: max(300px, 45vh);
    }
}
@media (min-width: 992px) {
    .container-banner .banner-overlay {
        height: max(300px, 40vh);
    }
}
@media (min-width: 1200px) {
    .container-banner .banner-overlay {
        height: max(300px, 35vh);
    }
}

Adatta semplicemente il seguente CSS alle tue esigenze e aggiungilo /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

/* CLASSIC BANNER */
.container-banner .banner-overlay .overlay {
    background-image: linear-gradient(120deg, rgba(231, 48, 42, 0.7), rgba(234, 174, 2, 0.7));
}

Cassiopeia prevede un Modulo Banner con un'immagine di sfondo, che occupa circa il 50% dell'altezza del viewport.

Per un sito web che volevo

per avere un video in background invece di un'immagine
il video in modo che occupi esattamente l'intera altezza del browser

Per farlo

creare un modulo HTML personalizzato di base senza modificare nessuna delle Opzioni
incolla il seguente HTML (adattalo ovviamente con il tuo video e immagine)
incolla il seguente CSS in /media/templates/site/cassiopeia/css/user.cssJ4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

HTML:

<div class="video-banner">
  <div class="text">
    <h1 class="display-4 text-thin">Title</h1>
    <p class="lead">Text</p>
    <p><a class="btn btn-primary btn-lg" href="#">Link</a></p>
  </div>
  <video poster="https://assets.codepen.io/6093409/river.jpg" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
   <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4" />
  </video>
</div>

CSS:

/* VIDEO BANNER - see https://codepen.io/woluweb/pen/rNGROZj */
div.video-banner {
    display: grid;
    grid-template-areas: "hero";
    place-items: center;
    height: max(300px, calc(100vh - 152px)); /* viewport height minus the fixed height of menu header on current website, with a minimum of X pixels */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}
div.video-banner > * {
    grid-area: hero; /* stacking all the child elements of the grid - could simply have set 1 / 1 / 2 / 2 instead of naming the area hero */
}
div.video-banner div.text {
    z-index: 1; /* to be sure that this is on top of the video */
    text-align: center;
    color: white;
    text-shadow: 2px 2px 5px black;
}
div.video-banner div.overlay {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, var(--cassiopeia-color-link), var(--cassiopeia-color-hover));
    opacity: 0.7;
}
div.video-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

4.6. Aggiunta di un Javascript personalizzato

4.6.1. Opzione 1: direttamente in user.js

Proprio come puoi creare un file CSS personalizzato /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)
Puoi creare un file JS personalizzato /media/templates/site/cassiopeia/js/user.jsin J4.1+ (era /templates/cassiopeia/js/user.jsin J4.0)

Digita ad esempio il seguente codice user.jse apparirà un popup nel front-end:

alert( 'Hello, world!' );

4.6.2. Opzione 2: utilizzo di un modello figlio

Ciò richiede J4.1 (data di rilascio: 15 febbraio 2022)

Vedi nelle Risorse le presentazioni fatte da Dimitris.

Vai a Sistema > Modelli di sito > Dettagli e file di Cassiopea
Fare clic sul pulsante Crea modello figlio
Chiudere
Il modello figlio è pronto
Può essere visualizzato accanto al modello padre in Sistema > Modelli sito
Puoi personalizzarlo (creare ad esempio un file index.php alla radice basato su quello originale ma dove modifichi/aggiungi qualcosa)
Vai a Sistema > Stili modelli sito
Rendi predefinito il modello figlio (o aprilo se desideri personalizzare le opzioni e/o le assegnazioni del menu)

4.6.3. Opzione 3: aggiunta di opzioni a Cassiopea con un modello figlio

Modificando il file XML del modello figlio, puoi facilmente aggiungere nuove opzioni al modello (area di testo, radio, ...). Quindi puoi personalizzare index.php, ottenere questo parametro e crearne qualcosa (come aggiungere uno script nella testa)

4.6.4. Opzione 4: utilizzo di un layout alternativo del modulo

In realtà con qualsiasi Template e con qualsiasi versione di Joomla, puoi anche aggiungere molto facilmente qualsiasi CSS o JS (inline o esterno). L'idea è di creare un modulo che inietti tutti i CSS e JS grazie a un layout alternativo (override). Il vantaggio di questa tecnica: puoi

utilizzare tutti i possibili Compiti disponibili nei Moduli in modo che il codice non venga caricato su tutte le pagine ma solo sulle pagine dove è necessario
filtro sulla lingua
avere una data di inizio/fine per la pubblicazione
…

Ecco la procedura

Crea un override per il modulo Custom HTML(nota che potresti effettivamente usare praticamente qualsiasi altro tipo di modulo)
- Vai a Sistema > Modelli di sito > [il tuo modello] Dettagli e file
- Seleziona la scheda Crea sostituzioni
- Clicca su mod_custom
- Ricevi il messaggio di confermaOverride created in /templates/cassiopeia/html/mod_custom
Trasforma la sostituzione in un layout alternativo
- Seleziona la scheda Editor
- Fare clic su /templates/cassiopeia > html > mod_custom > default.php
- Fare clic sul pulsante Rinomina file
- Assegna un nome a tua scelta, ad esempio add-to-head.php
Modifica il layout alternativo
- Ora invece di mostrare il "Contenuto" del Modulo HTML personalizzato, aggiungeremo semplicemente del codice che può aggiungere CSS e JS (inline di file locali/esterni) all'intestazione della pagina
- Vedi ad esempio il PHP di seguito (che vorrai adattare ovviamente)
- Vedi quelle risorse interessanti sull'aggiunta di JavaScript e CSS in Joomla
  https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page (addStyleSheet, addStyleDeclaration, addScript, addScriptDeclaration)
- Ma probabilmente ci sono anche modi ancora migliori per farlo "alla maniera Joomla4" ( per favore torna da me se puoi aiutare a migliorare questo esempio )
  https://docs.joomla.org/J4.x:Web_Assets
  https://docs .joomla.org/J4.x:Http_Header_Management
  https://www.joomlashack.com/blog/tutorials/web-assets-in-joomla-4/
Crea un modulo HTML personalizzato
- Vai a Contenuto > Moduli del sito
- Fare clic su Nuovo
- Seleziona Personalizzato
- Seleziona la scheda Avanzate
- Nell'opzione Layout, seleziona il layout alternativo che hai creato (in questo caso add-to-head)

Esempio arbitrario di codice per il nostro layout alternativo (aggiunta di un'animazione per .images, h2 e h3):

<?php
use Joomla\CMS\Factory;
defined('_JEXEC') or die;
$doc = Factory::getDocument();

// adding some css file - for pure css animation
// either via a local file (to be added manually)
// $doc->addStyleSheet("/templates/cassiopeia/css/animate.css", array('version'=>'auto'));
// either via a distant file - see https://cdnjs.com/libraries/animate.css
$doc->addStyleSheet("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css", [], ["integrity" => "sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==", "crossorigin" => "anonymous" , "referrerpolicy" => "no-referrer" ]);

// adding some script for animation using intersection-observer
// either via a local file (to be added manually)
// $doc->addScript('/templates/cassiopeia/js/animate.js', array('version'=>'auto'));
// either via an inline script
$myAnimation = <<<MYJS
document.addEventListener('DOMContentLoaded', function() {

    let observer = new IntersectionObserver(function (observables) {
      observables.forEach(function (observable) {
        // the element becomes visible
        if (observable.intersectionRatio > 0.5) {
          observable.target.classList.add('mytest')
          // observable.target.classList.remove('not-visible')
          observer.unobserve(observable.target)
        }
      })
    }, {
      threshold: [0.5]
    });

    // we observe the elements
    let items = document.querySelectorAll('.image, h2, h3')
    items.forEach(function (item) {
      observer.observe(item)
    })

});
MYJS;
// add the script
$doc->addScriptDeclaration($myAnimation);

con la corrispondente aggiunta /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0) dove sarebbero state definite tutte le animazioni:

h2.mytest, h3.mytest, p.mytest {
    animation: fadeIn; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s; /* don't forget to set a duration! */
}

4.6.5. Opzione 5 – per Bootstrap 5

Contesto:

Joomla 4 viene fornito con Bootstrap 5
Ma per rendere i tuoi siti Web ancora più performanti, BS5 Javascript non viene caricato per impostazione predefinita
Invece puoi decidere tu stesso nei modelli / sostituzioni / layout alternativi del tuo bambino per abilitare solo ciò di cui hai bisogno e dove ne hai bisogno

Supponiamo di dover utilizzare le schede in un determinato articolo. Lì copia e incolla il seguente HTML (tratto dagli esempi su https://getbootstrap.com/docs/5.0/components/navs-tabs/ ):

<div class="bd-example">
  <nav>
    <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
      <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
      <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    </div>
  </nav>
  <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
      <p><strong>Home text</p>
    </div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
      <p><strong>Profile text</p>
    </div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
      <p><strong>Contact text</p>
    </div>
  </div>
</div>

Guarda il risultato nel front-end: i Tab fanno appar, ma cliccando sul 2° o 3° Tab non “fa” nulla.

Questo perché dobbiamo ancora dire a Joomla di caricare Javascript per le schede, in particolare tramite

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tab', '.selector', []);

Puoi facilmente aggiungere qualsiasi JavaScript Bootstrap a Cassiopeia seguendo la documentazione ufficiale:

https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4

Se segui "Approccio 3: utilizzo di un modello di sostituzione" non dimenticare di aggiungere la classe bs-tabdel modulo al modulo che crei e quindi le schede funzioneranno.

Menu verticale nella barra laterale destra
Menù Orizzontale
Spostamento del menu nel piè di pagina

Vedi https://ltheme.com/use-the-menu-with-cassiopeia/

Cerca un'icona su https://fontawesome.com/v5.15/icons . Ad esempio fas fa-envelopee far fa-envelope(nota: fa s sta per Solid e far sta per Regular)
Vai a Menu > [il tuo menu]
Fare clic sulla voce di menu scelta
Apri la scheda Tipo di collegamento
Compila l'opzione Link Icon Class con il valore desiderato, ad esempiofas fa-envelope
Guarda il risultato nel front-end

Txs a Christiane Maier-Stadtherr per questa nuova funzionalità aggiunta in J4.1

Nota: questo non impone Font Awesome: funzionerà con qualsiasi font icona che il modello vuole usare (ovviamente il modello dovrebbe supportare un font icona per farlo funzionare)

Maggiori informazioni su https://github.com/joomla/joomla-cms/pull/34658

In Joomla 4.0 potresti raggiungere un risultato simile in modo manuale

Aggiungi alla voce di menu una classe di collegamento, my-icon-homead esempio
Quindi aggiungi il seguente CSS /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

ul.mod-menu a.my-icon-home::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "";
    margin-right: 4px;
    display: inline-block;
    width: 1.25em !important;
}

Oltre a questo, puoi anche usare solo le icone mappate qui come classi Font Awesome senza ulteriori indugi:

https://github.com/joomla/joomla-cms/blob/4.0-dev/build/media_source/system/scss/_icomoon.scss

Vedi "Modificare il layout del menu" su https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template

Tipicamente su un sito web dovresti avere nel menu Posizione i seguenti moduli in questo ordine

Logo (modulo HTML personalizzato)
Menù
Modulo di cambio lingua e/o modulo di ricerca

Ma sulla visualizzazione mobile questo è fastidioso perché il nostro menu Hamburger (supponendo che stiamo usando lo stile a discesa pieghevole per il modulo menu) rimane "nel mezzo". Se vuoi cambiare l'ordine e avere prima quel menu Hamburger, aggiungi semplicemente quanto segue /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

@media (max-width: 992px) {
  nav.navbar {order: -1;}
}

4.8. Accessibilità

Questa è una funzione J4, non una caratteristica di Cassiopea in quanto tale. Ma poiché Cassiopea è concepita da zero per essere Accessibile, vale la pena ricordare queste due caratteristiche:

abilitazione/configurazione del plug-in Accessibilità (questo aggiunge l'icona della sedia a rotelle in basso a sinistra)
- Vai su Sistema > Gestisci > Plugin
- Cercareaccessibility
- Modifica il System - Additional Accessibility Featuresplug -in
- Seleziona se vuoi front-end e/o back-end
- Imposta Stato su Abilitato
- Salva
abilitare/configurare il plug-in SkipTo (premere Tab all'apertura di una pagina o premere Alt+9 in qualsiasi momento per avere collegamenti generati dinamicamente a tutte le voci di menu ma anche a tutti i titoli e moduli)
- Vai su Sistema > Gestisci > Plugin
- Cercareskip
- Modifica il System - Skip-To Navigationplug -in
- Seleziona se vuoi front-end e/o back-end
- Imposta Stato su Abilitato
- Salva

5. Alcuni problemi, noti anche come miglioramenti in arrivo

Ho notato alcuni problemi con Cassiopea.

Su un sito Web, in genere avresti nell'intestazione

il logo
le voci di menu
il selettore della lingua e/o la ricerca

Ma su smartphone (più in generale su schermi piccoli) anche quando si utilizza il Menu a tendina a scomparsa di Cassiopea, cliccando sul Menu Hamburger si ottiene qualcosa di brutto:

spinge il resto degli elementi dell'intestazione. Nel mio esempio su questo screenshot
- il logo viene spinto a destra, in base alla lunghezza della voce di menu più lunga
- non c'è più spazio per il Language Switcher, quindi arriva su una nuova riga
- e ovviamente il contenuto dell'intero sito viene spinto verso il basso
invece di avere per esempio una bella tela

problema1

Sembra che il comportamento "predefinito" di Boostrap 5 sia effettivamente quello di spingere il contenuto verso il basso: https://getbootstrap.com/docs/5.0/examples/navbars/

Ma esiste anche una soluzione offcanvas: https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/

Qualcuno può per favore aiutare ad aggiungere un layout alternativo per il modulo menu al fine di implementare questa soluzione offcanvas (che potrebbe quindi essere un nuovo layout alternativo Cassiopeia del modulo menu)? Tx!

Ultime notizie : Viviana Menzel ci sta attualmente lavorando. Provaci!

Vedi https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4

Sono disponibili due layout alternativi: uno per il menu "predefinito" e uno per il "metismenu":

I file dovrebbero essere copiati in/templates/cassiopeia/html/mod_menu
Ci sono alcune righe di CSS da aggiungere /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

Per favore prova e dai il tuo feedback!

5.2. Problema 2: il pulsante Leggi di più parzialmente nascosto

[ modifica 2022.02.10 – Viviana Menzel ha proposto una soluzione per questo problema su https://issues.joomla.org/tracker/joomla-cms/36998 ]

In una vista blog, a seconda della lunghezza del testo e del viewport (visualizzazione mobile), il pulsante Leggi di più è spesso parzialmente o addirittura totalmente nascosto:

problema2

Viviana Menzel mi ha aiutato con il problema, notando che la disabilitazione della seguente riga CSS risolve il problema nella visualizzazione mobile:

.image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 0 40%;
}

Poiché questa riga è utile su un ampio schermo e apparentemente ha un effetto collaterale solo sulla visualizzazione mobile, probabilmente dovremmo semplicemente aggiungere una query multimediale per disabilitarla o adattarla.

Ad esempio, aggiungi quanto segue /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

@media (max-width: 992px) {
  .image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 1 40%;
  }
}

5.3. Problema 3: layout in visualizzazione blog

[ modifica 2022.02.10 – Viviana Menzel ha proposto una soluzione per questo problema su https://issues.joomla.org/tracker/joomla-cms/36998 ]

Quando si utilizza Classe articolo image-rightper una visualizzazione blog (ad esempio 1 colonna), ho notato che le immagini e il testo introduttivo non vengono visualizzati in modo uniforme: quando il testo introduttivo è troppo corto, ad esempio quando l'immagine a destra viene accanto al testo a sinistra ( invece di avere un layout 50%-50%).

Illustrazione con image-right image-alternate boxed(ma ho ricontrollato: image-rightè sufficiente per creare il problema)

problema3

Non ho avuto molto tempo per indagare su questo, ma come soluzione rapida ho aggiunto quanto segue /media/templates/site/cassiopeia/css/user.cssin J4.1+ (era /templates/cassiopeia/css/user.cssin J4.0)

.image-left .blog-item .item-content, .image-right .blog-item .item-content {
    flex: 1 0 40%;
}

Se puoi indagare ulteriormente e riparare Cassiopea per questo, sarebbe molto apprezzato.

Ubuntu

Grafica & Fotografia

CAD

MEDUSA4 Programmi CAD gratuiti

Web

Impossibile scaricare o salvare file

Speed tesr ip: 93.71.165.32

JOOMLA!

Override del template: come personalizzare le pagine di Joomla Override del template