[RISOLTO] personalizzare i menu (sfondo, carattere, font ecc..) tramite CSS

[fedeweb]

Ciao a tutti, sono al primo post su questo forum..
vi chiedo scusa anticipatamente se sto sbagliando sezione o se questa domanda è stata già fatta,ma dopo aver cercato di continuo non sono riuscito a trovare nulla..
veniamo al dunque..

ho installato joomla 1.5,avendo conoscenze di html e css ho creato un template da zero è tutto è filato liscio (così pare..)il mio problema riguarda i menù,vi posto due domande:
1) che differenza c'è tra mainmenu e altri menù?
2)dopo aver creato un menù come si fa a personalizzarlo?cioè inserire uno sfondo al menù, inserire il colore del testo,il tipo di font...impostare i vari cellspacing e cose del genere?

Ero abituato a creare siti manualmente con html e css quindi ora non capisco come collegare un menù al foglio css in modo tale da poterlo personalizzare...

Spero di essere stato chiaro, aspetto vostre risposte.
Vi ringrazio anticipatamente!
..::fedeweb::..

[frascan]

Ciao e benvenuto sul forum.
Se hai una certa padronanza dei css allora sei a buon punto direi. Devi solo comprendere meglio la struttura del css di joomla e queste due guide dovrebbero esserti di aiuto:

http://wiki.joomla.it/index.php?title=Foglio_di_Stile_base_per_i_template_di_Joomla_1.5

http://wiki.joomla.it/index.php?title=Guida_alla_realizzazione_di_template_per_Joomla_1.5

Una volta capito come funzionano le classi di base di joomla allora potrai modificarle a piacere e realizzarne di totalmente nuove.

Un consiglio che mi sento di darti anche è quello di prendere 2-3 templates differenti ed analizzarli così comprendi ancora meglio le strategie usate da differenti sviluppatori.

[ariess]

benvenuto fedeweb 

1) che differenza c'è tra mainmenu e altri menù?

nessuna, è lo stesso modulo al quale gli vengono dati diversi nomi per il posizionamento

2)dopo aver creato un menù come si fa a personalizzarlo?cioè inserire uno sfondo al menù, inserire il colore del testo,il tipo di font...impostare i vari cellspacing e cose del genere?

tramite il "Suffisso classe CSS" che trovi tra i paramtri di ogni modulo puoi richiamare una classe CSS che ne definisce le caratterische.
esempio:
nel CSS andrai a creare una classe in questo modo

Codice: [Seleziona]

.menu_miomenu{
   display:block;
margin: 0px;
..........
}

e in "Suffisso classe CSS" lo richiamerai con "_menu"

ciao

[fedeweb]

grazie per le risposte!

 @frascan: ho dato un occhiata veloce ai due link, quello dei template già l'avevo visto ed infatti tramite quella guida ho creato un template da zero. Il link dei fogli css merita di essere approfondito, appena mi libero dagli impegni di questi due giorni ti farò sapere!

@ricdata: non riesco a capire perchè nel suffisso classe CSS se inserisco " _menu " poi nella pagina css dovrei inserire

.menu_miomenu{
      display:block;
      margin: 0px;
      ..........
   }

e non:
._menu{
      display:block;
      margin: 0px;
      ..........
   }

se va fatto come mi dici tu allora quando scrivo ".menu_miomenu  " la parola menu a cosa si collega?
e la parola _miomenu?(dovrebbe essere il suffisso classe CSS giusto?)

Scusate se insisto ma poichè voglio creare un sito completamente da me il collegamento con il css è fondamentale è un concetto fondamentale..attendo chiarimenti, grazie ancora per la pazienza !!

[frascan]

La classe .menu joomla la prende di suo e quindi non è necessario fare nulla. Se prendiamo ad esempio il foglio di stile base la classe .menu è definita così:

Codice: [Seleziona]

.menu  {
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
border-right: 10px solid #393939;
padding: 0 0 0 5px;
}

