« Web, HTML, Tech Forum

Custom online/offline icon?

Is there a way to change that and if so how?ย 


Report Topic

10 Replies

Sort 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>


Report Reply

Reply by Frankkie

posted
updated

I don't think she ever saw this reply above since there were no notifications for forum replies 20 days ago lol.ย  Hopefully she sees it now.


Report Reply

Reply by Rosy

posted

Dont know if it helped the original poster but it helped me, thank you!


Report Reply

Reply by rubab

posted

Here at
Distinguished, you can scan our site to explore theย top custom web design companiesย ย that can
deliver professional services which can help your brand in maximizing its
performance and customer engagement. We conduct extensive research and utilize
credible sources to ensure our selection of top companies is legit and the best
for clients.


Report Reply

Reply by PastelMermaid

posted

Gonna try my hand at this!

Thanks. .u.


Report Reply

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>


Report Reply

Reply by cj hayward

posted

hey! i posted a blog tutorial for this :) check my profile!


Report Reply

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?


Report Reply

Reply by ellysaperry98

posted
updated

CRM softwares are used by businesses for gathering customer data, streamlining sales and marketing, and providing an efficient communication process. Being the leading CRM software development company, Quytech provides the best CRM development services to various verticals such as healthcare, insurance, automobiles, education, finance, and more. We assist businesses and startups of all sizes to enjoy the benefits of CRM and reach new heights of success.ย 


Report Reply

Reply by benjaminlouis680309

posted
updated

Yes, you can customize your online/offline icon using HTML and CSS.ย ย small business internet providers near youย You can create your own icon images or use existing ones, then use CSS to style and position them accordingly. By adding specific classes or IDs to your HTML elements, you can easily control the appearance of the icon based on the user's online/offline status.


Report Reply