Jump to content
JeffyterS

Online Indicator in image of the Post

Recommended Posts

JeffyterS    1

Example:

Spoiler

Online:

image.png.96c14bdbfbce33254d924e99c6ae5d90.png

Offline:

image.png.a9d0e326f97f9bd9289be700329052e6.png

 

 

Let's go to the code:

HTML

Add this on your userPhoto or userPhoto2, it depends on whether you use it or not, in my case is userPhoto2, between edge of tag </a> and {{else}} this code:

      <!-- On-Off start --> 
		    	   {{if $member->isOnline()}}<span title="Online" class='statusPost onP'> </span>{{else}}<span title="Offline" class="statusPost offP"></span>{{endif}}
		              
                 <!-- On-Off ends -->

Like this:

image.thumb.png.1d4895fb316b6517c78cb8ff7d385e2d.png

CSS

Go to Custom CSS and add this code:

.statusPost{
	width: 12px;
    height: 12px;
    border-radius: 12px;
    float: right;
    position: absolute;
    margin-left: -25px;
    margin-top: 10px;
}
.onP {
     background: #00ff00;
    box-shadow: 0px 0px 2px 2px #3e9c0a;
}

.offP {
 background:red;
 box-shadow: 0px 0px 6px 4px darkred;
}

You can use some keyframes to animate the shadow, but it's your preference.

 

 

  • Like 1

Share this post


Link to post
Share on other sites
What do you think? Remember the human.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

×