Questa classe viene applicata da joomla a tutti i menu.
Però tu potresti avere più menu ed avere l'esigena di differenziarne la visualizzazione grafica.
Ad esempio nella installazione di joomla con i dati di esempio vengono generati vari menu: il menu principale, il menu risorse, il menu pagine di esempio etc etc.

Mettiamo che tu voglia differenziare il menu risorse dal menu pagine di esempio.

Pagine di esempio prende le impostazioni generali per cui non devi fare nulla. Mentre il menu risorse diventa diverso.
Al che generi una classe css tua che magari chiami

Codice: [Seleziona]

.menu-risorse  {
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: normal;
border-right: 5px solid #FFFFFF;
padding: 15px;
}

Dopodichè vai in gestione moduli apri il menu risorse e nei parametri avanzati in "Suffisso classe CSS" inserisci -risorse e l'aspetto del menu risorse sarà diverso dagli altri menu che prendono la classe generale .menu

Spero di essermi spiegato bene.

[ariess]

ciao fedeweb,

effettivamente il mio esempio era sballato scusami, è stata una svista, ma vedo che hai capito comunque, grazie anche alla precisazione di frascan.

[fedeweb]

grazie ragazzi mi avete tolto un dubbio enorme...dunque, il funzionamento ora almeno teorico l'ho capito solo che c'è un piccolissimo problema: nella pratica non funziona..mi spiego:
ho inserito il mainmenu in posizione orizzontale dentro un contenitore che ho chiamato TOP, ho inserito in "suffisso classe CSS modulo" il nome " _menu", poi nel css ho inserito solo per provare:

 .menu_menu{
      background-color: #D2691E;
      margin: 0px;
      font-size: 45px;
      }

ma nonostante ciò il mio menu rimane invariato,compaiono tutte le voci(link) attaccate e scritte in un carattere piccolo e non di certo in 45px, inoltre il colore di sfondo rimane bianco...avete per caso idea di dove posso sbagliarmi?suggerimenti?
Spero di non disturbarvi troppo

[ariess]

prova a dargli un nome più strano tipo "_miomenu" perchè in alcuni template la classe "_menu" è già impostata

[fedeweb]

niente da fare purtroppo...ho provato con più nomi diversi ma non dà segnali di cambiare, ho provato a cambiare non solo lo sfondo ma il font...niente di niente...

[ariess]

prova a metterlo in "Suffisso classe CSS menu" invece che "modulo", e se puoi posta il link per favore

[fedeweb]

ho provato in suffisso classe ma non cambia nulla...
il sito è in locale quindi non ho un link ti scrivo il codice,molto snello in quanto fatto da me...(magari avrò sbagliato qualcosa...)

Codice: [Seleziona]

[b]file: index.php[/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML cut

[color=blue][b]Ti ringrazio davvero per la pazienza che stai/state avendo con me![/b][/color]

[frascan]

Prova ad inserire anche lo stile per il modulo:

Codice: [Seleziona]

<jdoc:include type="modules" name="top" style="xhtml" />


[fedeweb]

ciao frascan ho provato a fare come dici e non è cambiato nulla comunque sia ce lo lascerò lo stile...
provando invece ho scoperto che le modifiche che inserisco nel CSS me le effettua SOLO SE inserisco nei parametri del modulo Stile menu: lista invece io avevo messo Legacy-Orizontale... ora in sono contento che mi legge il css ma naturalmente mi fa un menu a lista(con tanto di puntini) io invece lo volevo orizzontale...

[56francesco]

fedeweb non inserire codice se non te lo chiedono ..
e quando lo fai usa le tag,
grazie..

per questa volta ho provveduto io,

[frascan]

perfetto fedeweb ho capito. devi impostare la classe per i menu orizzontali nel css del template.
il problema è che risulta molto difficile poterti aiutare così a scatola chiusa e senza capire com'è fatto il template e come stai lavorando.

[fedeweb]

@56francesco: come mai non si può inserire il codice?comunque scusami non sapevo di questa cosa.

@frascan: cosa intendi per impostare la classe per i menu orizzontali? mi potresti fare un esempio?

Merci

[56francesco]

@56francesco: come mai non si può inserire il codice?comunque scusami non sapevo di questa cosa.

i nostri maghi preferiscono un link, cioè preferiscono lavorare in un contesto pulito ed ordinato con tutte le righe al posto giusto..
e tutte quelle righe postate a sproposito disturbano la ricerca ed intasano il database..
 

[frascan]

un esempio te lo potrei fare pure però se non so come hai chiamato il div che include il menu orizzontale e la classe che gestisce le unordered list diventa difficile venirne a capo.

se ad esempio vai sulla demo di joomla su http://demo15.joomla.it/

il menu orizzontale è inserito nel div pillmenu che è impostato nel seguente modo:

Codice: [Seleziona]

#pillmenu {
float:left;
height:32px;
white-space:nowrap;
}

