Back to top

Autore Topic: [RISOLTO]Override dei css di un modulo (icemegamenu)  (Letto 4517 volte)

Offline valpredina

  • Esploratore
  • **
  • Post: 68
  • Sesso: Maschio
    • Mostra profilo

Ciao a tutti,
ho quasi terminato la struttura del mio primo sito joomla e sono alle prese con le modifiche dei file css.
Per il template non mi pare di avere problemi, ho creato un file personal.css referenziato dall'index.php e il template viene effettivamente sovrascritto negli aspetti che ho specificato.
Mi piacerebbe fare altrettanto con i css dei moduli ed in particolare con i css del modulo icemegamenu.
Se modifico i css originali del modulo posti in modules/icemegamenu/themes/default/css ottengo l'effetto desiderato ma se cerco di farne l'override non funziona.
Seguendo le indicazioni del forum e sperando di non averle male interpretate, ho creato un css in /templates/protostar/css/modules/mod_icemegamenu.css che è un duplicato del default_icemegamenu.css del modulo originale e l'ho referenziato nel php (es. funziona una istruzione tipo * {color: red;}).
Se però cerco di modificare i colori delle classi icemegamenu e icesubmenu in mod_icemegamenu.css e faccio l'inspect con firefox, mi accorgo che il modulo attivo è sempre quello del modulo default_icemegamenu.css e che tutte le istruzioni da me inserite nel mod_icemegamenu.css appaiono barrate e quindi non eseguono l'override.
Dove sbaglio ?
« Ultima modifica: 10 Apr 2015, 17:21:03 da valpredina »

Offline sickseven

  • Esploratore
  • **
  • Post: 85
  • Sesso: Femmina
    • Mostra profilo
Re:Override dei css di un modulo (icemegamenu)
« Risposta #1 il: 10 Apr 2015, 09:58:16 »
Ciao Valpredina,

i CSS di tutte le tipologie di moduli possono essere personalizzati e sovrascritti mediante l'attribuzione di una ulteriore classe personalizzata, che puoi assegnare andando nelle opzioni "avanzate" del modulo. La classe andrebbe aggiunta all'interno del campo "Suffisso classe CSS modulo" lasciando uno spazio prima della prima lettera, così: " nomeclasse".

In questo modo il codice del modulo figurerà in questo modo: <div class="moduletable nomeclasse">

Ciao,
Barbara
« Ultima modifica: 10 Apr 2015, 10:13:15 da sickseven »
Nasci Produci Spendi e Muori

Offline sickseven

  • Esploratore
  • **
  • Post: 85
  • Sesso: Femmina
    • Mostra profilo
Re:Override dei css di un modulo (icemegamenu)
« Risposta #2 il: 10 Apr 2015, 10:04:39 »
Seguendo le indicazioni del forum e sperando di non averle male interpretate, ho creato un css in /templates/protostar/css/modules/mod_icemegamenu.css



Sì, credo che tu abbia male interpretato. E' sbagliato come concetto. Tutti i CSS di personalizzazione (moduli, menu, layout, plugin, breadcrumbs, paginazione, sidebar) andrebbero inseriti in un unico foglio di style: /templates/protostar/css/mio-tema.css e basta :-)


L'override a cui fai riferimento tu è un'altra cosa, e sicuramente riguardava il file .php, una roba tipo questa:
templates/protostar/html/mod_icemegamenu/default.php


Ciao,
Barbara
« Ultima modifica: 10 Apr 2015, 10:18:20 da sickseven »
Nasci Produci Spendi e Muori

Offline valpredina

  • Esploratore
  • **
  • Post: 68
  • Sesso: Maschio
    • Mostra profilo
