Cách tiếp cận được khuyến nghị để tạo kiểu cho SlickGrid là gì?

Question

Tôi chỉ mới bắt đầu sử dụng SlickGrid và ngạc nhiên bởi chất lượng của nó. Tuy nhiên, khi nói đến phong cách, tôi không tìm thấy bất kỳ tài liệu hoặc ví dụ đề xuất một cách tiếp cận phong cách tổng thể. Có các tùy chọn và API nằm rải rác ở nhiều nơi khác nhau, nhưng rất khó để trích xuất một chiến lược trong số đó. Ngoài ra, lưới điện sử dụng các chủ đề giao diện người dùng jQuery. Thật không may những người đang can thiệp vào những gì tôi đang cố gắng đạt được. Chúng tôi đã chỉ chọn giao diện người dùng jQuery cho tiện ích con lịch cùng với chủ đề ui-bóng tối. Chủ đề này hoạt động hoàn toàn tốt cho tiện ích con lịch nhưng lưới cần phải ghi đè mọi khía cạnh của nó.

Đây là một jsFiddle hiển thị giao diện tôi đang cố gắng đạt được: http://jsfiddle.net/nareshbhatia/3q6RD/. Chỉ để minh hoạ, nó sử dụng một bảng HTML thông thường. Tuy nhiên tôi muốn đạt được cùng một kiểu dáng chính xác bằng cách sử dụng SlickGrid. CSS trong jsFiddle này về cơ bản là yêu cầu tôi có từ nhà thiết kế trực quan của mình, ví dụ:

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

Edit: Tôi cũng đã tạo ra một jsFiddle với một khởi SlickGrid thực hiện: http://jsfiddle.net/nareshbhatia/vJshY/. Như bạn có thể thấy, chủ đề ui-bóng tối đã hoàn toàn tiếp quản!

Answer 1

Trong vòng thứ hai/ngoái jsFiddle của bạn, bạn có thể thay đổi CSS để có mã này

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