Colore Menu

[pirateparty]

Ciao a tutti, vorrei che i colori del Menu del mio sito, su cui è attivo il template Rhuk Milkway.
Per farvi un'idea, vorrei i menu così: [size=78%]http://forum.xda-developers.com/[/size]
Mentre la situazione, nel mio sito, è questa: [size=78%]http://pirateparty.altervista.org[/size]


Grazie a tutti dell'aiuto!

[giovi]

siamo spiacenti pirateparty ma se tu metti il sito offline noi non possiamo aiutarti...

[pirateparty]

Scusami. Messo ONLINE.

[giovi]

ti conviene fare una modifica strutturale al template ed organizzare nel fil index.php il menu in questo modo:
crei un div di larghezza 100% in cui inserisci la posizione in cui ora è il menu con il tag <jdoc:include  ......
nel css imposti lo stile delle voci come #nuovodiv li{float:left;} ed il resto come lo desideri!

[pirateparty]

Scusa, ma non sono così pratico di CSS e PHP.
Puoi spiegarmi passo passo come muovermi?

[giovi]

seppure sia un template di base non lo conosco per il semplice fatto che l'ho usato veramente poco così come sono poco pratico di joomla! 1.5.La procedura generale comunque prevede di incollare all'interno del file index.php, nel punto desiderato, un codice del genere:

Codice: [Seleziona]

<div id="menuprincipale"><jdoc:include type="modules" name="menuprincipale" /></div>
poi nel css (cioè nel file template.css o layout.css):

Codice: [Seleziona]

#menuprincipale{
width:100%;
}
#menuprincipale ul{
list-style:none;
}
#menuprincipale ul li{
float:left;
positon:relative;
top:0;
bottom:0;
border-right:1px white solid;
padding:5px;
}
quindi pubblicherai il modulo menu nella posizione "menuprincipale" (lo scrivi tu a mano, senza sceglierlo dalla tendina!)

[pirateparty]

Provato.. ma guarda che ne esce fuori:  http://pirateparty.altervista.org/ :S
Come si può fare??

[giovi]

io invece direi proprio che ci sei
aggiungi questo al css del div "menuprincipale"

Codice: [Seleziona]

text-align:left;
background:url('http://pirateparty.altervista.org/templates/rhuk_milkyway/images/mw_menu_normal_bg.png')

[pirateparty]

Ho tolto un attimo per comodità la slideshow. Ecco il risultato:  http://pirateparty.altervista.org/

[giovi]

allora prova aggiungendo

Codice: [Seleziona]

height:32px;allo stesso attributo
e modificando il width al 90%!

[giovi]

 nelle impostazioni del menu, hai selezionato come tipo di menu legacy?!

[pirateparty]

Ho aggiunto la height e alle impostazioni del menu ho messo Legacy Flat,  e a quanto pare si vede meglio...
Ora??

[giovi]

ora prova ad aggiungere a  #menuprincipale ul li{} la stessa height...

[giovi]

...ma soprattutto elimina quel padding:30px!!! Cos'è una gigantografia del tuo menu?!? Al massimo riducilo a 5px...

[pirateparty]

Eseguito... ed ora??  http://pirateparty.altervista.org/


Volevo solo ricordarti, ringraziandoti innanzitutto dell'aiuto, che vorrei farlo assomigliare a questa barra dei menu: [size=78%]http://forum.xda-developers.com/[/size]

[giovi]

come colori ci siamo?

se vuoi fallo assomigliare in toto a quello fà così, sostituisci se già present queste dichiarazioni di stile, altrimenti aggiungile:

al selettore #menuprincilpale li:

Codice: [Seleziona]

border-right: 1px solid #443218;border-left: 1px solid #573E1B;al #menuprincipale:

Codice: [Seleziona]

