[phpBB3] Online Icon Above Avatar

This a simple javascript, that lets you to set up the online icon above avatar. By default, the icon behind it. Now you can fix that

Demo:

Code:

$(function(){
$('.online .postprofile').prepend('<div class="online-img" style="position: absolute; width: 100%; height: 58px; background-image: url(YOUR ONLINE ICON URL GOES HERE); background-position: right center; background-repeat: no-repeat; z-index: 1000; margin-left: -5px; margin-top: -5px;"></div>');
});

Place: In All Pages.
---

You only need to change the text in capitals for the link of the online icon, that you want

If appear a double icon in the profiles, you should go to :

ACP > Display > Pictures & Colors > Pics Management > Buttons > Online

And mark "Hide" and save changes.

That's all folks.

@YoshiGM can i have this for punbb ?

and icon image with different pic please

thanks

Try with:

Code:

        $(function(){
        $('.pun .user-ident .user-basic-info').prepend('<div class="img.i_icon_online" style="position: absolute; width: 100%; height: 58px; background-image: url(LINK OF YOUR ONLINE ICON HERE); background-position: right center; background-repeat: no-repeat; z-index: 1000; margin-left: -5px; margin-top: -5px;"></div>');
        });

Just add the link in the caps text and execute the javascript in all pages

thanks can i get a online image pic please if dnt mind hmmmm if u have one i apperciate ur work

I can't design a online icon for you (the rules you know) u.u
But, i reccomend you to importa skin from hitskin and copy the online icon to your forum (Do this in a test forum)

Or request a image in the graphic section (if you can)

well thanks i found it

looks so cool it would be really good if you can make this so it has a offline icon too so when the member is offline it shows it

APE wrote:looks so cool it would be really good if you can make this so it has a offline icon too so when the member is offline it shows it

'



yeah i was thinking about it too .... hope we get the code thanks for looking into this @ape

this can be done just with css

Code:


.online .postprofile dt > a:before {
    content: "Online";
    border: 1px solid green;
    position: absolute;
    z-index: 999;
    margin-top: 10px;
    border-radius: 3px 0;
    padding: 1px;
    background: rgba(159, 232, 9, 0.49);
    color: green;
    text-shadow: 0 1px #fff;
}