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