Ho risolto usando il selettore del successivo ed il cascading dei css.
Le regole per aggiungere le altre immagini diverse dalla prima stanno chiaramente subito dopo la regola predefinita del tamplate rhuk_solar_flare_ii che gestisce i link in stato standard e visited e grazie al cascading le proprietà impostate nella prima regola vengono mantenute via via e solo la nuova proprietà relativa alla nuova immagine viene ridefinita:
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/immagine1.png) no-repeat;
vertical-align: top;
font-size: 11px;
font-weight: bold;
color: #717171;
text-align: left;
padding-top: 22px;
padding-left: 60px;
margin-bottom: 20px;
height: 30px !important;
height: 28px;
text-decoration: none;
border: 0px solid black;
}
tr + tr a.mainlevel:link, tr + tr a.mainlevel:visited{
background-image: url(../images/immagine2.png);
}
tr + tr + tr a.mainlevel:link, tr + tr + tr a.mainlevel:visited{
background-image: url(../images/immagine3.png);
}
tr + tr + tr +tr a.mainlevel:link, tr + tr + tr +tr a.mainlevel:visited{
background-image: url(../images/immagine4.png);
}
Certo non ha la dinamicità di un modulo o di una semplice aggiunta di javascript che magari tramite l'interfaccia del DOM o tramite l'uso di classname avrebbe permesso di automatizzare l'aggiunta di voci e rispettive immagini.
Ma anche a fare una semplice aggiunta di due righe di css per ogni nuova evantuale immagine non ci vuole niente.
