User online status modification

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;
    }

online-status

2 Likes

Hi,

Thank you for your solution, it will be useful for our community.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.