che a sua volta è inserito nella classe mainlevel-nav gestito dalla seguente classe per le unordered list:

Codice: [Seleziona]

#pillmenu ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
come vedi non è semplice semplice a scatola chiusa riuscire a darti delle indicazioni.

la cosa che mi viene in mente è che se sai cosa stai facendo allora dovresti provare ad inserire nella classe che gestisce il tuo menu orizzontale il seguente attributo

Codice: [Seleziona]

list-style-type:none;
che dovrebbe eliminare per esempio i puntini e poi nel suffisso classe del menu inserire l'impostazione -nav e dovrebbe posizionarsi in orizzontale il tuo menu ma tutto questo in linea teorica nella pratica dipende da come stai lavorando tu.

[tonicopi]

ma tutto questo in linea teorica nella pratica dipende da come stai lavorando tu.

eh eh la solita maledetta differenza tra teoria  e pratica....

[fedeweb]

un passetto alla volta e ce la faremo 
dunque, ho inserito nella classe che gestisce il mio menu:

Codice: [Seleziona]

list-style-type:none;ed effettivamente i puntini sono andati via... ora non mi è ben chiara l'ultima frase:

poi nel suffisso classe del menu inserire l'impostazione -nav e dovrebbe posizionarsi in orizzontale il tuo menu

io nel suffisso classe CSS menu (nei parametri avanzati) ho inserito _miomenu e quindi il css l'ho modificato inserendo " .menu_miomenu " ora non riesco a capire bene quale sia il codice che fa spostare il menu in orizzontale...forse ho capito male qualcosa?
ti chiedo scusa, sono un pò insistente...

[ariess]

"-nav" è la classe da inserire in "suffisso classe CSS menu" per far si che diventi orizzontale, al quale puoi aggiungere anche l'altra classe "miomenu" che hai creato separandoli con la virgola
es:

-nav,_miomenu

[frascan]

perfetto! 
ricdata ha espresso chiaramente quello che volevo dire 

[fedeweb]

ho fatto come dite ma inserendo in "suffisso classe CSS menu":

-nav,_miomenu

