Was ist der empfohlene Ansatz, um ein SlickGrid zu stylen?

Question

Ich fange gerade an, SlickGrid zu benutzen und über seine Qualität erstaunt zu sein. Wenn es jedoch um das Styling geht, habe ich keine Dokumente oder Beispiele gefunden, die einen umfassenden Styling-Ansatz empfehlen. Es gibt Optionen und APIs, die an verschiedenen Orten verteilt sind, aber es ist sehr schwierig, daraus eine Strategie zu extrahieren. Außerdem nutzt das Grid jQuery UI-Themen. Leider stören sie das, was ich erreichen möchte. Wir haben jQuery UI nur für das Kalender-Widget zusammen mit dem ui-darkness-Thema aufgenommen. Dieses Thema funktioniert perfekt für das Kalender-Widget, aber das Raster muss jeden Aspekt davon überschreiben.

Hier ist eine JsFiddle, die das Aussehen zeigt, das ich versuche zu erreichen: http://jsfiddle.net/nareshbhatia/3q6RD/. Nur zur Veranschaulichung verwendet es eine reguläre HTML-Tabelle. Allerdings würde ich gerne das gleiche Styling mit SlickGrid erreichen. Das CSS in diesem jsFiddle ist im Wesentlichen die Anforderung, die ich von meinem visuellen Designer habe, z.

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

Edit: Ich habe auch eine jsFiddle mit einem Starter SlickGrid Umsetzung: http://jsfiddle.net/nareshbhatia/vJshY/. Wie du sehen kannst, hat das Thema u-Dunkelheit vollständig übernommen!

Answer 1

In Ihrem zweiten/letzten jsFiddle können Sie die CSS ändern den Code haben

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