[RISOLTO]Template personalizzato, personalizzare le voci di menù sulla sinistra.

[56francesco]

Chiedo scusa ai maghi dei template che molto opportunamente staranno riposando sotto l'ombrellone magico, però per quanto da misero mortale posso riuscire a tentare non riesco ad ottenere la possibilità di inserire tasti di diverso colore nelle voci di menù  che vado a posizionare a sinistra.

la pagina sarebbe questa:
http://www.forum-consulenza.it/blog-articoli

vorrei lasciare i tasti neri, però vorrei potere avere la possibilità di più scelte.
quello di ora utilizza questo css:

Codice: [Seleziona]

.module_menu ul.menu li a {
...
..
    background-image : url(../images/menu.jpg)!important;
...la mia principale difficoltà sta ne come chiamare un diverso colore, ho provato con

Codice: [Seleziona]

.module_menu.x  ul.menu.x  li aperchè appunto il modulo usa il suffisso _menu x

ma in quel passaggio non funziona, come dovrei quindi chiamarlo?

[adottauncane]

Ciao 56francesco,
prova a non mettere .x dopo ul.menu così:

Codice: [Seleziona]

.module_menu.x ul.menu li a {
    background:red !important;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    height: 36px;
    line-height: 36px;
    margin: 2px 0 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-shadow: 2px -2px 1px #000000, 0 2px 0 #000000;
    vertical-align: middle;
}


[56francesco]

grazie adottauncane..

forse mi sono spiegato male,  provo a spiegarmi meglio,

come è ora i pulsanti  di tutti i moduli  visualizzano una immagine come  pulsante di colore nero

url("../images/menu.jpg") !important

vorrei fare in modo che inserendo un altro suffisso (dove?) potessi avere la possibilità di visualizzare un altro modulo, anche contemporaneamente  ma con il pulsante di colore rosso..

url("../images/menu-red.jpg") !important

credo di aver intuito che dovrei usare il suffisso menù e non il suffisso modulo..

[adottauncane]

A scusa...
Spero di aver capito adesso. Io farei così:
Tutto dove trovi nel file blue.css
div.module_menu.x
e sui "derivati" prova ad aggiungere div.module_nuovo, in modo che ricostruisca tutto il box.
Poi all'ultimo quello che ti ho incollato ieri, dove metti il background per il pulsante

.module_nuovo ul.menu li a

a questo punto credo che tu possa mettere nel modulo il nuovo suffisso _nuovo

[adottauncane]

Scusa ancora, adesso ho capito. Vorresti usare il suffisso menù per non rifare tutto il box... Non l'ho mai fatto, in effetti. Adesso provo 

[adottauncane]

Facendolo da frontend, quindi dovresti provare, aggiungendo il suffisso classe menu _mio nel modulo menù e inserendo questo css:

Codice: [Seleziona]

.module_menu ul.menu_mio li a {
    display : block;
    color:#fff;
    vertical-align : middle;
    font-size : 12px;
    text-align : left;
    height : 36px;
    line-height : 36px;
    text-decoration : none;
    padding:0;
    margin: 2px 0 0 0;
    background:red !important;
    text-align:center;
    background-color:#red;
    text-shadow: 2px -2px 1px #000, 0 2px 0 #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.module_menu ul.menu_mio li a span {
    background-image:none;
    background-color: transparent;
}
.module_menu ul.menu_mio li a:hover, .module_menu ul.menu_mio li a:active, .module_menu ul.menu_mio li a:focus {
    text-decoration : none;
    background-image : url(../images/menu_hover.jpg);
    background-repeat : no-repeat;
}
.module_menu ul.menu_mio li.active a {
    background-image : url(../images/menu_hover.jpg);
    background-repeat : no-repeat;
    text-decoration : none;
}
.module_menu ul.menu_mio li.active a:hover {
    text-decoration: none;
}
.module_menu ul.menu_mio li.active a span {
}
.module_menu ul.menu_mio li a:hover, .module_menu ul.menu li a:active, .module_menu ul.menu li a:focus {
    color: #aaa;
}
.module_menu ul.menu_mio li a:first-letter {
    color: #71a5f4;
font-size : 15px;
}

.module_menu ul.menu_mio {    background-color: transparent;    background-image: none;    list-style: none outside none;    margin: 0;    padding: 0;}
sembra funzionare.

[56francesco]

no, non funge come mi dici, grazie comunque per il tempo che dedichi..
o meglio come dici funge perchè non hai un template dove di default è già impostato che tutti i menù abbiano quel pulsante nero oppure niente (dove lo scopiazzato così funziona)

io stavo provando partendo da quella condizione, (tutti i menù nella posizione roundet hanno il pulsante nero) a cambiare il colore del pulsante dicendo al modulo che variante voglio  (allego immagine per questo)


devo solo capire come devo chiamare nel css  il riferimento,  ma alla lunga ci arrivo, eccome se ci arrivo...

PS
c'era un ottimo articolo di Tonicopi (almeno se non ricordo male) che mi potrebbe essere utile ma non lo ritrovo mica..

[adottauncane]

Mi spiace... 

[ariess]

devi usare il suffisso classe menu come dice adottauncane, però secondo me sbagli ad usare il punto come suffisso, perchè in quel modo viene interpretata come una classe .x di conseguenza non funziona al nostro scopo.

usa un suffix del tipo "_pulsantirossi" e nel css aggiungi lo stesso css cambianod solo l'immagine

Codice: [Seleziona]

.module_pulsantirossi ul.menu li a {    background-color: #FFFFFF;    background-image: url("../images/menu-red.jpg") !important;    background-position: center top;    background-repeat: no-repeat;    border-radius: 5px 5px 5px 5px;    color: #FFFFFF;    display: block;    font-size: 12px;    height: 36px;    line-height: 36px;    margin: 2px 0 0;    padding: 0;    text-align: center;    text-decoration: none;    text-shadow: 2px -2px 1px #000000, 0 2px 0 #000000;    vertical-align: middle;}

[56francesco]

usa un suffix del tipo "_pulsantirossi" e nel css aggiungi lo stesso css cambianod solo l'immagine

questa è la strada seguita, però che nome usare nel css? 
quello è il dilemma e qualcosa mi sfugge
 
ho provato come da immagine e con

.module_pulsantirossi ul.menu li a

il risultato è quello nell'immagine,  il nuovo css inserito  non viene usato

[adottauncane]

No, credo che se utilizzi il suffisso modulo tu debba metterlo nel suffisso modulo e non nel suffisso menù. La seconda prova che ho fatto invece, se funzionasse, il suffisso _mio lo dovresti mettere nel suffisso menù.

Nel caso però che tu utilizzassi la prima strada, credo che bisognerebbe riscostruire tutto il modulo, come ti scrivevo più su.

Speravo che la soluzione del suffisso menù funzionasse, perché, in effetti, sarebbe decisamente più comoda. Hai voglia di mettere un attimo il codice che ti ho postato per il suffisso menù sul template.css e provare a mettere nel suffisso classe menù _mio e nel suffisso classe modulo lasciare il suffisso che c'è e se non funziona provare a mettere solo _menu ?

[ariess]

sì sì... scusate.... suffisso classe modulo (devo evitare di rispondere a quell'ora  )

togli il suffisso menu, nel suffisso modulo metti "_pulsantirossi" ed aggiungi il css postato sopra.


NB: nei suffissi non usare mai cancelletti, punti e spazi 

[56francesco]

ecco con   suffisso modulo,
_pulsantirossi

vedi immagine,

@poi provo anche come consiglia l'ottima e gentile adottauncane

[56francesco]

ecco una altra prova,
inserendo -blank  nel suffisso menù scompaiono i pulsanti, ma il modulo resta identico, anche negli altri moduli non menù

l'ideale sarebbe che se dove c'è blank inserisco rosso escono pulsanti rossi, verde per pulsanti verdi e cosi via..

[adottauncane]

Dai, prova la mia che poi vado a casa... 

Il codice che ho messo ricostruisce tutto il bottone con le maiuscole colorate e gli hover. Poi ne fai tanti quanti te ne servono...

[56francesco]

Dai, prova la mia che poi vado a casa... 

Il codice che ho messo ricostruisce tutto il bottone con le maiuscole colorate e gli hover. Poi ne fai tanti quanti te ne servono...

l'ho provato e funziona, salvo che non arrivano  le immagini dei pulsanti ma resta il coloro di sfondo, e non trovo il modo di  rimediare, salvo questo particolare è ottimo direi, potresti scriverci un articolo che sarebbe molto utile, un menù solo con css e senza moduli da installare...

[adottauncane]

Sì, puoi mettere un'immagine esattamente cone quella che c'è nera... Per comodità ho messo un colore non avendo nessuna immagine a portata di mano, per vedere se funzionava. Uso molto il copia incolla, non è che conosco veramente i css 

Dici? Sì in effetti non avevo mai provato prima ad utilizzare il suffisso meù ed è veramente comodo. Magari mi cimento nella redazione.  Grazie per l'idea dell'articolo e anche per lo spunto che mi hai dato.

[adottauncane]

Uh, non trovi il modo di inserire un'immagine al posto del backgroun:red;  ?
Puoi metterne una nella cartella dove c'è quella nera? Così provo anch'io...

[adottauncane]

Ma, dovrebbe bastare sostituire con questo:

Codice: [Seleziona]

.module_menu ul.menu_mio li a {
    display : block;
    color:#fff;
    vertical-align : middle;
    font-size : 12px;
    text-align : left;
    height : 36px;
    line-height : 36px;
    text-decoration : none;
    padding:0;
    margin: 2px 0 0 0;
    text-align:center;
    background:url("../images/logo.png") !important;
    text-shadow: 2px -2px 1px #000, 0 2px 0 #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
il primo pezzo del codice, dove ho tolto il background:red; e inserito

background:url("../images/logo.png") !important;

[56francesco]

ehh si dovrò lavorarci molto e ancora molto sul css
al momento non so perchè ma l'istruzione 

.module_menu ul.menu_mio li a

non me la sente proprio per la parte che riguarda ul.
o spuntano fuori i soliti tasti immagini e solo e sempre quelli oppure niente pur conservando il css nel modulo..

[adottauncane]

Che strano. Da qui sì...

[56francesco]

l'ho notato anche io,  quando gli mando il css  poi non più..
e ho anche spostato le modifiche dal css secondario al più grande (chiamamoli così)
niente da fare una volta dentro e trasferiti via ftp non funzionano più..
evidentemente devo ristrutturare tutto il file css  come ho fatto per altre occasioni, ripulendo le istruzioni che si accavallano..

[adottauncane]

O magari davvero non funzionano... Proverò su altri template per capire se è una strada percorribile o magari ho preso una cantonata. Perché, per provare, ho forzatamente messo il suffisso al menù. In effetti non è detto che poi mettendolo nel modulo sia la stessa cosa.

[adottauncane]

Allora ho provato su beez2 e funziona. In questo caso ho tolto il .module_menu davanti. Poi ho provato paro paro su rhuk_milkyway (1.5) che ha lo stesso tipo di costruzione e funziona anche lì... Cavolo, mi spiace che a te non vada. Era un modo carino...

[56francesco]

penso che andrò a risolvere con uno dei miei accrocchi,  necessito che il menù in alto sia diverso per i registrati rispetto al pubblico e ho già modificato index.php in questo senso.
a questo punto inserisco le istruzioni css  in due file distinti e  diversi  che so?  pubblico.css e registrati.css e carico solo l'uno o l'altro  in modo da velocizzare il caricamento, con questa soluzione posso accorciare i file da caricare  e fare un po quello che mi pare senza prefissi o varianti vari, mi basterà cambiare il nome del pulsante nella versione registrati in tonalità con la grafica del sito visto dai registrati.

grazie comunque dell'aiuto.