Thursday, February 12, 2026 | Good evening!

FlyingWPress

Flatpickr Styling in Bricks

Flatpickr Styling in Bricks

March 26, 2025

I was recently working on a project that used the date filter feature in Bricks. Unfortunately, as Bricks tends to do, the font size was ridiculously small, and the opacity levels of the font made it almost unreadable.

Here is the CSS I used to fix the issue.

.flatpickr-calendar * {
    color: black !important;
    font-size: 1.05em;
    font-weight: 600!important;
}
.flatpickr-month select *{
  color: black !important;
   font-weight: 600;
}
.prevMonthDay,.nextMonthDay{
  color: #00000080 !important;
}
.flatpickr-weekday{
  font-size: 12px!important;
}

Here is a before-and-after screenshot:

Before and after screenshot show poor contrast on the left and improved contrast on the right.

I am still researching another bug that has the date picker panel completely off the screen on wide widths.

Leave a Reply

Featured