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,971
  • 4
  • 21
  • 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,085
  • 4
  • 21
  • 46
Selaron
  • 5,915
  • 4
  • 28
  • 38
  • 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