Change listing border colour from demo yellow?

[borrowmebaby]

Hi! I’m trying to use CSS to change the standard yellow border on listings (featured and regular listing viwq), but I’m likely doing something wrong.

I found an old thread that said to use .hp-listing--view-block .hp-listing--featured, so would it be something like this?

TIA!

.hp-listing--view-block .hp-listing--featured {
    border-color:#000000;
}

[andrii]

Hi,

If I understand you correctly, please try the solution in this topic How can I change the divider color - #6.

If not, please send more details, such as a screenshot of what you need to change, and we will try to help you.

[borrowmebaby]

Hi! Thanks for the quick reply.

I’m looking to change the border colour around featured listings (it’s currently set to the demo yellow). It can be seen in the screenshot below and at borrowmebaby.com.

[aqmiami7]

Add this css:

.hp-listing--view-block .hp-listing__featured-badge {
    background-color: black;
} 

[borrowmebaby]

Hm that works for the background of the little up arrow badge (now black background in photo), but not for the border itself it seems.

[andrii]

Hi,

Please try this CSS snippet:

.hp-listing--view-block.hp-listing--featured {
    border: 2px solid purple;
}

[borrowmebaby]

That worked, thank you!

And if you wanted to match the featured badge colour to the border?

[andrii]

Hi,

Please try this CSS snippet:

.hp-listing--view-block .hp-listing__featured-badge i::before {
    color: purple;
}

[borrowmebaby]

That works perfectly, thank you!

[Abe]

.hp-listing–view-block.hp-listing–featured {
border: 2px solid purple;
}

Hi is it possible to make this snippet with this color?
{color:#0D1F35}

[andrii]

Hi,

Please try this CSS snippet:

.hp-listing--view-block.hp-listing--featured {
    border: 2px solid #0D1F35;
}

[Abe]

Thanks!