[RISOLTO] Ja-Purity - Personalizzazione del modulo Right

[ZioRiP]

Ciao a tutti.

Era da tempo che non mettevo mano al css del template e anche questa volta ho fatto un piccolo passo avanti alla "clonazione" del mio altro sito realizzato con un CMS commerciale.

Sono riuscito finalmente a mettere lo sfondo principale uguale a quello del mio sito originale, ora non mi resta che risolvere il problema del footer e dei moduli a destra.

Il footer ci proverò io in seguito (sono già abbastanza cotto dai tentativi di modifica, quasi a casaccio, nel css per oggi), mi piacerebbe rendere i quattro moduli di destra di questa pagina identici alle tabelle che si vedono in quest'altra pagina.
Tra menu.css e template.css ho pacioccato un po' di tutto utilizzando anche delle immagini e dei colori dummy da sostituire nel codice, ma devo dire che di cambiamenti ne ho visti veramente pochissimi...
Sono solo riuscito a cambiare il colore alle voci non attive e a mettere l'underline nel rollover (tra l'altro male perchè sottolinea anche degli spazi vuoti prima del testo).

Non ho proprio più idea di dove pacioccare... se qualche anima pia fosse disposta ad aiutarmi (nonostante il periodo ingrato) sarei veramente felice.

Questo riportato di sotto dovrebbe essere il css delle tabelle che voglio copiare, non garantisco al 100% perchè io di queste cose non ci capisco assolutamente niente...:

Codice: [Seleziona]

background-color: #cccccc;
border-top-width: 1px;
border-right-width-value: 1px;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-left-width-value: 1px;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: solid;
border-right-style-value: solid;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-left-style-value: solid;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: #d5dde5;
border-right-color-value: #d5dde5;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-left-color-value: #d5dde5;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #d5dde5;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
Ringrazio in anticipo chiunque mi vorrà aiutare

Ciao

[.: BlackHat :.]

Ciao ZioRiP
cerco nel modo più semplice possibile di farti capire cosa modificare per avere quale risultato.

Prima di effettuare qualsiasi modifica, fai una copia dei file style.css e template.css (sono quelli che andremo a modificare)

partiamo dal modificare lo sfondo bianco dei moduli sulla destra, cambiando il colore. quello che c'è attualmente è un'immagine bianca. eliminiamola e aggiungiamo il nostro colore.
1)
file: style.css (riga 218)

questo è quello che abbiamo attualmente

Codice: [Seleziona]

div.module_black, div.module_green, div.module_blue, div.module_red, div.module {
background:url("images/b-br.gif") no-repeat scroll right bottom #FFFFFF;
}
cambiamolo in questo modo:

Codice: [Seleziona]

div.module_black, div.module_green, div.module_blue, div.module_red, div.module {
background: #AAAAAA;
}
#AAAAAA indica il colore. è un grigio un po' piu scuro dello sfondo, per ora ho messo quello in modo da vedere le modifiche che stiamo effettuando e non confonderci con lo sfondo del sito.

2) style.css (riga 226)

eliminiamo questa regola

Codice: [Seleziona]

div.module div {
background:url("images/b-bl.gif") no-repeat scroll left bottom transparent;
}
3) template.css (riga 1085)
eliminiamo questa regola

div.module div {
background:url("../images/b-bl.gif") no-repeat scroll left bottom transparent;
}

4)style.css (riga 230)
eliminiamo

Codice: [Seleziona]

div.module div div {
background:url("images/b-tr.gif") no-repeat scroll right top transparent;
}

5)template.css (riga 1091)
eliminiamo

Codice: [Seleziona]

div.module div div {
background:url("../images/b-tr.gif") no-repeat scroll right top transparent;
}
6)style.css (riga 234)
eliminiamo

Codice: [Seleziona]

div.module div div div {
background:url("images/b-tl.gif") no-repeat scroll left top transparent;
}
7)template.css (riga 1096)
eliminiamo

Codice: [Seleziona]

