Back to top

Autore Topic: [RISOLTO] immagini nel menù (non in voci menù)  (Letto 13421 volte)

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
[RISOLTO] immagini nel menù (non in voci menù)
« il: 04 Giu 2010, 16:28:42 »
Salve ragazzi,
come da titolo dovrei inserire delle immagini nel menù, non nelle voci.
Inizialmente pensavo che avrei potuto modificare le immagini del contorno menù aggiungendo l'immagine all'originale che lascerei come sfondo, spostando la scritta centralmente in modo da non sovrapporla. Però ho pensato anche che per ogni menù dovrei poi andare a collegare l'immagine modificata e questa credo sia una buona idea ma non so quale parte del contorno menù devo modificare e come poi cambiare i collegamenti alle immagini.
Questa idea non la escudo ma vorrei che qualcuno mi aiutasse nel capire quale parte del contorno usare (le ho trovate nella cartelletta image del template), come collegare le nuove immagini ai vari menù e infine come centrare le scritte.
Probabilmente esiste un modo più semplice per potere evitare di fare sto casotto e chiedo a voi che siete esperti dei css.
Il template che uso è rhuk_milkyway e il risultato che vorrei ottenere lo potete vedere nella immagine in allegato.
Grazie anticipatamente a chi mi risponderà ;)
A presto Antonio!!

[allegato vecchio più di un anno eliminato automaticamente]
« Ultima modifica: 17 Giu 2010, 22:11:40 da acciarinoway »

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #1 il: 04 Giu 2010, 18:55:41 »
ciao
non ben capito cosa intendi con
Citazione
come da titolo dovrei inserire delle immagini nel menù, non nelle voc
ma forse e questo che vuoi fare.

http://www.joomla.it/articoli-della-community/877-inserire-immagini-nel-menu.html
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #2 il: 04 Giu 2010, 19:59:42 »
Ciao conti,
grazie per l'interessamento :)
Il post che hai mandato già l'ho letto ed è proprio quello che dicevo non essere :)
Infatti in quel caso si aggiungono icone alle voci di menù (minestre - panini ecc...), io invece vorrei aggiungere una immagine accanto alla scritta Menù (sulla sinistra più precisamente e quindi spostare la scritta menù centralmente).
Spero di essere stato più chiaro  ;D

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #3 il: 04 Giu 2010, 20:08:14 »
non facevi prima a dire : mettere icona su titoli dei moduli.
posta il link del sito non ricordo come fatto quel template

prova in questo modo

ho provato sul modulo menu nella colonna left
Codice: [Seleziona]
background:url("../images/mw_menu_cap_l.png") no-repeat scroll 0 0 transparent;
color:#EEEEEE;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
font-weight:bold;
margin:-23px -4px 5px -5px;
padding-bottom:2px;
padding-left:30px;
}

solo che in questo modo tutti i moduli prendono la stessa immagine
bisognerebbe fare un suffisso  x ogni modulo .
« Ultima modifica: 04 Giu 2010, 20:18:52 da conti1 »
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #4 il: 04 Giu 2010, 20:15:27 »
Ecco qui: http://ilnostroguadagno.altervista.org/
Al momento è su altervista gratuitamente, appena lo finisco lo sistemo per benino :)
Esatto solo che non mi spaventa il numero perchè i menù non sono molti, piuttosto come fare poi a sistemarli :)
« Ultima modifica: 04 Giu 2010, 20:23:12 da acciarinoway »

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #5 il: 04 Giu 2010, 20:41:48 »
questo e un esempio di come pui personalizzare  il modulo messo sulla colonna right
ho preso il medulo sondaggi  aggiunto il suo suffisso _user
creato il suo css x aggiungere l'icona sul titolo
Codice: [Seleziona]
.moduletable_user h3 {
background:url("../images/module_icons.png") repeat-y scroll -6px 27px transparent !important;
height:26px;
line-height:26px;
padding-left:20px;
}

in questo modo l'icona e solo sul modulo sondaggi 
x gli altri moduli fai la stessa cosa  aggiungendo il suffisso  e ricreando il css x 'immagine.

