0

I am working on https://www.primefaces.org/showcase/ui/panel/dashboard.xhtml

Here i want to modify the UI and apply CSS

  • Set label of boards (Todo, In-progress, Done, Block)
  • Apply custom CSS on each dashboard

I've tried using, but it is apply on all dashboards 

.ui-dashboard-column::before{
  font-weight: bold;
  color: navy;
  content: "Todo List. ";
}
Sarz
  • 1,970
  • 4
  • 23
  • 43

1 Answers1

2

In your procedure defining the DashBoardModel you can set a styleClass per column:

DefaultDashboardColumn column1 = new DefaultDashboardColumn();
// ...
column1.setStyleClass("todo")
model.addColumn(column1);

Then use this styleClass with your css selector:

.ui-dashboard-column.todo::before{
 ...
}

see also

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Selaron
  • 6,105
  • 4
  • 31
  • 39
  • This is not as overriding default PrimeFaces CSS, `DefaultDashboardColumn` works for me, further i can add using `context: "LABEL OF BOARD"` thanks – Sarz Oct 29 '19 at 12:04