Jakie jest zalecane podejście do stylu SlickGrid?

Question

Właśnie zaczynam używać SlickGrid i jestem zdumiony jego jakością. Jednak jeśli chodzi o stylizację, nie znalazłem żadnych dokumentów ani przykładów zalecających ogólne podejście do stylizacji. Istnieją opcje i interfejsy API rozproszone w różnych miejscach, ale bardzo trudno jest wydobyć z nich strategię. Również siatka wykorzystuje motywy jQuery UI. Niestety ingerują one w to, co próbuję osiągnąć. Wybraliśmy interfejs użytkownika jQuery tylko dla widgetu kalendarza wraz z motywem ui-darkness. Ten motyw działa idealnie dobrze dla widżetu kalendarza, ale siatka musi przesłonić każdy jego aspekt.

Oto jsFiddle, który pokazuje wygląd, który próbuję osiągnąć: http://jsfiddle.net/nareshbhatia/3q6RD/. Tylko dla ilustracji używa zwykłej tabeli HTML. Jednak chciałbym osiągnąć dokładnie taką samą stylizację za pomocą SlickGrid. CSS w tym jsFiddle jest zasadniczo wymaganiem, które mam od mojego wizualnego projektanta, np.

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

Edit: Stworzyłem również jsFiddle z realizacji rozrusznika SlickGrid: http://jsfiddle.net/nareshbhatia/vJshY/. Jak widać, motyw ui-darkness został całkowicie przejęty!

Answer 1

W swoim drugim/ostatnim jsFiddle można modyfikować CSS do tego kodu

.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; 
}