Ja Purity 2 - Suffisso classe CSS colore modulo ignorato sui moduli left

[guidocx84]

Ciao a tutti e complimenti per il sito internet e per l'ultimo Joomla Day a Firenze: ero presente di persona e devo dire che è stato davvero meraviglioso!

Avrei bisogno di una mano nel modificare il CSS del template JaPurity II.
Il mio problema è questo: sui moduli che dispongo a destra, se applico il suffisso classe CSS modulo _red, ottengo il risultato sperato: il modulo viene colorato di rosso. Nel momento in cui sposto questi moduli nella colonna di sinistra però, nonostante il suffisso rimanga, la colorazione scompare. Come posso fare per far sì che anche i moduli di sinistra risultino colorati? Cosa devo modificare nel CSS? Grazie mille a tutti! 

[guidocx84]

Con Firebug ho scoperto che tutti i moduli che metto a destra sono identificati da questo codice:

div.module_red .ja-box-tl

Tutti i moduli che invece sono a sinistra, vengono visti come:

div.ja-moduletable

Cosa posso fare per far sì che il comportamento che ottengo in termini di colore per i moduli di destra sia applicato anche ai moduli messi a sinistra?

Grazie a tutti!

[guidocx84]

Provo a darvi qualche informazione in più... all'interno di template.css penso di aver trovato le righe di codice relative ai due tipi di modulo. Non capisco perché hanno voluto fare queste differenze tra i moduli di sinistra e di destra... stà di fatto che i moduli che stanno a sinistra hanno questo stile:

Codice: [Seleziona]

/* MODULE STYLES

--------------------------------------------------------- */

div.ja-moduletable h3, div.moduletable h3 {

    background: url(../images/dot2.gif) repeat-x bottom;

    color: #333;

    font-size: 115%;

    margin: 0 0 8px;

    overflow: hidden;

    padding: 1px 0 8px;

    text-transform: uppercase;

}



div.moduletable_menu h3 { margin-bottom: 0; }



div.ja-moduletable, div.moduletable {

    border-bottom: 1px solid #ccc;

    margin-bottom: 15px;

    margin-top: 8px;

    padding: 0 0 20px;

    position: relative;

I moduli che stanno a destra invece:

Codice: [Seleziona]

/* Rounded Module --- */

div.ja-module h3, div.module h3 {

    border-bottom: 1px solid #ccc;

    color: #7ba566;

    font-size: 115%;

    font-weight: bold;

    margin: 0 -15px 10px;

    padding: 8px 15px;

    text-transform: uppercase;

}



div.ja-module, div.module {

    margin-bottom: 20px;

    overflow: hidden;

    position: relative;

}



.ja-box-br {

    background: url(../images/b-br.gif) no-repeat bottom right #fff;

}



.ja-box-bl {

    background: url(../images/b-bl.gif) no-repeat bottom left;

}



.ja-box-tr {

    background: url(../images/b-tr.gif) no-repeat top right;

}



.ja-box-tl {

    background: url(../images/b-tl.gif) no-repeat top left;

    padding: 0 15px 10px;

}



/* text */

div.module_text h3 {

    border-bottom: 0;

    clear: both;

    display: block;

    margin: 0 0 10px;

    overflow: hidden;

    padding: 0;

    width: 100%;

}



div.module_text span {

    background: #fff;

    clear: both;

    display: block;

    float: left;

    font-weight: bold;

    padding: 0 3px;

}



div.module_text {

    background: url(../images/bt-br.gif) no-repeat bottom right #f6f6f6;

}



div.module_text .ja-box-bl {

    background: url(../images/bt-bl.gif) no-repeat bottom left;

}



div.module_text .ja-box-tr {

    background: url(../images/bt-tr.gif) no-repeat top right;

}



div.module_text .ja-box-tl {

    background: url(../images/bt-tl.gif) no-repeat top left;

}



/* Blank */

div.module_noborder,

div.module_noborder .ja-box-bl,

div.module_noborder .ja-box-tr,

div.module_noborder .ja-box-tl { background: none; padding: 0; }



/* red */

div.module_red {

    background: url(../images/br-br.gif) no-repeat bottom right #bf0000;

}



div.module_red .ja-box-bl {

    background: url(../images/br-bl.gif) no-repeat bottom left;

}



div.module_red .ja-box-tr {

    background: url(../images/br-tr.gif) no-repeat top right;

}



div.module_red .ja-box-tl {

    background: url(../images/br-tl.gif) no-repeat top left;

}



/* blue */

div.module_blue {

    background: url(../images/bb-br.gif) no-repeat bottom right #069;

}



div.module_blue .ja-box-bl {

    background: url(../images/bb-bl.gif) no-repeat bottom left;

}



div.module_blue .ja-box-tr {

    background: url(../images/bb-tr.gif) no-repeat top right;

}



div.module_blue .ja-box-tl {

    background: url(../images/bb-tl.gif) no-repeat top left;

}



/* green */

div.module_green {

    background: url(../images/bg-br.gif) no-repeat bottom right #7ba566;

}



div.module_green .ja-box-bl {

    background: url(../images/bg-bl.gif) no-repeat bottom left;

}



div.module_green .ja-box-tr {

    background: url(../images/bg-tr.gif) no-repeat top right;

}



div.module_green .ja-box-tl {

    background: url(../images/bg-tl.gif) no-repeat top left;

}



/* black */

div.module_black {

    background: url(../images/bl-br.gif) no-repeat bottom right #333;

}



div.module_black .ja-box-bl {

    background: url(../images/bl-bl.gif) no-repeat bottom left;

}



div.module_black .ja-box-tr {

    background: url(../images/bl-tr.gif) no-repeat top right;

}



div.module_black .ja-box-tl {

    background: url(../images/bl-tl.gif) no-repeat top left;

}



/* text color for high contrast module */

div.module_black, div.module_green, div.module_blue, div.module_red { color: #fff; }



#ja-container div.module_black ul li a,

#ja-container div.module_green ul li a,

#ja-container div.module_blue ul li a,

#ja-container div.module_red ul li a { color: #fff; }



#ja-container div.module_black ul li a:hover,

#ja-container div.module_black ul li a:active,

#ja-container div.module_black ul li a:focus,

#ja-container div.module_green ul li a:hover,

#ja-container div.module_green ul li a:active,

#ja-container div.module_green ul li a:focus,

#ja-container div.module_blue ul li a:hover,

#ja-container div.module_blue ul li a:active,

#ja-container div.module_blue ul li a:focus,

#ja-container div.module_red ul li a:hover,

#ja-container div.module_red ul li a:active,

#ja-container div.module_red ul li a:focus { color: #069; }



#ja-container div.module_blue #form-login ul li a:hover,

#ja-container div.module_blue #form-login ul li a:active,

#ja-container div.module_blue #form-login ul li a:focus { color: #7BA566; }



#ja-container div.module_black h3,

#ja-container div.module_green h3,

#ja-container div.module_blue h3,

#ja-container div.module_red h3 { color: #fff; }



#ja-container div.module_blue ul.menu li.active > a,

#ja-container div.module_red ul.menu li.active > a { color: #000 !important; }



div.module_green div.bannergroup_text div.bannerheader,

div.module_green div.bannergroup_text div.bannerfooter_text a { color: #ccc; }



div.module_blue a { color: #7BA566; }



div.module_black .inputbox, div.module_green .inputbox, div.module_blue .inputbox, div.module_red .inputbox { color: #333 !important; }
Come riuscire a rendere anche i moduli che metto a sinistra simili a quelli di destra?