Modificare Greybox tramite le classi css

lucaeffe

Modificare Greybox tramite le classi css

Dal sito ufficiale ho scaricato GB
http://orangoo.com/labs/GreyBox/

Ho modificato alcune cose nella grafica.
Quello che vorrei fare è modificare alcuni particolari a seconda del link con cui apro greybox.
Vorrei appicare tre sfondi diversi a seconda del link con cui lancio greybox.

Per sfondo intendo solo la parte superiore di greybox, ecco l'immagine

Questa è la parte di css dove ho inserito uno sfondo.



.GB_header table{
    background-image:url(bg.png);
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    height:75px;
}

Queste sono tre voci del menu a cui vorrei applicare tre sfondi differenti



 <li class="home"><a href="#"></a></li>
            
<li class="work"><a href="#"  onclick="return GB_showFullScreenSet(page_set, 1)"></a></li>
            
<li class="contact"><a href="#"  onclick="return GB_showFullScreenSet(page_set2, 1)"></a></li>
            
<li class="curriculum"><a href="#"  onclick="return GB_showFullScreenSet(page_set3, 1)"></a></li>

[......]

<script>
<!--var page_set = [{'caption': 'Google', 'url': 'http://lucaeffe.com/gallery/burn_after.html'},-->
                var page_set = [{'caption': 'Google', 'url': 'http://localhost/portfolio/gallery/burn_after.html'},


                var page_set2 = [{'caption': 'Google', 'url': 'http://localhost/portfolio/form.html'}];
                var page_set3 = [{'caption': 'Google', 'url': 'http://localhost/portfolio/pdf/CURRICULUM.pdf'}];
</script>

Ho provato in questo modo ma non ha funzionato


.GB_header table .work{
    background-image:url(bg.png);
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    height:75px;
}

.GB_header table .contact{
    background-image:url(bg2.png);
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    height:75px;
}

lucaeffe

Nessuno sa darmi una mano?

Per dirla in maniera piu semplice vorrei applicare ad ogni link, ovvero
work, contact, curriculum tre background differenti.

Ho provato anche in questo modo ma non funziona...


.GB_header2 table{
    background-image:url(bg2.png);
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    height:75px;
}

        <li class="home"><a href="#"></a></li>
        <li class="work"><a href="#"  onclick="return GB_showFullScreenSet(page_set, 1)"></a></li>
        <li class="contact"><a href="#"  onclick="return GB_showFullScreenSet(page_set2, 1)"></a></li>
        <li class="curriculum" class="GB_header2 table"><a href="#" onclick="return GB_showFullScreenSet(page_set3, 1)"></a></li>

</ul>


...qualche suggerimento?