Hi! I want to share this custom CSS to modify the user’s online status sign, to a more visible option. It also modify the “verified” sign too.
.hp-vendor__online-badge--active::after {
line-height: 1.8;
display: block;
font-family: 'Font Awesome 5 Free';
content: "\a\f0ac\00a0Online";
white-space: pre;
font-size: 20px;
margin: 5px 0px 5px 0px;
color: #FF5733;
}
.hp-vendor__online-badge--active {
width: 0;
}
.fa-check-circle:before {
content: "\f4fc";
}
.hp-vendor--view-block .hp-vendor__content {
margin-bottom: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
align-items: flex-start;
}
.hp-vendor--view-block .hp-vendor__attributes--secondary {
padding-top: 15px;
}