OverlayPanel - change background (including arrow)

[onyii5119]

How could I change the background color of an OverlayPanel, including the color of the associated arrow and still maintain the border radius of the container?

[Melloware]

here you go this CSS changes it to blue whether its flipped top or bottom.

Code: Select all

.p-overlaypanel {
  background: blue;
}
.p-overlaypanel.p-overlaypanel-flipped::before {
  border-top-color: blue;
}
.p-overlaypanel.p-overlaypanel-flipped::after {
  border-top-color: blue;
}

.p-overlaypanel.p-overlaypanel::before {
  border-bottom-color: blue;
}
.p-overlaypanel.p-overlaypanel::after {
  border-bottom-color: blue;
}

[onyii5119]

Thanks, Melloware.

Your solution works when the overlay is displayed below the target.

It partially works when it is displayed above the target. In this case it shows an arrow pointing downwards (correct direction) and another arrow pointing upwards. If the arrow pointing upwards could be removed, that would solve my problem.

Thanks again for taking your time to look into my issue.

Jonathan

[Melloware]

Oh you just might need to tweak my CSS a little more. I thought I had checked it in both directions and it was looking OK but there could be something i missed.

[onyii5119]

Thanks for getting back to me. I tried several options but did not get it to work exactly as it should, before I posted my last comment.

I appreciate your help.

Jonathan