background: url(http://media.xda-developers.com/images/navbarbg.png) repeat-x;
poi aggiungi queste due righe:

Codice: [Seleziona]

#menuprincipale ul li a{color:#C2BDB5;}
#menuprincipale ul li a:hover{color:#ffd200 !important;}dovrebbe essere tutto!!!

[pirateparty]

Controlla... cioè, più o meno ci siamo, vorrei:
-Intanto togliere quelle linee lunghe che scendono;
-allineare la barra subito sotto alla fine del rettangolo del logo;
-che quando passa il mouse sopra a uno dei tasti cambi colore;
-cambiare colore e togliere le sottolineature quando passa il mouse;
-che la barra parta da una parte all'altra della pagina COME GLI ALTRI MODULI, cioè che finisca prima e che inizi un pò dopo....


FINE. Lo so che è molto, e ti ringrazio ancora della mano che mi stai dando, ma ti sarei molto MOLTO grato se mi potessi ancora aiutare...

[giovi]

Guarda, facendo le ultime modifiche che ti ho suggerito dovresti avere tutto come nel sito che linki, comunque domani mattina se riesco ti riassumo le varie modifiche così le confronti con quelle che hai fatto tu!

[pirateparty]

Guarda, facciamo che ti lascio il template.css (ti dò il testo in un txt perchè sennò non posso metterlo come allegato...), tu controlli e in caso modifichi un pò e poi me lo rigiri, cosi ti rubo meno tempo..
Grazie di tutto!

[allegato eliminato da un amministratore essendo vecchio più di un anno]

[giovi]

anche con il file index.php allegato non potrei farci niente perchè non ho il resto del materiale per testarlo...

[pirateparty]

E' solo per farti vedere se ho scritto bene, così io poi, se lo correggi, lo metto e lo testo...
Dimmi se ti serve altro...

[giovi]

per avere un menu come quello devi avere questo codice nell'html (questo e nient'altro!):

Codice: [Seleziona]

<div id="menuprincipale"><jdoc:include type="modules" name="menuprincipale" style="none" /></div>e queste le uniche dichiarazioni di stile da aggiungere al css oltre quelle che c'erano già quando hai scaricato il template:

Codice: [Seleziona]

div#menuprincipale{
  margin: 0 10px; //misura modificabile DOPO esserti accertato che il resto funziona
  height: 30px; // idem
  padding:3px; //come sopra
  background: url(http://media.xda-developers.com/images/navbarbg.png) repeat-x;}
div#menuprincipale ul li{display:inline; position:relative; top:0; bottom:0; height:30px; border-right: 1px solid #443218;border-left: 1px solid #573E1B;}
div#menuprincipale ul{list-style:none;}
div#menuprincipale a{color:#C2BDB5;}#menuprincipale a:hover{color:#ffd200;}Sono le stesse proprietà che usa l'altro sito, non c'è nulla da modificare prima di visualizzare il risultato. Usa queste impostazioni e da quello che ne verrà fuori puoi regolare le varie impostazioni

[pirateparty]

DAVVERO GRAZIE! Ora me lo modifico.. solo un'ultimissima domanda: come faccio a spostare tutta la barra del menu (quindi #menu principale, #menuprincipale ul li, #menuprincipale ul, #menuprincipale a, #menuprincipale a:hover) più in alto di 42px?


Dopodichè ti lascerò libero!

[giovi]

mmmm... allora secondo me (ti ripeto che non conosco affatto il template!) dovresti semplicemente incollare il codice html in una posizione più appropriata (ad esempio al posto del menu che c'era prima!) oppure tramite css (è una soluzione un pò più sporca ma più semplice e dovrebbe funzionare) applichi questa dichiarazione di stile:

Codice: [Seleziona]

div#menuprincipale{
position:relative; top:-42px;
}oppure

Codice: [Seleziona]


div#menuprincipale{
margin-top:-42px;
}


[pirateparty]

Wow, ce l'abbiamo fatta! Grazie mille!


Dici che i codici CSS per modificare il font e la grandezza li trovo su internet?

[giovi]

nel wiki c'è una guida di tonicopi su come inserire l'effetto aumenta-diminusci carattere, per quanto riguarda il font invece c'e anche una guida ma se preferisci puoi utilizzare cufon per rendere tramite immagini li font desiderato (funziona anche sui browser meno recenti che abbiano java attivo).