« Ultima modifica: 04 Giu 2010, 22:28:55 da conti1 »
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #6 il: 04 Giu 2010, 21:02:25 »
Perfetto quello che hai fatto con il modulo sondaggi è quello che vorrei fare io :)
Essendo alle primissime armi con Joomla devo disturbarti ancora e chiederti come devo procedere.
Nel mio caso se ho capito bene, dovrei prendere il modulo Menù principale, aggiungere il suffisso _user e prima devo inserire nel css del template il codice che mi hai dato giusto?
Devo inserirlo sotto left colon? Al posto di icons.png devo inserire la mia immagine caricata nella cartella images giusto?
Scusami ma sono davvero un novizio di Joomla e non so bene come districarmi  :o

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #7 il: 04 Giu 2010, 21:43:38 »
nel modulo menu  non penso che potrai mettere un suffisso  xche avrai gia un suffisso  se non erro e _menu
ora non ricordo se quel template usa gia .
quello che to postato e da fare su moduli che non hanno gia di suo un  suffisso
 altrimenti  se cambi suffisso scombini il modulo.
x fare cio cche dici devi fare un  modulo chrome  personalizzato  come nel template che che to fatto vedere.
 fai una prova cisi ti rendi conto
metti il modulo sondaggi sulla colonna right
gli metti il sufisso  _user  e fai il css postato.
ci metti una tua icona  e vedi il risultato.
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #8 il: 05 Giu 2010, 00:04:22 »
niente, non riesco proprio. Ho aperto il template ed ho provato ad inserire in più punti il codice che mi hai dato. Ho anche provato ad aggiungere div prima del punto e anche ad eliminare il punto, ma non trovo dove va inserito. Prima andando sulla riga che mi avevi detto : "background:url("../images/mw_menu_cap_l.png") no-repeat scroll 0 0 transparent;" ho visto che avevo a che fare con il menù in alto e con altre prove ho cambiato il menù di sinistra ma a destra non sono riuscito a modificare nulla. Poi non so se cambia nulla o meno ma vedendo il codice che mi hai mandato mi sono accorto che al posto di avere scritto backgrond:url(.../images ...) hai scritto background:url("../images....) , cambia qualcosa? Per icurezza ho provato sia con ".. che con i ... ma non ho trovato la soluzione  ::)
Oggi è tutto il giorno che provo e non ci vedo più dalla fame :) (scherzo), comunque sto impazzendo  :o Penso che per stasera mi fermerò qui ma domani riprovo :)
Intanto se potete dirmi dove va posizionato il codice (nel template css ok ma in che punto?  :-[), se va aggiunto qualcosa prima del . e se è corretto ( il discorso di ".. o ... ) ve ne sarei davvero grato.
Notte a tutti  :P
« Ultima modifica: 05 Giu 2010, 00:07:47 da acciarinoway »

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #9 il: 05 Giu 2010, 00:50:42 »
Ultimi tentativi della serata hanno portato ad un passo avanti :) Ho inserito il codice poco prima della scritta "Banner module" ed ho notato che proprio grazie alle virgolette mi sposta la scritta centralmente, però non sono riuscito ancora ad inserire l'immagine. Anche qui ho fatto diverse prove inserendo le immagini sia nella cartella images che in altre cartelle. Domani provo ad inserirle in tutte le cartelle possibili e vi saprò dire se riuscirò :)

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #10 il: 05 Giu 2010, 01:33:26 »
ciao
allora vedo che hai messo il modulo sondaggi con il suffisso _user
ma non vedo il css
dove lo metti quel css?
lo devi mettere nel temlmate.css in alto in basso  dove vuoi ma li

Codice: [Seleziona]
.moduletable_user h3 {
background:url("../images/module_icons.png") repeat-y scroll 0px 0px transparent !important;
height:26px;
line-height:26px;
padding-left:20px;
}

dove leggi module_icons.png  li ci metti il nome della tua immagine.
« Ultima modifica: 05 Giu 2010, 01:36:08 da conti1 »
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #11 il: 05 Giu 2010, 10:42:37 »
Ecchice qua :)
Ieri sera alla fine sono riuscito a trovare il modo di inserire l'immagine e per prova ho voluto inserire quella di Joomla che è grandissima :)
L'ho lasciato così ma stamattina ho aggiunto l'immagine che si trova in image/template/rhul mylkway/red
e penso che dovrò cambiare quella se voglio andare avanti.
Questo è il procedimento corretto o inserisco l'immagine e poi sostituisco il colore all'intera tabella?
In alternativa dovrei cambiare il colore della scritta rendendola bianca come le altre e centrare l'immagine che forse mi basterebbe allungare con Photoshop. Per i bordi e la parte bassa penso dovrei fare qualcosa dello stesso tipo e per l'interno non sapreio invece come procedere  ::)
Ieri sera ho trovato questo articolo che mi sembra interessante ma credo che con quello che devo fare non c'entri molto :)      : http://www.extrowebsite.com/joomla-1.5/module-chrome.html 
Grazie sempre di tutto ;)

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #12 il: 05 Giu 2010, 13:45:34 »
Allora ragazzi, forse ho trovato una soluzione ma ho semre bisogno di voi.
Ho trovato un sito in cui spiegano come fare dei moduli nuovi d installare nel sito dal pannello amministrazione.
A questo punto al posto di usare Sondaggi uso un menù di tipo normale.
Se riesco a capire o meglio se mi suggerite la cartella in cui trovo il mainmenù lo copio modificando il nome main menù con quello che voglio inserire.
Cerco di spiegarmi bene, quando uso un nuovo modulo utilizzo solitamente _menu nel riquadrino "suffisso classe Css modulo" per impostare il menù come voglio io. A me servirebbe il file _menu in modo da poterlo copiare e modicare nell'immagine superiore come detto precedentemente.
Infatti se modifico il file menù direttamente otterei il cambiamento per tutti i miei moduli creati così. Se invece riesco ad avere e copiare quel file lo modifico ed assegno ad ognuno un nome diverso, così posso inserire in ognuno un'immagine differente del menù.
Spero di non essermi confuso e non avervi confuso troppo
« Ultima modifica: 05 Giu 2010, 13:49:12 da acciarinoway »

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #13 il: 05 Giu 2010, 14:42:34 »
Ciao acciarinoway, confesso che non ci ho mica capito tanto :o
File _menù... differenza tra ../images/ecc.  e .../images/ecc ... sostituire il modulo dei sondaggi con un altro? E pensi di riuscire a farlo funzionare con la componente sondaggi? Copiare il main menù?  ::)
Non è che stai tentando una personalizzazione troppo impegnativa per le tue conoscenze?

