Dopo la "piccola" e preziosa guida di tonicopi sull'uso del Suffisso classe CSS modulo, vorrei proporvi questi appunti per l'utilizzo del Suffisso classe CSS menu che permette la personalizzazione delle voci menù.
Questa personalizzazione è possibile sia sui template per la versione Joomla! 1.5 che su quelli per la verisione Joomla! 1.6.
Se non l'avete ancora fatto, leggete la guida di tonicopi, le premesse sono le stesse così come gli strumenti da utilizzare.
Lavoriamo anche noi sul templare rhuk_milkyway e personalizziamo il Menù Principale, quello che avrete di default se avevate caricato i dati di esempio.
Aprite il modulo menù associato al menù principale. Nei Parametri avanzati troverete il box per inserire il suffisso. Ad esempio _tasti
Inserendo solamente il suffisso in backend, l'aspetto del menù in frontend non cambia, ma permette la scrittura di una nuova classe css. |
Aggiungiamo quindi il css relativo al menu: ul.menu_tasti { |
|
|
da qui potrete personalizzare le voci del menù: corpo, carattere, interlinea, ecc. |
|
|
|
da qui potrete personalizzare le voci del sub-menù: corpo, carattere, interlinea, ecc. ul.menu_tasti ul ul.menu_tasti ul { font-size: 11px !important; line-height: 30px !important; list-style: none outside none; margin: 0 !important; padding-left: 10px !important; border-top: 1px solid #FFFFFF; background-color:#FFFFFF; } |
|
|
|
da qui background, margin e padding delle singole voci ul.menu_tasti li { |
|
|
|
e via via potrete aggiungere i css personali che permetteranno il risultato definitivo, come ad esempio: ul.menu_tasti li a:hover { color:#A10E13 !important; text-decoration: none; } ul.menu_tasti li:hover { background-color:#999999 !important; } ul.menu_tasti li#current { background-color:#C1C1C1 !important; } ul.menu_tasti li#current a { color:#A10E13 !important; } ul.menu_tasti li#current a:hover { color: #000 !important; } ul.menu_tasti li li { margin-top:1px !important } ul.menu_tasti li li:hover { background-color:#999999 !important; } |
|
|
|
Se poi voleste una voce in evidenza, cercate l'item relativo (es.: item48) e aggiungete: |
Un ringraziamento particolare a tonicopi, i cui articoli sono sempre utilissimi.
Articolo scritto da adottauncane - www.adottauncane.net