Forum:
Is there a way to change that and if so how?Β
« Web, HTML, Tech Forum
Custom online/offline icon?
Report Topic
8 Replies
Reply by Arron J. Hunt
posted
updated
Should be pretty easy to do.
<style>
/* Hides the default image */
.online img,
.offline img {
Β display: none;
}
.online::before {
Β content: "π€";
}
.offline::before {
Β content: "π€";
}
</style>
or for images:
<style>
.online::before {
Β content: "";
Β display: block;
Β width: 24px;
Β height: 24px;
Β background-image: url("path-to-image.png");
Β background-size: 24px 24px;
}
</style>
Permalink
Reply by Rosy
posted
Reply by PastelMermaid
posted
Reply by haihai
posted
<style>
.online{Β
/*hides the text*/
visibility: hidden;Β
}Β
.online img {
/*changes the content of the image*/
content: url("your image here :>");Β
animation-name: none;Β
/*makes sure you can see it :)*/
visibility: visible;Β
/*set the width and height to the dimensions that you want
if you want it to stay to scale, just get rid of either the width
or the height and it will scale it proportionally*/
height: 25px;Β
width: 80px;Β
}
</style>
Reply by cj hayward
posted
Reply by πΎπππ β°
posted
none of these codes in the replies actually help with the offline message/icon.
Yes, we've changed the online icon, but how do we successfully change the offline/last active icon/message?
Reply by β± π³π’π΅π¦ β±
posted
Reply by empty_network
posted
updated
It can also be done in a single line:
online{content:url("https://example.com/example.gif");height:25px;width:64px;}