To modify the Kanban appearance, you need to override the default CSS of Kanban. Also, you have an option to create your own custom theme using our Theme Studio. Please find the list of CSS classes in Kanban.
| Css class | Purpose |
|---|---|
| .e-kanban .e-kanban-table | customize the kanban. |
| .e-kanban .e-kanban-header .e-header-cells | Header cells of kanban. |
| .e-kanban .e-kanban-header .e-header-cells .e-header-wrap .e-header-title | Header title of kanban. |
| .e-kanban .e-kanban-header .e-header-cells.e-min-color | Header cells minimum color of kanban. |
| .e-kanban .e-kanban-header .e-header-cells.e-max-color | Header cells maximum color of kanban. |
| .e-kanban .e-kanban-header .e-header-cells.e-collapsed.e-min-color | Header cells of collapsed column minimum color in column constraint type of kanban. |
| .e-kanban .e-kanban-header .e-header-cells.e-collapsed.e-max-color | Header cells of collapsed column maximum color in column constraint type of kanban. |
| .e-kanban .e-kanban-header .e-header-cells .e-header-text | Header text of Kanban. |
| .e-kanban .e-kanban-header .e-header-cells .e-item-count | Header cells Item count of Kanban. |
| .e-kanban .e-kanban-header .e-header-cells .e-limits | Header cells limits in column constraint type of kanban. |
| .e-kanban .e-kanban-header .e-header-cells .e-limits .e-min-count | Header cells minimum count of kanban. |
| .e-kanban .e-kanban-header .e-header-cells .e-limits .e-max-count | Header cells maximum count of kanban. |
| .e-kanban .e-kanban-content | Customize kanban Content. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits | Content cells limits in swimlane constraint type of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits .e-min-count | Content cells minimum count of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-limits .e-max-count | Content cells maximum count of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-min-color | Content cells minimum color of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-max-color | Content cells maximum color of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-collapse-header-text | Content cells of collapsed header text. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells.e-collapsed .e-collapse-header-text .e-item-count | Content cells of collapsed header text Item count. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-show-add-button | Add button in content cells of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-show-add-button .e-show-add-icon | Customize content cells add icon of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-empty-card | Empty content cells of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card | Customize cards in kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-header .e-card-header-title | Cards header title of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-footer | Cards footer of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-content | Cards content of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color | Cards color of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-tags | Customize Card tags of kanban. |
| .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card .e-card-tag | Card tag of kanban. |
| .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-expand | Content cells of swimlane row expand of kanban. |
| .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-row-collapse | Content cells of swimlane row collapse of kanban. |
| .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-swimlane-text | Content cells of swimlane header text of kanban. |
| .e-kanban .e-kanban-content .e-content-row.e-swimlane-row .e-content-cells .e-swimlane-header .e-item-count | Content cells of swimlane items count of kanban. |
| .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells | swimlane content cells of kanban. |
| .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-dropping | Customize swimlane content cells card dropping of kanban. |
| .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells .e-card-wrapper | Swimlane content cells of card wrapper. |
| .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-min-color | Swimlane content cells of minimum color of kanban. |
| .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells.e-max-color | Swimlane content cells of maximum color of kanban. |
| .e-kanban .e-kanban-table .e-header-cells .e-header-text | Header text of Kanban. |
| .e-kanban .e-kanban-table .e-header-cells .e-item-count | Header cells Item count of Kanban. |
| .e-kanban .e-kanban-table .e-header-cells .e-column-expand | Header cells of toggle icon in column expand. |
| .e-kanban .e-kanban-table .e-header-cells .e-column-collapse | Header cells of toggle icon in column collapse. |
| .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) .e-content-cells | swimlane content cells of kanban. |
| .e-kanban .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-swimlane-text | Content cells of swimlane header text of kanban. |
| .e-kanban .e-kanban-table.e-content-table .e-content-row.e-swimlane-row .e-item-count | Content cells of swimlane items count of kanban. |
| .e-kanban .e-kanban-table.e-content-table .e-content-row .e-show-add-button .e-show-add-icon | Add icon in content cells of kanban. |
| .e-kanban .e-kanban-table.e-content-table .e-card.e-selection | Selected card of kanban. |
| .e-kanban .e-kanban-table.e-content-table .e-card .e-card-header | Cards header in kanban. |
| .e-kanban .e-kanban-table.e-content-table .e-card .e-card-content | Cards content in kanban. |
| .e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label | Cards label in kanban. |
The Fixed header in Kanban control can be customized in following ways,
By setting a fixed height to the Kanban content,
.e-kanban .e-kanban-content {
height: 500px;
}By customizing the CSS for the Kanban header.
.e-kanban-header {
position: -webkit-sticky;
position: sticky;
z-index: 100;
top: 0;
}Note: It will not affect the Kanban content’s height.