Non sapevo bene come chiamare questo post viste le varie voci trovate in ricerca.
Cmq ne rende l'idea estrema.
Ho creato un menu nella barra sinistra, ma ora ho seri problemi nella personalizzazione del css a causa delle classi e id che di default mi crea.
Quindi vorrei crearmi un menu ad hoc, con classi e id, proprie.
Non saprei proprio da dove iniziare, il titolo ne è un esempio :D
Vorrei aggiungere che il menu personalizzato dovrebbe essere agganciato solo alla barra sinistra, e solo ad un "titolo menu" specifico.
Tutti gli altri menu vorrei che continuassero a funzionare con il default
Se guardi il file sorgente, tramite browser, del tuo sito vedrai che ogni blocco, ogni menù e addirittura ogni link ha una sua posizione specifica e un id univoco. Lavorando con i css riesci a modificare ogni singolo elemento del sito senza dover fare altro. Nel tuo caso devi vedere che id ha il blocco del tuo menù che vuoi modificare e poi tramite css lo modifichi. ti faccio un sempio. se vai su www.devilhouse.org/devilab vedrai che ho blocchi con colori diversi e il blocco con gli ultimi commenti ha anche la visualizzazione dei link diversi. Per farlo ho usato esclusivamente i css. Prima ho guardato il sorgente della pagina per estrapolare gli id e le class che mi interessavano e poi all'interno del file css ho aggiunto:
Per cambiare lo sfondo, il padding, il margin, il colore del testo, etc. ho lavorato sulla classe content che si trova all'interno del blocco di classe block-comment che si trova all'interno della colonna di id sidebar-left
#sidebar-left .block-comment .content {background-color: #223;
font-size: 12px;
color: #fff;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin: 0px;
margin-bottom: 5px;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
position: relative;
top: 0px;
left: 10px;
}
Per cambiare invece l'aspetto dei link e della lista ho lavorato su:
#sidebar-left .block-comment .content li {background-color: #223;
font-size: 12px;
color: #667;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin: 0px;
margin-top: 3px;
line-height: 7px;
border-top: 0px solid #000;
border-right: 0px solid #000;
border-bottom: 1px solid #000;
border-left: 0px solid #000;
}
#sidebar-left .block-comment .content li a, #sidebar-left .block-comment .content li a:link, #sidebar-left .block-comment .content li a:visited {
background-color: #223;
font-size: 12px;
color: #fff;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
line-height: 12px;
border-top: 0px solid #000;
border-right: 0px solid #000;
border-bottom: 0px solid #000;
border-left: 0px solid #000;
}
#sidebar-left .block-comment .content li a:hover, #sidebar-left .block-comment .content li a.active {
background-color: #223;
font-size: 12px;
color: #fcc;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
line-height: 12px;
border-top: 0px solid #000;
border-right: 0px solid #000;
border-bottom: 0px solid #000;
border-left: 0px solid #000;
}
Il codice è ancora molto sporco e ci sono un sacco di parametri che dovrò eliminare, ma ti ho postato questo esempio giusto per cercare di spiegare il concetto. :)
Con i css, e nient'altro, puoi modificare l'aspetto di qualunque "oggetto" contenuto all'interno del sito. :)
Guarda mi hai dato nuove speranze! :D.
Io inizialmente ho fatto così (utilizzando quindi il menu de default....che ormai so a memoria)
Menu non espanso:
<div class= blocco mio><ul class= menu>
<li class= leaf first>
<li class= collasped>
<li class= leaf active-trail>
<li class= leaf last>
</ul>
</div>
Menu espanso:
<div class= blocco mio><ul class= menu>
<li class= leaf first>
<li class= expanded active-trail>
<ul class= menu>
<li class= leaf first>
<li class= leaf>
<li class= leaf active-trail>
<li class= leaf last>
</ul>
<li class= leaf>
<li class= leaf last>
</ul>
</div>
active-trail è la pagina in cui mi trovo!
Ecco il mio css:
Mi scuso ma nn è molto identato
.sidebar {background: #d6d5d0;
width: 230px;
vertical-align: top;
padding-top: 10px
}
<!-- Elimino le freccettine -->
#block-menu-menu-mio ul li.leaf,
#block-menu-menu-mio ul li.collapsed,
#block-menu-menu-mio ul li.expanded {
list-style-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
<!-- Titolo del menu -->
#block-menu-menu-mio div.b4heading {
color: white;
background: #5e5f5a;
font-weight: bold;
margin: 0pt;
padding: 11px 10px 10px;
}
#block-menu-menu-mio ul.menu {display: block; }
#block-menu-menu-mio ul.menu {list-style-type: none; width: 100%; margin: 0; padding: 0; background: white; width: 230px; border-right: 1px solid #d6d5d0;}
#block-menu-menu-mio ul.menu li {display: block; list-style-type: none; border: 0px none; padding: 0px; color: #555c5f; }
#block-menu-menu-mio ul.menu li a {display: block; margin: 0px; text-decoration: none; padding: 4px 10px; font-weight: bold; background: #d6d5d0; color: #555c5f; }
#block-menu-menu-mio ul.menu li a:hover {display: block; font-weight: bold; background: #fff; color: #006cb7; }
#block-menu-menu-mio ul.menu li.active-trail {width: 209px; background: #fff; font-weight: bold;}
#block-menu-menu-mio ul.menu li.active-trail a {width: 209px; display: block; background: #fff; color: #016bb5; font-weight: bold;}
#block-menu-menu-mio ul.menu li.active-trail a:hover {width: 209px; display: block; color: #37adff;}
ul.mainmenu li.subitem {width:199px; padding-left: 10px; font-size: 11px;}
#block-menu-menu-mio li.expanded li.leaf a {width: 199px; display: block; padding: 2px 6px; background: #fff; border: 1px solid #fff; font-weight: normal; color: #555c5f; }
#block-menu-menu-mio li.expanded li.leaf a:hover {width: 199px; display: block; padding: 2px 6px; background: #E5E5DD; color: #006cb7; border: 1px solid #E5E5DD; font-weight: normal; margin-right: 10px; }
#block-menu-menu-mio li.expanded li.active-trail {width: 199px; padding-left: 10px; font-size: 11px; }
#block-menu-menu-mio li.expanded li.active-trail a {width: 199px; display: block; background: #f3f3eb; color: #006cb7; border: 1px solid #aeafa9; font-weight: normal; padding: 2px 6px; margin-right: 10px;}
#block-menu-menu-mio li.expanded li.active-trail a:hover {width: 199px; display: block; background: #E5E5DD; border: 1px solid #aeafa9; font-weight: normal; padding: 2px 6px; margin-right: 10px;}
#block-menu-menu-mio li.expanded li.last {width: 199px; padding-left: 10px; font-size: 11px; }
#block-menu-menu-mio li.expanded li.last a {width: 199px; display: block; padding: 2px 6px; margin-bottom: 5px; background: #fff; border: 1px solid #fff; font-weight: normal; margin-right: 10px; color: #555c5f; }
#block-menu-menu-mio li.expanded li.last a:hover {width: 199px; display: block; padding: 2px 6px; margin-bottom: 5px; color: #006cb7; background: #E5E5DD; border: 1px solid #E5E5DD; font-weight: normal; margin-right: 10px;}
Il problema è che con questa classificazione del menu, applicando questo css, IE6 mi si spacca di brutto Firefox invece lo visualizza benissimo.
Volevo riorganizzare il codice del menu per renderlo piu leggero e digeribile da ie6.
E' una disperata situazione! Ho provato a modificare il css ma IE va un pò per conto suo
Sì, Ie è un problema... c'ho messo una nottata intera per rendere il mio sito almeno "guardabile" con Ie, ma alla fine ce l'ho, più o meno, fatta (apparte il menù di informatica che, quando si è su un articolo di informatica, quando è aperto sfora oltre la dimensione della sidebar e me la manda a fondo pagina... però devo anche dire che su quel menù ci devo ancora lavorare perché non me n'ero accorto che su explorer si creava questo problema).
Ti consiglio comunque di rifarti il css e di utilizzare le classi che ti fornisce drupal senza crearne di nuove (che poi tanto drupal le sue le mette lo stesso per cui i parametri che dai tramite il tuo div esterno spesso possono essere sovrascritte o comunque possono andare in conflitto con i parametri che gli passa drupal... probabilmente è anche per questo che Explorer ti sputtana tutto).
Una cosa... nel tuo primo box di codice (quello del menù non espanso) alla quarta riga hai scritto "collasped" invece di "collapsed". Se l'hai scritto a memoria e hai solo sbagliato a digitare fai finta che non ti abbia detto niente, ma se invece hai fatto un copiaincolla dal tuo css... beh, io correggerei. ;)
No no, scritto a manina!
In effetti, col tempo che ho (che scarseggia sempre), mi conviene rifare il css, anche se non saprei proprio come rifarlo, visto che così mi piace e funziona! max cambio un pò la grafica e Bona!
Poi quando ho tempo, smonto le classi del menu e lo rifaccio!(ovviamente per un menu 2 livelli)
Se può interessare, io sto rifacendo dei menu a tendina in alto (al posto dei primary links).
Per fare questo mi sono creato un blocco personalizzato ed ho caricato il mio js ed il mio css tramite la funzione drupal_add_js e drupal_add_css
L'unica cosa (che ho già postato in un altro post) e che non riesco a sovrascrivere alcune proprietà dell' #header-region .
A parte questo il menu è strapersonalizzato (il menu viene generato direttamente richiedendo dei dati dal db).
--
Il saggio non è colui che sa tutto, ma colui che sa dove trovare le risposte
Per drupal 5.x.... esiste Block Class...
Permette di specificare una classe per ogni blocco (direttamente dal menu creazione dei blocchi)...
Molto semplice e funzionale... senza impazzire a guardare i sorgenti...
... sono disperato perchè non esiste per 6.x...!!!
Ciao
Dret.
Trovato un rimpiazzo...!!! Grande...
Se vi serve provate questo:
http://drupal.org/project/blocktheme
Block Theme gira sia su 5.x e ancora meglio su 6.x...
E' livemente meno immediato di Block class... ma fa le medesime cose...!! Ogni blocco quindi potrà avere una sua classe o un suo ID per customizzarlo graficamente a vostro piacimento...
Nella pagine c'e' un link ad un tutorial video (in inglese) molto esauriente...!!!
Ciao!
Dret.