website stats



xX.bunnyrat.Xx

Last Login:
August 13th, 2020


View All Posts




Gender: Other

Age: 16
Country: United States

Signup Date:
May 17, 2020


Subscriptions

08/01/2020 02:51 PM 

how to get a custom online now icon!
Category: Resources
Current mood:  accomplished

This is a tutorial for if you want to learn what thing does what. If you just want to quickly copy+paste some code scroll to the bottom! ♥

Just for reference, here's my current online now icon :

and here's what the default one looks like:


I recommend using inspect mode to test everything out and make sure it's working before actually editing your page.

If you look in inspect mode, this (images/onlinenow.gif) is the default icon:

You can hide that super easy just by setting it to hidden.


Now my icon looks like this: 


To get a custom icon, set the icon you want as the background of the span element that the original image was inside of:

 (idk why i had the !important thing there you could prolly leave it out)

Now my icon looks like this:

As you can see, it's cut off at the bottom. I had my online icon completely hidden for a while, because I hated the default one, but didn't know how to make the whole thing show up.
The only way I've figured out to fix this is by adding padding: (also background repeat is off now cause yeah)


The higher you set the top padding to, the higher up on the page the icon will be. You can position it this way, but I prefer to leave it at 10, and use bottom padding instead.

If you have both top padding and bottom padding, the range where the icon can be placed is between those two points. The icon wants to be at the uppermost position it can (which you set with top padding). Since I set background-position to 100%, that makes the icon sit at the lowermost position it can (which you set with bottom padding).
Either way works just fine, but I found using bottom padding to be easier for me.

Now after all that positioning, my icon finally looks like this!:

It also works in your friend space!


If you just want to copy+paste my code, here it is!
 
make sure to switch out the background image url to your own icon!

4 Comments  

View All Posts

KANDI KID FOSSA


 

Oh oki. Makez sense. Ty!! I guess therez no problem den :P

Posted on Aug 3rd 2020 - 8:25 AM

KANDI KID FOSSA replied to Comment:

i looked at your page when you were offline earlier and the icon was gone. if you're checking right after signing out i think the issue must just be lag on friendproject's end, but if not then let me know

Posted on Aug 3rd 2020 - 2:42 AM

xX.bunnyrat.Xx

 

i looked at your page when you were offline earlier and the icon was gone. if you're checking right after signing out i think the issue must just be lag on friendproject's end, but if not then let me know

Posted on Aug 3rd 2020 - 2:42 AM

xX.bunnyrat.Xx replied to Comment:

srsly tysm!!!!! but i cant get mine 2 sync up 2 show when im actually online. itz jus alwayz there. do u kno how 2 fix dat?

Posted on Aug 2nd 2020 - 5:28 PM

xX.bunnyrat.Xx

 

idk sorry :( i guess since i'm always online when i'm working on it i would have no idea how it looks when i'm offline, i've only seen it go on and off in my friend space. if i find a fix for it i'll let you know! :D

Posted on Aug 2nd 2020 - 8:02 PM

xX.bunnyrat.Xx replied to Comment:

srsly tysm!!!!! but i cant get mine 2 sync up 2 show when im actually online. itz jus alwayz there. do u kno how 2 fix dat?

Posted on Aug 2nd 2020 - 5:28 PM

KANDI KID FOSSA


 

srsly tysm!!!!! but i cant get mine 2 sync up 2 show when im actually online. itz jus alwayz there. do u kno how 2 fix dat?

Posted on Aug 2nd 2020 - 5:28 PM

View All Posts

Mobile | Terms Of Use | Privacy | Cookies | Copyright | FAQ | Support

© 2020. FriendProject.net All Rights Reserved.