Home | Profile | My Blog
ZombieChinyoka

Last Login:
December 9th, 2020

View All Posts


Gender: Female
Status: In a relationship
Age: 22
Sign:
Country: Germany

Signup Date:
October 04, 2019

Subscriptions

04/08/2020 03:24 PM 

HTML Tutorial 6 - Online Now Icon

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

7 Comments  

View All Posts


DAkOTa!

 

Jul 19th 2021 - 2:46 PM

Comment Back  |   Send Message   |  Block User

ive been trying to follow this for two days and so far all ive done was get rid of the "online now" thingy, and when i tried to put the new one there, the old "online now" thing came back and now i dont know how to get rid of it. it would be greatly appreciated if you did a video tutorial on tiktok or youtube or anything you can. 

xxST3PHxx
xxST3PHxx
Jan 13th 2023 - 5:41 PM

Comment Back  |   Send Message   |  Block User

hi ! idk if ur still interested but i have a tutorial on my blog abt a diff way 2 add ur own online now icon if that helpz !



DAkOTa!

 

Jul 19th 2021 - 2:31 PM

Comment Back  |   Send Message   |  Block User

can you please just do a video tutorial


DAkOTa!

 

Jul 18th 2021 - 8:58 PM

Comment Back  |   Send Message   |  Block User

where is your style section?


Kaye

 

Oct 11th 2020 - 10:02 AM

Comment Back  |   Send Message   |  Block User

You're a literal angel. Thanks!


vαℓ

 

Jun 25th 2020 - 9:20 PM

Comment Back  |   Send Message   |  Block User

ok here's what i have,i put it underneath my layout code.. should it be inside the layout code?? bc this isn't working for me :/ i tried to attach the image but idk if it works so i'll try toembed it here too lol
<a href="https://ibb.co/mbSH8ky"><img src="https://i.ibb.co/k5Mh1jD/myspace.png" alt="myspace" border="0"></a>




vαℓ

 

Jun 25th 2020 - 9:08 PM

Comment Back  |   Send Message   |  Block User

idk if u have tik tok but if u did a video tutorial of it on there it would probly help a lot too bc i know i'm more of a visual learner :0 but just u explaining everything on here is so helpful! i'm still having some trouble tho :/ i think bc idk where to put some things


ZombieChinyoka

 

Apr 15th 2020 - 4:01 PM

Comment Back  |   Send Message   |  Block User

I totally understand that :D Can I help you with anything?

View All Posts



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

© 2024. FriendProject.net All Rights Reserved.