Re:Override dei css di un modulo (icemegamenu)
« Risposta #3 il: 10 Apr 2015, 10:34:54 »
Ecco l'inghippo!
Primo: mi era sfuggito lo spazio davanti alla classe (lo so, lo ho anche letto, ma poi mi rimaneva nella tastiera  :-[
).
Secondo: avevo il dubbio che le nuove definizioni dovessero essere aggiunte solo al personal.css ma i miei test (senza lo spazio) non avevano dato il risultato sperato.
Terzo: qual'è la sintassi corretta per referenziare una classe che ha uno spazio in mezzo .icemegamenu suffisso o che altro ?

Quarto: C'è un altra soluzione più semplice ancora (appena scoperta, sul forum di icemegamenu) che non consiste nel fare l'override del css, ma nel creare un nuovo tema di icemegamenu, (duplicando il tema di default nella cartella del modulo), selezionando quindi in joomla il nuovo tema dalle opzioni del modulo di icemegamenu, e facendo li tutte le personalizzazioni.
Testato e funzionante, però non è fare l'override come intendevo io.

Barbara, grazie infinite

Gianluigi

P.S. appena provo metto come è andata

« Ultima modifica: 10 Apr 2015, 10:36:46 da valpredina »

Offline sickseven

  • Esploratore
  • **
  • Post: 85
  • Sesso: Femmina
    • Mostra profilo
Re:Override dei css di un modulo (icemegamenu)
« Risposta #4 il: 10 Apr 2015, 10:50:17 »
Terzo: qual'è la sintassi corretta per referenziare una classe che ha uno spazio in mezzo .icemegamenu suffisso o che altro ?

la classe corretta è questa:

Codice: [Seleziona]
.moduletable.nomeclasse { color:red; }
in questo modo sovrascrivi gli stili ereditati dalla classe: "modultable" e aggiungi quelli della classe: "nomeclasse"



Quarto: C'è un altra soluzione più semplice ancora (appena scoperta, sul forum di icemegamenu) che non consiste nel fare l'override del css, ma nel creare un nuovo tema di icemegamenu, (duplicando il tema di default nella cartella del modulo), selezionando quindi in joomla il nuovo tema dalle opzioni del modulo di icemegamenu, e facendo li tutte le personalizzazioni.
Testato e funzionante, però non è fare l'override come intendevo io.

Sì, è una tecnica anche questa, ma è più indicata per cambiare l'output del codice, ovvero i tag. Ma immagino che puoi anche sostituire le classi :-)
Ciao,Barbara
Nasci Produci Spendi e Muori

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Override dei css di un modulo (icemegamenu)
« Risposta #5 il: 10 Apr 2015, 14:07:26 »
scusate, ma penso che state sbagliando approccio con questo modulo:

in icemegamenu ci sono dei temi, 3 per la precisione: basta che scarichi la cartella ed il suo contenuto con il nome del tema che desideri modificare, la rinomini e la ricarichi. Adesso nel modulo usa questo tema, nessun aggiornamento potrà sovrascrivere questo tema perchè unico.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline valpredina

  • Esploratore
  • **
  • Post: 68
  • Sesso: Maschio
    • Mostra profilo
Re:Override dei css di un modulo (icemegamenu)
« Risposta #6 il: 10 Apr 2015, 14:35:27 »
Ciao Giusebos,
si, a q
uesta soluzione ci sono arrivato e infatti così funziona benissimo. Mi resta il rammarico di non avere capito come fare un override generico dei css di un modulo, magari potrebbe tornare utile in futuro.
Prima leggendo quà e là ho creato una cartella modules e ci ho ricopiato il css del modulo originale, referenziato in index.php e li ho tentato la personalizzazione. Non ha funzionato, rimangono validi solo i css originali, mentre le mie personalizzazioni firefox me le evidenzia sbarrate.
Ho provato anche la soluzione di sickseven ma anche in questo caso  non ha funzionato. In sintesi ho aggiunto il menu class suffix css " gian" al modulo di icemegamenu. Poi ho tentato la personalizzazione della classe dentro personal.css aggiungendo questo codice:

.icemegamenu.gian > ul {
   background: #1A1A1A;
   background: -web -linear-gradient(top, #3C3C3C, #1A1A1A) ;
   background: -o-linear-gradient(top, #3C3C3C, #1A1A1A);
   background: -ms-linear-gradient(top, #3C3C3C, #1A1A1A);
   background: linear-gradient(top, #3C3C3C, #1A1A1A);
   }

ho provato pure con

.modultable.icemegamenu.gian > ul {ecc. ecc.} con icemegamenu .gian > ul {} e tutte le possibili combinazioni ma senza risultato


ho cambiato anche il suffisso non lasciando spazi, mettendo un underscore davanti "_gian" ma non ho ottenuto risultati.

Mi servirebbe una guida passo passo (anche se il problema l'ho risolto per altra via) magari qualche anima pietosa mi potrebbe illuminare la via .........
Grazie a tutti




« Ultima modifica: 10 Apr 2015, 14:37:25 da valpredina »

Offline sickseven

  • Esploratore
  • **
  • Post: 85
  • Sesso: Femmina
    • Mostra profilo
Re:Override dei css di un modulo (icemegamenu)
« Risposta #7 il: 10 Apr 2015, 14:47:47 »

Ho provato anche la soluzione di sickseven ma anche in questo caso  non ha funzionato. In sintesi ho aggiunto il menu class suffix css " gian" al modulo di icemegamenu.

Ciao Valpredina:

1) Controlla nel codice della pagina se il CSS del modulo è posizionato prima o dopo il tuo foglio di stile (personal.css).
Se personal.css sta prima, l'ultimo foglio di stile sovrascrive quello precedente. Allora puoi mettere un !important prima della chiusura della parentesi graffa...(anche se sarebbe bene non abusarne e risolvere a monte il prblema facendo in modo che il tuo folgio di stile sia l'ultimo in assoluto tra tutti i fogli di stile)

2) Utilizzi Firebug? Mi è sembrato che hai menzionato l'inspect di Firefox, ma non sono la stessa cosa :-)

Ciao,
Barbara
----
Nasci Produci Spendi e Muori

Offline valpredina

  • Esploratore
  • **
  • Post: 68
  • Sesso: Maschio
    • Mostra profilo
Re:Override dei css di un modulo (icemegamenu)
« Risposta #8 il: 10 Apr 2015, 16:26:44 »
Ciao Barbara,
allora si utilizzo preferenzialmente l'inspector standard di Firefox, però ho anche firebug (ma francamente sono troppo ignorante per riconoscere significative differenze, non fanno le stesse cose ?).
So che l'ultimo css sovrascrive le analoghe impostazioni di quelli caricati prima, a meno che non siano flaggati !important. Ora nel mio index.php, personal.css viene dopo template.css, se i moduli e i css di icemegamenu vengano caricati prima o dopo personal non so dove andare a cercarlo.  :(
Apparentemente neanche !important sembra funzionare.
Grazie del tempo che mi dedicate


Offline sickseven

  • Esploratore
  • **
  • Post: 85
  • Sesso: Femmina
    • Mostra profilo
Re:Override dei css di un modulo (icemegamenu)
« Risposta #9 il: 10 Apr 2015, 16:37:30 »
Gli inspector dei vari Firefox, Safari, Chrome e Opera sono fatti tutti allo stesso modo. Cioè male (IMO). Con Firebug riusciresti chiaramente a vedere quali CSS sta leggendo il modulo che ti interessa. Se posti il link dei sito a cui stai lavorando posso darci un'occhiata e magari farti una schermata :-)
Nasci Produci Spendi e Muori

Offline valpredina

  • Esploratore
  • **
  • Post: 68
  • Sesso: Maschio
    • Mostra profilo
[RISOLTO] Re:Override dei css di un modulo (icemegamenu)
« Risposta #10 il: 10 Apr 2015, 17:12:58 »
Ciao Barbara,
avevo appena finito di scriverti la risposta e ho perso quanto avevo scritto.
Eureka! alla fine ci sono riuscito, grazie anche al tuo aiuto. Non me ne farò niente stavolta ma è tutta esperienza.
Come ho proceduto:
Ho provato a usare questo gruppo di istruzioni cambiando sistematicamente tutte le classi che mi indicava l'inspector nella zona dove cliccavo (queste che hanno funzionato non le avevo testate).
Alla fine ho tolto anche il suffisso, in quanto apparentemente non serve. Adesso se attivo queste istruzioni nel personal.css il colore di default cambia, e se le commento ritorno al default. Evidentemente l'override funziona !
Grazie ancora


Effettivamente se il ref della classe ha degli spazi nell'inspector es. nav-collapse icemegamenu collapse bisogna sostituirli con dei punti per referenziarla, forse è per questo che i miei primi tentativi sono andati a vuoto.

Per il menu principale
.nav-collapse.icemegamenu.collapse   > ul {
   background: #1A1A1A;
   background: -web -linear-gradient(top, #3C3C3C, #1A1A1A) ;
   background: -o-linear-gradient(top, #3C3C3C, #1A1A1A);
   background: -ms-linear-gradient(top, #3C3C3C, #1A1A1A);
   background: linear-gradient(top, #3C3C3C, #1A1A1A);
   }



/*  Submenu */
.icesubMenu.icemodules.sub_level_1 {
    background: #222;
   background: -moz-linear-gradient(#444, #111);
   background: -webkit-linear-gradient(#444, #111);
   background: -o-linear-gradient(#444, #111);
   background: -ms-linear-gradient(#444, #111);
   background: linear-gradient(#444, #111);
    border: 1px solid rgba(255,255,255,.3);
}

Offline sickseven

  • Esploratore
  • **
  • Post: 85
  • Sesso: Femmina
    • Mostra profilo
Re:[RISOLTO] Re:Override dei css di un modulo (icemegamenu)
« Risposta #11 il: 11 Apr 2015, 11:32:43 »
Molto Bene Valpredina!


A presto,
Ciao
Barbara
Nasci Produci Spendi e Muori

 



Web Design Bolzano Kreatif