Formattazione menu

[Mvonrichtofen]

Ho 4 menu a sinistra e vorrei che ognuno avesse la sua grafica, ad esempio un'immagine diversa accanto al titolo. si può fare?
Cioè mettiamo che ho 2 menu: uno "hardware" e l'altro "software" entrambi in posizione "left" è possibile associargli due stili diversi?

Ho visto che nel caso delle voci di menu è molto semplice: basta aggiungere un suffisso alla classe "menu" (ovvereo mainlevel-hardware) ed il gioco è fatto, ma x il modulo facendo la stessa cosa nn ci riesco..
Potrei aggirare il problema  posizionando i menu in posizioni diversi xò vorrei evitare di dover usare 4 "user" x fare un menu che è tutto in sequenza a sinistra..

Qualche idea? 

[Semyase]

guarda, da quel che ho visto io , nel pannello di controllo di joomla, nella finestra dei -moduli sito- corrispondnete ai menù, puoi impostare per ogni menù delle classi di css differenti.
(che dovrebbe essere quello che hai visto anche tu)
Se sai scrivere il css per il menù dovrebbe essere facile, poi li metti tutti nel modulo left.
attualmente IO non saprei come fare per mettere un immagine nel titolo, ma puoi cmq differenziarli per colori tramite i css o mettere una immagine apposita accanto a ciascuna voce, quello sembra essere molto facile.
Aspettiamo pareri di persone più esperte
(io intanto ti ho detto quello poco che sapevo  )
ciao

[stekko]

giusto cio che ti dice semyase credo...
dal menu moduli dai ad ogmi menu una classe css
naturalmente prima le devi creare nel file template.css.css
ecc ecc.
cia'

[Mvonrichtofen]

Nonostante tutte le prove fatte in questi giorni nn sono ancora riuscito a venire a capo del problema. 

Ora io ho un menu a sinistra composto da due sezioni: hardware e software.
Lo stile associato al menu l'ho chiamato "menu" (che fantasia, eh? ), ovvero:

Codice: [Seleziona]

.menu table.moduletable th{
width: 170px;
height:80px;
background:url(../images/hardware.gif;
background-position:left bottom;
font : bold 11px Verdana, sans-serif, Helvetica ;
color: #FFFFFF;
text-align: left;
text-indent: 10px;
line-height:15px;
}
Questa classe però mi associa la stessa immagine a tutte e due le sezioni mentre io vorrei che la sezione software avesse la sua immagine "software.gif" come sfondo.
Ho provato allora ad aggiungere il suffisso "-software" nel campo "Suffiso class CSS modulo" in modifica moduli sito aggiungendo poi il seguente codice al css:

Codice: [Seleziona]

.menu-software table.moduletable th{
width: 170px;
height:80px;
background:url(../images/software.gif);
background-position:left bottom;
font : bold 11px Verdana, sans-serif, Helvetica ;
color: #FFFFFF;
text-align: left;
text-indent: 10px;
line-height:15px;
}
ma nn me lo prende mai..

Dove sbaglio?

[maria.p]

ma quando parli di sezioni cosa intendi i menu devono essere distinti non uno diviso in 2 ma due separati, da ciò che vedo credo che ci sia qualche errore nei nomi delle classi, se una la chiami menu e l'altra software nella seconda il nome menu deve sparire

[Mvonrichtofen]

I menu sono distinti.

Da "menu-gestion menu" ho creato due nuovi menu "hardware" e "software" appunto e poi dalla sezione "moduli-moduli sito" li ho posizionati entrambi in "left".

Ora essendo tutti e due in posizione "left" hanno entrambi associata la stessa classe x il titolo:

Codice: [Seleziona]

#leftmain {
margin: 0;
padding:0px;
text-align: left;
width: 100%;
}

#leftmain table.moduletable th, #rightmain table.moduletable th {
height:80px;
background:url(../images/hardware.gif) repeat-x;
background-position:left bottom;
font : bold 11px Verdana, sans-serif, Helvetica ;
color: #FFFFFF;
text-align: left;
text-indent: 10px;
padding-top: 0px;
margin: 0px;
line-height:15px;

}
#leftmain table {
font : normal 11px Verdana, sans-serif, Helvetica ;
color: #666666;
text-align : left;
padding : 2px 0px 0px 0px;
}
#leftmain table.moduletable tr {
}
Io invece vorrei che accanto al titolo della sezione "software" apparisse l'immagine "software.gif" e nn quella "hardware.gif" ma nn so come fare...

