Qual è l'approccio consigliato per lo stile di SlickGrid?

Question

Sto appena iniziando a utilizzare SlickGrid e stupito dalla sua qualità. Tuttavia, per quanto riguarda lo stile, non ho trovato documenti o esempi che raccomandassero un approccio stilistico generale. Ci sono opzioni e API sparse in vari luoghi, ma è molto difficile estrarre una strategia da quelle. Anche la griglia sfrutta i temi dell'interfaccia utente jQuery. Sfortunatamente quelli stanno interferendo con quello che sto cercando di ottenere. Abbiamo raccolto l'interfaccia utente di jQuery solo per il widget del calendario insieme al tema dell'oscurità. Questo tema funziona perfettamente per il widget del calendario, ma la griglia deve sovrascrivere ogni aspetto di esso.

Ecco un jsFiddle che mostra l'aspetto che sto cercando di raggiungere: http://jsfiddle.net/nareshbhatia/3q6RD/. Solo per illustrazione, utilizza una normale tabella HTML. Tuttavia mi piacerebbe ottenere lo stesso identico stile usando SlickGrid. Il CSS in questo jsFiddle è essenzialmente il requisito che ho dal mio visual designer, ad es.

#positions-table th { 
    background-color: #505050; 
    color: #eeeeee; 
    text-shadow: none; 
    font-size: 13px; 
    height: 40px; 
    line-height: 40px; 
} 

Edit: Ho anche creato un jsFiddle con un'implementazione di avviamento SlickGrid: http://jsfiddle.net/nareshbhatia/vJshY/. Come puoi vedere, il tema delle ui-oscurità ha completamente preso il sopravvento!

Answer 1

All'interno della vostra seconda/ultima jsFiddle è possibile modificare il CSS per avere questo codice

.slick-header-column.ui-state-default { 
    background:none ; 
    background-color: #505050 ; 
    color: #eeeeee; 
    border: none; 
    padding: 0; 
    text-shadow: none; 
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 13px; 
    height: 40px; 
    line-height: 40px;  
} 

.slick-row.ui-widget-content, .slick-cell { 
    background: none; 
    background-color: #eeeeee; 
    color: #666666; 
    border: none; 
    border-bottom: solid 1px #ffffff; 
    font-size: 14px; 
    height: 60px; 
    line-height: 60px; 
    padding: 0 5px; 
}