Qui un articolo che cerca di spiegare come funziona e a cosa serve il suffisso:
http://www.joomla.it/articoli-della-community/4277-moduli-style-classe-e-suffisso-css.html
 ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #14 il: 05 Giu 2010, 15:40:33 »
ciao tonicopi
lui vuole mettere solo l'iconcina difianco al titolo
vedi questo template  di fianco hai titoli
http://www.webconti.altervista.org/
solo che questo fatto  gia con un bel chrome   x le icone  e ho usato solo il suffisso x far il cambio di icona .
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #15 il: 05 Giu 2010, 16:32:46 »
riecchite conti :)
In effetti l'articolo che mi ha mandato tony centra in pieno l'argomento :)
La mia idea principale è quella di creare un altro suffisso di css come _menu che mi dia lo stesso risultato. Nell'esempio dell'articolo mandato da tony vengono copiate le 4 voci riguardanti l'aspetto grafico del menù e viene modificato il nome da _menu a menu-orange, lasciando così la forma inalterata. Poi cambiando l'immagine superiore (una delle 4 voci)  si potrebbe inserire la stessa ma modificata in modo che appaia un icona a sinistra :) Copiando le regole del menù che formattano l'aspetto grafico e cambiando il nome dovrei ottenere quel che voglio. Poi sostituendo l'immagine superiore avrei le mie immagini.
Ho provato a prendere le voci che riguardano il mio css ma a differenza di quelle dell'articolo non hanno immagini presenti. Vi posto le 6 righe che ho copiato e che probabilmente non dovevo prendere:

div.module_menu h3 {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #eee;
   margin: -23px -4px 5px -5px;
   padding-left: 10px;
   padding-bottom: 2px;
}

div.module_menu {
   margin: 0;
   padding: 0;
   margin-bottom: 15px;
}

div.module_menu div div div {
   padding: 10px;
   padding-top: 30px;
   padding-bottom: 15px;
   width: auto;
}

div.module_menu div div div div {
   background: none;
   padding: 0;
}

div.module_menu ul {
   margin: 10px 0;
   padding-left: 20px;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
   font-weight: bold;
}

