Custom Floating Online Status

2 weeks ago — by ★ 𝐫𝐱𝐦𝐞𝐨 ★ — Text & Name Effects — used 25 times

This code allows you to change your online status icon to your own png or gif. Its designed to be easily resized! Your icon will also float up and down. I hope you like it! <3

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

<style>
<!-- Original Layout base by ★ 𝐫𝐱𝐦𝐞𝐨 ★ -->
<!-- https://friendrewind.com/layouts/element.php?id=48 ★ -->

@keyframes onlineFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(8px); }
    100% { transform: translateY(0px); }
}

.online img, [class*="online"] img {
    visibility: hidden !important;
    display: none !important;
}

.online, [class*="online"] {
    display: inline-block !important;
    
    background-image: url("YOUR_DIRECT_GIF_URL_HERE.gif") !important;
    
    width: 50px !important; 
    height: 50px !important; 
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    animation: onlineFloat 3s infinite ease-in-out !important;
}
</style>

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Text & Name Effects

« Back to Text & Name Effects | « All Profile Elements