 |
HTML Tutorial 6 - Online Now Icon
|
p, li { font-size: 10pt; } Hi everyone! I'm back with another profile layout tutorial! This one will be short, but I really want to tell you this because I was trying to figure it out since I joined and the friendproject support wasn't much help. Now I want to show you how you can change the Online now icon on your profile, the one that blinks green when you are logged in. You can find custom code for them on sites like glitter-graphics.com or pimp-my-profile.com. The layout codes on those sites were made for myspace, and most of it works perfectly fine on friendproject too. However, the Online Now icons are a bit different. The code you get won't work if you just paste it into your profile editor, but I will show you what you need to to, it's really easy once you know it! Grab yourself an icon code from one of the sites above (or another one, there are many), and paste the code into your style section. It should look similar to this: <style> * html td td td td.text { background-image: url('https://dl10.glitter-graphics.net/pub/352/352870r1wbtx0gci.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; } * html img.ImgOnlineNow { visibility: hidden; background-repeat: no-repeat; } }* html .contactTable td.text { background-color: transparent; background-image: none; } </style> <br><a href=https://glitter-graphics.com>Online Now Icons</a> The only thing we really need is the background-image url, the line I marked in color for you. Copy it and save it somewhere in an open text editor, you'll need it later. You can delete the entire rest, we'll rewrite it ourselves entirely. In the first step we need to hide the original online now icon so it doesn't show up anymore. For this, we will call the CSS selector .msOnlineNow img in your style section. It selects the image inside the section which is bound to the CSS class .msOnlineNow (you don't need to understand this if it's too confusing, just to explain things to people who are interested in it ^^). We will simply set the visibility of it to hidden. Like this: .msOnlineNow img { visibility: hidden; } If you visit your profile now: No Online now icon! Now we will set the one you choose! We will call the .msOnlineNow class again, but this time without the image. I won't explain all of the CSS here, but what we basically do it to set the image you choose at the background image of the section, set it so it only shows once and increase the height so it shows properly. If you're interested in what the code does exactly, you can always google the keywords, look up W3schools and play around with it yourself. This is what you need to write: .msOnlineNow { background-repeat: no-repeat; background-image: url('paste your chosen url in here!'); background-repeat: no-repeat; z-index: 2; height:20px; display: inline-block; } With this you should already be done! If you're facing any issues with it, please don't hesitate to comment or message me, I'll do my best to help you! You can also read my other HTML/CSS/Profile layout tutorials if you want ^^
|
|
excited
blah
awake