div.module div div div {
background:url("../images/b-tl.gif") no-repeat scroll left top transparent;
padding:0 15px 10px;
}
Dopo queste modifiche dovremmo avere i moduli dello stesso colore(cambia solo l'interno dove ci sono le scritte che tu hai modificato in precedenza)

Passiamo al titolo

per fare la striscia colorata modifichiamo qui

style.css riga 34

Codice: [Seleziona]

div.module h3 {
background:none repeat scroll 0 0 #CC9933;
color:#333333;  <--- inseriamo questa regola
}
ora come puoi notare, il colore prende tutta la parte superiore. se volessi avere quel piccolo bordo attorno basta modificare qui

template.css (riga 1061)

Codice: [Seleziona]

div.module h3 {
border-bottom:2px solid #CCCCCC;
color:#7BA566;
font-size:125%;
font-weight:bold;
margin:2px -12px 10px;  <--- in questo modo. gioca con i valori 2 e 12 per modificare la grandezza dello spazio tra il colore e lo sfondo
padding:8px 15px 5px;
text-transform:uppercase;}
infine dobbiamo eliminare quel piccolo bordo bianco sotto il titolo. andiamo in

style.css (riga 213)
ed eliminiamo la regola sul border. quindi da così

Codice: [Seleziona]

div.module h3 {
border-bottom:1px solid #E9E9E9;
color:#7BA566;
}
a così

Codice: [Seleziona]

div.module h3 {
color:#7BA566;
}
Dovresti avere i menu cosi come nell'altro sito. Spero sia tutto chiaro. Se ci sono problemi, scrivi pure.

ciao

[ZioRiP]

Ciao, grazie infinite

Mi sono cimentato nell'impresa, ma ho trovato un piccolo intoppo. Arrivato a modificare il titolo ho notato che nel mio style.css alla riga 34 non è presente il codice che menzioni, così ho fatto una ricerca in tutto il documento e non ho trovato quella parte di codice. Cercando solo div.module h3 (sempre nello style.css) ho notato che c'è del codice, ma è relativo al "Module rounded" e siccome il colore di riempimento mi pare non sia bianco (7ba566) non credo che farei bene a metterci mano.

Se guardi nelle pagine ho già applicato le prime modifiche, tutto il codice originale è commentato, così posso sempre tornare indietro.

Mi viene un dubbio... c'è più di un file style.css?

Grazie ancora, ciao

[ZioRiP]

Eccomi di nuovo.

Dopo i tuoi consigli mi si è aperta la mente ed ho superato i problemi iniziali (in effetti si, ci sono un macello di files style.css), sono riuscito a trovare quasi tutto quello mi serviva.

Attualmente il bordino azzurrastro intorno ai moduli non è esattamente centrato e penso di aver capito il perchè, ma non sono capace di risolvere il problema.

Mi piacerebbe molto che l'icona del carrello fosse al centro del modulo, ma a quanto ho capito la posso spostare solo col padding e non mi sembra la soluzione migliore, perchè se ridimensiono la finestra del browser questa scompare sulla destra.
Vorrei inoltre poter rendere il testo piccolo come quello dell'altro template (fermo restando che questo risultato è molto più che soddisfacente), se fosse possibile un altro aiutino...

Grazie in anticipo.

Ciao

[tonicopi]

Per centrare il carrello crea questa regola:

Codice: [Seleziona]

div.vmCartModule {
text-align:center;
}
Per il bordino azzurro porta il margin a 1px in questa regola nel tempate.css riga 1101

Codice: [Seleziona]

div.module_green div div div div, div.module_blue div div div div, div.module_red div div div div, div.module_text div div div div, div.module div div div div {
background-color:#CCCCCC;
float:none;
margin:1px;
padding:1px 0 0;
}
Per i font devi intervenire in diverse regole che li formattano diversamente a seconda se il test è dentro una tabella oppure un determinato container ecc....
 

[ZioRiP]

Grazie tonicopi

In effetti il bordino azzurro si è risolto, anche se non so come ho fatto (sarà che a forza di pacioccare a casaccio sono riuscito a risolvere senza nemmeno rendermene conto? )

Per quanto riguarda la regola per centrare il disegno del carrello c'è un posto specifico dove la devo inserire o va bene tempate.css al fondo?

Grazie ancora

[tonicopi]

La regola la puoi scrivere dove vuoi. Nel fondo del file css principale va benone... 

[tonicopi]

Ah... il bordino azzurro è centrato ma quello spessore di 4 pixel in basso non mi piace.... 

[ZioRiP]

Grazissime!!

Ora il sito è quasi perfetto... non credevo che sarebbe stato possibile, per me, fare una cosa simile... in effetti se non fosse stato per te, blackhat e adottauncane non ce l'avrai mai fatta

Il bordino spesso 4 pixel al fondo è uguale al css dell'altro sito

A me non dispiace sai? Sarà che mi sono abituato a vederlo.

Ora penso di aver capito anche come fare a modificare lo sfondo grigio chiaro che si trova sotto al footer.... penso che vada messa mano al file index.php... vado a dare un'occhiata, se sistemo anche quello ho finito

Grazie ancora.

Ciao