[Nemesis19]

ciao! mi vorrei accodare al tuo post...ho postato su tricks and tips un post sulla stessa cosa...e mi scuso perché cerco sempre prima sui forum, ma devo aver cercato male...

ora provo anche io e vediamo se riesco

no, purtroppo incontro le stesse difficoltà. sto inoltre cercando eventuali componenti o moduli che mi permettono di fare questa cosa

[sali40]

Prova costruendo due nuove classi. Al termine "moduletable"aggiungi un suffisso (io ho usato "soft").

Codice: [Seleziona]

#leftmain {
margin: 0;
padding:0px;
text-align: left;
width: 100%;
}

#leftmain table.moduletable th, #rightmain table.moduletable th {
height:80px;
background:url(../images/hardware.gif) repeat-x;
background-position:left bottom;
font : bold 11px Verdana, sans-serif, Helvetica ;
color: #FFFFFF;
text-align: left;
text-indent: 10px;
padding-top: 0px;
margin: 0px;
line-height:15px;

}

#leftmain table.moduletablesoft th {
height:80px;
background:url(../images/software.gif) repeat-x;
background-position:left bottom;
font : bold 11px Verdana, sans-serif, Helvetica ;
color: #FFFFFF;
text-align: left;
text-indent: 10px;
padding-top: 0px;
margin: 0px;
line-height:15px;

}


#leftmain table {
font : normal 11px Verdana, sans-serif, Helvetica ;
color: #666666;
text-align : left;
padding : 2px 0px 0px 0px;
}
#leftmain table.moduletable tr {
}
#leftmain table.moduletablesoft tr {
}


Nel modulo menu, nello spazio per il suffisso di classe scrivi "soft" (senza gli apici).
Fammi sapere

[Nemesis19]

sai che ti adoro?

funziona! adesso però l'ultimo problema  è un altro. Ovvero, nel titolo del menu scrivo "menu" per esempio, ma se nel css metto questa immagine di background e poi seleziono di non visualizzare il titolo del menu, l'immagine capo menu non si vede ovviamente...

come aggiro il problema?

[sali40]

Riducendo al minimo la dimensione del testo dovrebbe funzionare

Codice: [Seleziona]

#leftmain table.moduletablesoft th {
height:80px;
background:url(../images/software.gif) repeat-x;
background-position:left bottom;
font : 1px Verdana, sans-serif, Helvetica ;
color: #FFFFFF;
text-align: left;
text-indent: 10px;
padding-top: 0px;
margin: 0px;
line-height:15px;

}

Edit: forse con 1px ti viene fuori un fastidioso tratteggio. Prova con 0 (sinceramente non ho la minima idea se possa funzionare )
Mi sono inoltre accorto che il tag "glow" (che avevo messo per evidenziare la riga) qui nei post, non funziona se dentro il tag "code". Quindi quella parte va tolta. Anzi, la tolgo

[Nemesis19]

ho messo il font-size a 0px e funziona sia su firefox che safari, spero IE7 non mi dia un bidone...

grazie mille tantissimo! se sei delle mie parti ti offro volentieri un caffé!

grazie ancora

[Nemesis19]

comunque tengo presente che il trucco in questione non è valido per tutti i browser.
allora è utile mettere in questo modo:

table.moduletable_animemanga th {
   background-image: url("../images/menu_animemanga.gif");
   width: 180px;
   height: 65px;
   font-family: Tahoma;
   font-size: 0px;
   color: #ffffff;
   color: transparent;
   text-align: right;
   font-weight: lighter;
}

definizioni multiple, perché safari legge in un modo, firefox un altro e opera un altro ancora e sono tutti contenti. ovviamente i colori e gli allineamenti sono tagliati per nascondere i titoli menu in base alle immagini che ho messo di sfondo ai TH dei menu.