Joomla.it Forum
Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => : ezio81 23 Sep 2011, 17:15:53
-
Ciao a tutti!
Sto muovendo i primi passi con Joomla, vi leggo da un po' in forma anonima e ho già trovato tantissime dritte, ma oggi in preda ad un problema ho deciso di venire allo scoperto :)
Vorrei creare un menu che ha lo stesso stile di un altro menu (nello specifico "Latest news"), ma proprio non ci riesco. Tutto quello che riesco a fare è ottenere lo stile "Main menu" ma, nella posizione in cui si trova, non mi ci sta proprio...
Vi ringrazio in anticipo!
-
Ciao ezio81,
benvenuto nel forum :)
serve un link al sito per vedere il problema. Guarda anche che suffisso classe modulo c'è nel menù che vuoi copiare.
-
Ciao adottauncane,
per adesso purtroppo il sito è in locale... ma si basa su questo template che ti linko di seguito:
http://demo.joomladesigns.co.uk/joomla/?template=thegreat
Ho guardato nel file template.css, di fatto queste sono le caratteristiche del menu dal quale vorrei partire:
/* Custom Modules */
.latestnews, .mostread { list-style: none; padding: 1px 2px; margin: 0px; text-align: left; background: none; }
li.latestnews, li.mostread { list-style: none; padding: 0px 0px; margin: 0px; background: none;}
li.latestnews a, li.mostread a { text-transform: none; text-decoration: none; text-align: left; padding-left: 15px; line-height: 18px; color: #ffffff; background: transparent url(../images/arrow.gif) no-repeat left;}
li.latestnews a:hover, li.mostread a:hover { text-decoration: none; background: transparent url(../images/arrow2.gif) no-repeat left; color: #f18e00;}
Ho trovato in questo forum un po' di thread che riguardano gli stili dei menu, ma non esattamente questo argomento...
Grazie!
-
Scusate il doppio post, mi sono accorto che forse è più chiaro se incollo il sorgente dei due menu (sono vicini nel mio template, prima il Latest News e poi quello che vorrei modificare):
<li class="latestnews"> <a href="/Joomla1523/index.php?option=com_content&view=article&id=47%3Achisiamo&catid=35%3Apresentazione&Itemid=27&lang=it" class="latestnews"> Chi siamo</a> </li> <li class="latestnews"> <a href="/Joomla1523/index.php?option=com_content&view=article&id=22%3Aazienda&catid=35%3Apresentazione&Itemid=34&lang=it" class="latestnews"> L'azienda</a> </li> <li class="latestnews"> <a href="/Joomla1523/index.php?option=com_content&view=article&id=24%3Acontent-layouts&catid=29%3Athe-cms&Itemid=38&lang=it" class="latestnews"> Content Layouts</a> </li> <li class="latestnews"> <a href="/Joomla1523/index.php?option=com_content&view=article&id=27%3Athe-joomla-community&catid=30%3Athe-community&lang=it" class="latestnews"> The Joomla! Community</a> </li> <li class="latestnews"> <a href="/Joomla1523/index.php?option=com_content&view=article&id=1%3Awelcome-to-joomla&catid=1%3Alatest-news&lang=it" class="latestnews"> Welcome to Joomla!</a> </li> </ul> </div> </div> <div class="bot-module"> <div class="moduletable"> <ul class="menu"><li class="item56"><a href="/Joomla1523/index.php?option=com_content&view=category&id=39&Itemid=56&lang=it"><span>Mappa del sito</span></a></li><li class="item57"><a href="/Joomla1523/index.php?option=com_content&view=category&id=36&Itemid=57&lang=it"><span>Termini di utilizzo</span></a></li><li class="item58"><a href="/Joomla1523/index.php?option=com_content&view=category&id=37&Itemid=58&lang=it"><span>Privacy policy</span></a></li><li class="item59"><a href="/Joomla1523/index.php?option=com_content&view=category&id=38&Itemid=59&lang=it"><span>Mandaci un feedback</span></a></li></ul> </div>
-
E' proprio quello stile che devi applicare al nuovo menu, in teoria deve funzionare.
Il problema è che senza link al sito non si può fare molto...perchè non lo carichi su uno spazio gratuito (altervista, netsons o altri) ?
-
Grazie kuvier00, mi conforta sapere che in teoria dovrebbe essere così.
Sto provando a fare un upload del sito, vediamo cosa combino!
(forza, Altervista, forza.... sei lenta quasi come la velocità della luce :P)
-
Eccoci qua: ho temporaneamente messo il sito su questo spazio:
http://giuz.altervista.org/
Il menu che vorrei modificare è in posizione user8, mentre le Latest News sono in posizione user1.
Grazie!
-
Metti un suffisso CSS al menu in posizione user8, poi applichi anche a questo lo stile dell'altro menu, per esempio prima era:
li.latestnews a, li.mostread a {
text-transform: none;
text-decoration: none;
text-align: left;
padding-left: 15px;
line-height: 18px;
color: #ffffff;
background: transparent url(../images/arrow.gif) no-repeat left;
}
Poi diventerà:
li.latestnews a, li.mostread a, .TUO_SUFFISSO_CSS li a {
text-transform: none;
text-decoration: none;
text-align: left;
padding-left: 15px;
line-height: 18px;
color: #ffffff;
background: transparent url(../images/arrow.gif) no-repeat left;
}
Lo ripeti naturalmente per tutte le regole interessate
-
Grazie mille kuvier00.
Se non ho capito male l'unico file da toccare è template.css vero? Mentre, da pannello di controllo del modulo in posizione user8, devo aggiungere il suffisso custom sotto la voce "Suffisso classe CSS menu" nei Parametri avanzati.
Giusto?
-
Yes Sir :)
-
@kuvier00 sicuro che funzioni così? Non l'ho mai visto... Ma se funziona...
-
@kuvier00 sicuro che funzioni così? Non l'ho mai visto... Ma se funziona...
Bisogna solo associare quello stile al nuovo menu, il quale è fatto lo stesso a lista (ul,li,a).
Deve funzionare!! (credo...) ;D
-
mmmmm, che si possa usare il Suffisso classe CSS menù è giusto ma non credo che come l'hai messo tu funzioni...
http://www.joomla.it/articoli-della-community-16/5033-piccola-guida-alluso-del-suffisso-classe-css-menu.html (http://www.joomla.it/articoli-della-community-16/5033-piccola-guida-alluso-del-suffisso-classe-css-menu.html)
-
Quello stile è applicato a dei link dentro una lista non ordinata (ul > li > a), esattamente come un menu. Che differenza fa se lo si applica con o senza suffisso css?
A prescindere dal suffisso, tramite i css lo puoi applicare dove vuoi. Deve funzionare!
-
Certo, se associ a quel modulo un suo div. E riscrivi tutto. L'applicazione del suffisso è solo più comoda. Ma come l'hai scritto tu non funziona. Tu hai preso il css di quello che vorrebbe fosse il css da applicare è hai aggiunto .TUO_SUFFISSO_CSS li a. Secondo me non sortisce alcun effetto. Ma non c'è che provare, puoi farlo anche con firebug, metti il suffisso e incolli il css che hai scritto.
-
Eccomi, dunque modificando il mio menu in user8 con l'aggiunta del suffisso, e facendo la modifica che mi ha indicato kuvier00 ho ottenuto quello che vedete qui:
http://giuz.altervista.org
Mi verrebbe da dire "fuochino" :) nel senso che ora user8 è cambiato, ma non ha le stesse proprietà di quello affianco... forse c'è da sistemare qualche altra regola.
Comunque grazie a tutti e due! Adesso vedo cos'altro c'è da cambiare.
-
In effetti mi ero dimenticato una cosa, bisogna naturalmente prima disabilitare lo stile precedente :D
Poi funziona, l'ho provato ora.
-
bisogna naturalmente prima disabilitare lo stile precedente :D
Poi funziona, l'ho provato ora.
Grazie, ma forse non sono in grado, potresti spiegarmi meglio per favore? Dovrei disabilitare lo stile del menu di partenza che c'era in user8 o quello di "Latest News"?
-
Eccomi, dunque modificando il mio menu in user8 con l'aggiunta del suffisso, e facendo la modifica che mi ha indicato kuvier00 ho ottenuto quello che vedete qui:
http://giuz.altervista.org (http://giuz.altervista.org)
Mi verrebbe da dire "fuochino" :) nel senso che ora user8 è cambiato, ma non ha le stesse proprietà di quello affianco... forse c'è da sistemare qualche altra regola.
Comunque grazie a tutti e due! Adesso vedo cos'altro c'è da cambiare.
Non è una buona idea mettere un punto come suffisso css di un modulo (la classe ora è menu.ezio), mettici un underscore "_". E poi applicalo come ti ho detto su, anche alla parte di hover.
-
Ho seguito il tuo consiglio, ora il suffisso è _ezio. Grazie.
Solo mi manca la parte che dicevi prima, ovvero "disabilitare lo stile precedente", non mi è ben chiaro a quale stile ti riferisci.
-
Ok, ora non ti resta che assegnare al menu, lo stile di quell'altro; e disabilitare un paio di cose.
Per il primo punto, il css deve venire così:
li.latestnews a, li.mostread a, .menu_ezio li a {
background: url("../images/arrow.gif") no-repeat scroll left center transparent;
color: #FFFFFF;
line-height: 18px;
padding-left: 15px;
text-align: left;
text-decoration: none;
text-transform: none;
}
li.latestnews a:hover, li.mostread a:hover, .menu_ezio li a:hover {
background: url("../images/arrow2.gif") no-repeat scroll left center transparent;
color: #F18E00;
text-decoration: none;
}
Come vedi ho solo aggiunto all'inizio .menu_ezio ecc...
Poi ti basta disabilitare il padding e il background del li della lista, aggiungi questa regola:
.menu_ezio li {
padding:0;
background:transparent;
}
Così dovrebbe andare :)
-
Che è un po' diverso da .TUO_SUFFISSO_CSS li a ;)
-
Che è un po' diverso da .TUO_SUFFISSO_CSS li a ;)
Ma ho scritto proprio quello!! (a parte le due righe aggiuntive) ???
-
No, adesso hai scritto
.menu_ezio
cioè .menu_TUO_SUFFISSO_CSS
e non ._ezio cioè
.TUO_SUFFISSO_CSS
come sembrava dovesse scrivere.
-
Ora ho finalmente capito cosa intendevi!!
Hai ragione, per suffisso volevo dire (erratamente) la classe completa css associata...che invece, come dici giustamente, è formata da prefisso + suffisso.
Ehhh la vecchiaia che avanza ::)
-
Ehhh la vecchiaia che avanza ::)
Non me ne parlare... :)
-
Perfetto!!
Grazie mille kuvier00 e adottauncane, ora è esattamente come lo volevo.
Modifico il titolo del thread come risolto.
Ottima domenica a tutti.