In ognuna ho aggiunto orange alla fine e ho provato, ma come vi dicevo non ci sono immagini nel codice sopra e quindi non so quale modificare :).
Sicuramente ho sbagliato riga mi confermate?
« Ultima modifica: 05 Giu 2010, 16:51:22 da acciarinoway »

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #16 il: 05 Giu 2010, 17:34:50 »
Non dimostri di aver ben seguito l'articolo, nè di averlo  compreso. Per ottenere nient'altro che una icona accanto al titolo diversa per ogni menù, lasciando inalterata ogni altra cosa, ti basta copiare questa regola:
Codice: [Seleziona]
div.module_menu h3 {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #eee;
   margin: -23px -4px 5px -5px;
   padding-left: 10px;
   padding-bottom: 2px;
}
e modificarla così:
Codice: [Seleziona]
div.module_menu.icona1 h3 {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #eee;
   margin: -23px -4px 5px -5px;<------ qui un valore positivo sufficiente a spostare a destra il titolo quanto basta per non sovrapporsi alla tua icona (al posto di -5px 30px per esempio, fai prove)
   padding-left: 10px;
   padding-bottom: 2px;
background: url("../images/icona1.png") no-repeat ; <---- aggiungi questo
}
Nella cartella templates/rhuk_milkyway/images inserirai la tua icona1.png
Nel box suffisso classe css modulo del modulo dove vuoi far apparire l'icona scriverai icona1 staccata da uno spazio da _menu in questo modo: _menu icona1

E' tutto....  ;)
Ripeterai lo scherzetto icona2 per un secondo modulo ecc...
« Ultima modifica: 05 Giu 2010, 17:37:32 da tonicopi »
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #17 il: 05 Giu 2010, 18:40:22 »
OK tony, scusa ma non ho risposto prima perchè stavo facendo qualche prova e poi ho avuto il blocco visite che dà altervista in versione free, quindi mi sono fermato.
Comunque tornando a noi mentre ero assente ho capito come fare più o meno :)
Vedendo l'articolo per benino ho capito che dovevo cercare meglio nei css ed andando nella cartella del template milkway ho aperto non template.css ma quello relativo al rosso che uso. Qui ho trovato i parametri di cui parlava l'articolo e li ho copiati in template.css. Come potete vedere ho sostituito  l'immagine che mi interessa con quella arancione, ora dovrei solo spostare la scritta e sistemare l'icona sull'immagine con Photoshop, poi aggiungerla tra le immagini del template e cambiarla nel css ;)
Per spostare la scritta che comando devo usare ? E' per caso padding

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #18 il: 05 Giu 2010, 19:00:08 »
Risolto ragazzi ora ho un'altra cortesia da chiedervi.
Se date un'occhiata al menù vedete che l'immagine arancione (che è quella da modificare), sembra ripetuta e copre parte dello spazio interno, nonostante nel comando viene scritto no repeat.
Vi posto quello che ho scritto :

div.module_menu.orange{
   background: url(../images/red/mw_box_br.png) 100% 100% no-repeat;
}

div.module_menu.orange div {
   background: url(../images/red/mw_box_bl.png) 0 100% no-repeat;
}

div.module_menu.orange div div {

   background: url(../images/red/mw_box_tr.png) 100% 0 no-repeat;
}

div.module_menu.orange div div div {
padding-left: 20px;
   background: url(../images/orange/mw_box_tl.png) 0 0 no-repeat;
}


Con la scritta padding-left:20px; ho spostato la scritta e il codice l'ho preso dal template di milkway (red) come vi avevo detto prima.
Non capisco solo il discorso dell'immagine ripetuta.

Offline acciarinoway

  • Esploratore
  • **
  • Post: 111
    • Mostra profilo
Re:immagini nel menù (non in voci menù)
« Risposta #19 il: 05 Giu 2010, 21:37:03 »
Fatto anche questo :) Forse era un bug, ho solo ricreato il modulo e gli ho assegnato il suffisso css creato.
Ho notato che con padding left oltre a spstarsi la scritta Menù principale si sposta tutto il contenuto della tabella. Si possono separare le 2 cose? Pensavo di usare un modulo personalizzato come quello per le immagini linkate che ho già creato, anche se credo non serva.
Consigli?

 



Web Design Bolzano Kreatif