Come usare e dove inserire suffisso classe css modulo in Joomla

In questo tutorial vediamo che cosa è Suffisso Classe CSS modulo nella prima parte e nella seconda vediamo come atraverso questo Suffisso Classe posiamo modificare velocemente aspetto di un modulo, nel nostro caso di un modulo con menu, nel template Protostar di Joomla. Applicheremo uno degli effetti di animazione da articoli precedenti per un modulo scelto.

Risposte alle domande piu frequenti

  1. Modificare lo sfondo di un sito Joomla
  2. Creare una nuova posizione in un templatdi Joomla
  3. Inviare e-mail da joomla
  4. Recuperare la pasword del aministratore Joomla
  5. Come nasondere una parte del articolo in Joomla
  6. Come creare uno spoiler in joomla
  7. File manager direttamente in Joomla
  8. Come rispetare la Cookie law in Joomla
  9. Suffiso classe modulo Joomla.
  10. K2 di Joomla guida ai template.

 

Concetto base di Suffisso Classe CSS modulo in Joomla

Per poter utilizzare Suffisso Classe CSS modulo dobbiamo sapere linguaggio CSS. In parole semplici scrivere un Suffisso Classe css per un modulo significa applicare a questo modulo un determinato stile scritto nel nostro foglio di stili CSS del template. Quindi se creerò una classe con lo stile che prevede che il colore del testo sara rosso .testorosso{color:red}  e aplichero questo stile a quache modulo allora testo al inteno del modulo sara colorato di rosso. Diciamo che è la strada piu corta per prsonalizzare un modulo diretamente dal panello di ammnistratore in Joomla

E importante di fare lo spazio di un tab prima del nome della classe aplicata durante la sua scrittura nella shceda Avanzate come illustrato sotto.

suffiso classe modulo2

Vediamo come apparira la nostra classe nel codice sorgente della pagina

suffisso classe

 

 

Vediamo in pratica utilizzo di un Suffisso Classe CSS per modulo

Potrai aplicare qualsiasi stile atraverso questo questo suffisso classe. Basta che lo scrivi prima nel foglio di stile appartinente al template in uso.

E ora vediamo di  cambiare l'aspetto del nostro modulo con menu con gli stili dalla lezione precedente

1. Scelta effetto (classe) per voci di menu

Quindi al lavoro. Prendimo come esempio il primo effetto di animazione dalla raccolta

Vediamo il codice CSS del effetto di animazione che useremo.

/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}
.cl-effect-1 a::before {
    margin-right: 10px;
    content: '[';
    transform: translateX(20px);
}
.cl-effect-1 a::after {
    margin-left: 10px;
    content: ']';
    transform: translateX(-20px);
}
.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
    opacity: 1;
    transform: translateX(0px);
}

2. Passo due, aggiungere stili CSS  al foglio di stile .

La fase numero due è di inserire nostri nuove stili nel foglio di stili del nostro template  Per questo basterebbe aprire il fail template.css nel notepad++ o in un semplice block note e in fondo agiungere stili del effeto scelto cl-effect-1. ricopiando il codice CSS che abbiamo visto sopra
animazionemenu4

3. Modificare menu laterali con il suffisso classe css  modulo

Ora vediamo come aggiungere il nostro effetto al menu laterale quello che sulla destra nel template protostar. Qui è tutto molto piu semplice pasiamo nella scheda  gestione moduli  dal panello di amministratore, apriamo il nostro modulo e nella scheda “Avanzate”  semplicemente aggiungiamo come il suffisso classe CSS a questo modulo il nome del nostro effetto. Oviamente che i stili per questo effeto devono essere gia sul nostro foglio di stile del template in uso
animazionemenu6

3.1.  Il risultato della modifica del menu laterale

E vediamo il risultato
animazionemenu7
 

4. Le situazioni piu complicati

Vorrei subito sottolineare che per il menu principale non posiamo semplicemente aggiungere un suffisso classe css almeno in template Protostar. Ma gia che abbiamo toccato argomento vediamo come farlo. Per ottenere risultato dobbiamo correggere il fail index.php del template scelto nella sua struttura almeno per il nostro caso. Dobbiamo creare una scatola in piu con aiuto del tag div. Per questo dobbiamo aprire il fail index.php dalla cartella del template Protostar come sul disegno

animazionemenu1

e creare una  nuova "scatola" con aiuto di tag  <div> intorno al  nostro menu attribuendo a questo div la classe “cl-effect-1”  Vediamo il disegno del codice

animazionemenu2

 

4.1. Il risultato

e passando  al sito posiamo vedere il funzionamento del nostro effetto

animazionemenu3

 

4.2. Ulteriori modiffiche del menu

Con aiuto di Firebug posiamo scoprire che lo sfondo grigio che vedimo apparire al passaggio del maus è dovuto allo stile scritto nella  riga 2859 per eliminare questo colore posimo semplicemente  comentare  la  proprieta background-color: #eee;

animazionemenu5

 

Cosi eliminiamo lo sfondo grigio allo stato hover( al passagio del puntatore del mouse) da tutti i menu di template.

7. Ultimi consigli

Con la stessa tecnica usando Suffisso Classe  posiamo aggiungere qualsiasi stile  per qualsiasi modulo in un sito Joomla.

 

Letto 2349 volte