User online status modification

General
1

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

1 Like
3

Hi,

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