mi cancella tutte le modifiche fatte con il css(elimina lo sfondo che avevo imposta, mi tornano i pallini dell'elenco ecc...)...in pratica mi annulla tutto ciò che avevo creato prima...

[frascan]

può succedere dipende dalle classi che va ad ereditare in questi casi.
prova ad inserire solo -nav e vedi che succede.

devi fare molte prove e tentativi se non sai con precisione dove metti le mani.

d'altronde come ti dicevo prima per noi da qui a scatola chiusa è quasi impossibile capire cosa succede in locale da te.

[fedeweb]

ok frascan infatti apprezzo molto la vostra collaborazione e buona volontà e capisco che sia diffice senza avere un riferimento...mica potresti almeno dirmi o darmi un link in cui mi spiega con precisione a cosa serve -nav? nel senso, è una classe già preimpostata?
inoltre un ulteriore dubbio:
ma nel menu lo stile lascio Lista(che prende le modifiche) o Legacy-Orizzontale(che non me le prende)?

ps: non mi sarei mai aspettato tutto questo supporto, forse è anche per questo che di joomla se ne sente parlare bene.GRAZIE
...ora non vi assillo più,farò prove e prove...sperando di riuscire a mettere nel titolo di questa discussione la scritta [RISOLTO]!

[ariess]

scusa frascan, ma credo che nel codice del csss che hai postato non ci sia il riferimento a "-nav"
per esempio in rhuk_milkyway è definito così

Codice: [Seleziona]

#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;}
(ovviamente nel php devi avere un div "pillmenu")

semmai prova a mettere -nav in "Suffisso classe CSS menu" e _miomenu in "Suffisso classe CSS modulo".
non ricordo bene se due classi nello stesso campo si separano con la virgola o con lo spazio... 

ma nel menu lo stile lascio Lista(che prende le modifiche) o Legacy-Orizzontale(che non me le prende)?

in rhuk_milkyway è impostato come Legacy-lista-flat

[frascan]

Beh si ricdata come sai ogni template è strutturato diversamente dagli altri.
Ho postato quel codice in modo sommario a mo di esempio per rendere l'idea.

[fedeweb]

scusate ragazzi sapete per caso un link dove posso trovare una guida per le classi di default dei fogli di stile?

credo che il mio problema sia risolvibile solo se capisco quali sono le classi che joomla assegna di default ad ogni operazione che si fa(nel mio caso quando si crea un menu)...
grazie mille

PS: ho notato che quando inserisco Stile Legacy-Orizzontale invece di creare più tag <td> ne crea uno solo mettendo tutte le voci lì dentro, ad esempio se ho
Home Link Info
il codice sarà <td>homelinkInfo</td> naturalmente ognuna a un ancora ma l'ho semplificato per far capire il concetto...

[frascan]

Eccoti esaudito:

http://wiki.joomla.it/index.php?title=Foglio_di_Stile_base_per_i_template_di_Joomla_1.5

[tonicopi]

E qui quelle classi le vedi in azione:
http://www.joomla.it/images/stories/joomla_css.htm
 

[fedeweb]

grazie frascan (me l'avevi già postata al tuo primo intervento in questo post )
grazie tonicopi, è un pò incasinato quel link ma ci accontentiamo 

[fedeweb]

ragazzi scusate una domanda, io non riesco a venir fuori da questa situazine  : xkè se metto stile menu: lista mi legge il css, mentre se metto stile menu: Legacy-Orizzontale, lo stesso codice css non viene letto?

[fedeweb]

mi sono fatto una domanda e mi dò da solo una risposta...
se si imposta
stile menu: Legacy-Orizzontale per modificare le voci del menu bisogna usare la classe .mainlevel
se invece si usa stile menu: Lista per modificare le voci del menu bisogna usare la classe .menu
 

[marco]

mi intrometto nella discussione per sottoporvi questo problema:
seguendo la discussione ho provato a cambiare l'aspetto di un menu
ho creato la classe

Codice: [Seleziona]

.menu_docu {
      background-color: #d0d0d0;
      margin: 5px;
      font-size: 15px;
      color: #FF9966;
      font-weight: bold;
      }poi nel menu che volevo cambiare l'ho aggiunta nel Suffisso classe CSS del modulo.
funziona tutto tranne il colore del testo
cosa ho sbagliato?
ho provato anche con font-color:  ma non funziona....

[ariess]

benvenuto marco,

sicuramente c'è qualche altra classe css che sovrascrive la regola color che hai impostato, dagli un'occhiata con firebug

accodandoti ad un topic di qualcun'altro, per di più risolto rischi che nessuno legga il tuo post.... è meglio in questi casi aprirne un altro.

ciao e buona permanenza