This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 1 year, 6 months ago.

Changed popover bottom left and right corner border color not displaying…

  • steveepeterson

    Posts: 21
    Member Reply #12207


    I’ve been playing with this for awhile now and have not yet managed to come up with a solution, so I’m hoping someone can help.

    What I’m trying to do isn’t hard (I don’t think!) – I simply want restyle a few colors on popover confirmations to match the rest of my site. I’ve added the following to my custom CSS file, which is included last on the page:

    .popover.confirmation {
    border: 1px solid #660000 !important;
    .popover-title {
    background-color: #ffffff !important;
    color: #660000 !important;
    .popover-content {
    background-color: #eeeeee !important;
    .popover.bottom > .arrow {
    border-bottom-color: #660000 !important;

    It works with one exception – just the bottom left and bottom right rounded corner borders don’t “paint”/display with the #66000 color – they seem to stay the previous color (gray). It happens on both Firefox and Chrome, which makes me think I’m missing some CSS magic. But so far I’m coming up empty. A little silly I know, but I have to believe there’s a solution lurking somewhere!

    Thanks for any help. I’m stuck using Metronic 4 for the foreseeable future… but looking forward to trying version 5!

    You must be logged in to view attached files.

    Posts: 4527
    Support Staff Reply #12255


    Please try to set border-radius to the popover itself and its child container as well. The border seems got distracted by one of popover elements.


You must be logged in to reply to this topic.