[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...