[IPB] Member Online/Offline w/ animation Tutorial (QoL)
Hey guys, so real quick I just wanted to make this as a quick QoL for your forum. Feedback is appreciated but also, just did this for the hell of it, wasn't really trying to make anything out of it except add a random cool feature to an otherwise bland forum.
Below you will find a tutorial to how to get this animation.
(Sorry for the poor quality and the lengthy post)
Please understand that for this to work properly, you need to have rounded photos which you can do from your easy theme editor. (Check Spoiler below for GIF of how to get there)
First, let's start off by finding the code you need to replace.
In your HTML template of your theme, search for postContainer - then click through the forums > front > topics > postContainer
Next, find the code/line you're replacing
In the postContainer, CTRL+F for "cAuthorPane_photo" and go to the SECOND RESULT - it'll be below the following code
Code:
<ul class='cAuthorPane_info ipsList_reset'>
{{if $comment->author()->member_title && $comment->author()->member_id}}
<li class='ipsType_break'>{$comment->author()->member_title}</li>
{{elseif $comment->author()->rank['title'] && $comment->author()->member_id}}
<li class='ipsType_break'>{$comment->author()->rank['title']}</li>
{{endif}}
{{if $comment->author()->rank['image'] && $comment->author()->member_id}}
<li>{$comment->author()->rank['image']|raw}</li>
{{endif}}
It'll look like
Code:
<li class='cAuthorPane_photo'>
{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
</li>
Next, highlight that entire code in your editor ^ and replace it with the following code:
Code:
{{if $comment->author()->isOnline()}}
<li class='cAuthorPane_photo online'>
{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
</li>
{{else}}
<li class='cAuthorPane_photo offline'>
{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
</li>
{{endif}}
Finally, save it. Now you need to put the CSS in your custom.css template.
Code:
.online {
height: 118px;
width: 120px;
border: 2px solid #393;
margin: 10px auto;
border-radius: 65px;
padding: 0px;
animation: glow 800ms ease-out infinite alternate;
}
.offline {
height: 118px;
width: 120px;
border: 2px solid red;
margin: 10px auto;
right: 1px;
border-radius: 65px;
padding: 0px;
}
@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
And voila! Feel free to mess with the "800ms" in the animation css for if you want it slower or faster. Hope you enjoy. If you need any website or IPB services, check out my service thread in my signature. Or if you need any help with your forum (if there's an issue,) feel free to add my discord and hit me up. Happy to help when I can.
p.s. If you dont want rounded photos, just mess with the border-radius and width/height to fit your square photos properly. Hope this helps!
