Thread: [IPB] Member Online/Offline w/ animation Tutorial (QoL)

Results 1 to 6 of 6
  1. #1 [IPB] Member Online/Offline w/ animation Tutorial (QoL) 
    Tarnish Community Manager

    Graves's Avatar
    Join Date
    Oct 2018
    Posts
    84
    Thanks given
    155
    Thanks received
    43
    Rep Power
    369
    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)
    Spoiler for Example:
    Attached image


    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)

    Spoiler for GIF:
    Attached image

    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!
    Discord: Graves4571
    Unique ID: 764532897096138762

    Attached image
    Reply With Quote  
     


  2. #2  
    Vanishing Into Smok3

    sean kiesler's Avatar
    Join Date
    Mar 2014
    Posts
    429
    Thanks given
    250
    Thanks received
    135
    Rep Power
    1341
    This looks really nice
    Attached image

    Discord: storm#3920
    Reply With Quote  
     

  3. Thankful user:


  4. #3  
    Registered Member
    Join Date
    Apr 2017
    Posts
    62
    Thanks given
    19
    Thanks received
    24
    Rep Power
    12
    I like it, good work
    Reply With Quote  
     

  5. Thankful user:


  6. #4  
    Misthalin where it all began.
    Forzaiken's Avatar
    Join Date
    Dec 2019
    Posts
    60
    Thanks given
    1
    Thanks received
    17
    Rep Power
    12
    works good but came out a bit wierd since i dont have round profile pictures lol
    Attached image

    do you mebe have a solution, for either to get images in a circle or the border in a boxed shape?
    Reply With Quote  
     

  7. #5  
    Registered Member
    Melvin's Avatar
    Join Date
    Aug 2011
    Posts
    1,150
    Thanks given
    546
    Thanks received
    418
    Rep Power
    1561
    I thought you were retarded rodri... hope this helps some tho


    A creative man is motivated by the desire to achieve, not by the desire to beat others.”


    ― Ayn Rand
    Reply With Quote  
     

  8. #6  
    Tarnish Community Manager

    Graves's Avatar
    Join Date
    Oct 2018
    Posts
    84
    Thanks given
    155
    Thanks received
    43
    Rep Power
    369
    Quote Originally Posted by Manatee View Post
    works good but came out a bit wierd since i dont have round profile pictures lol
    Attached image

    do you mebe have a solution, for either to get images in a circle or the border in a boxed shape?
    Lmk if you still need help w/ this
    Discord: Graves4571
    Unique ID: 764532897096138762

    Attached image
    Reply With Quote  
     


Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


User Tag List

Similar Threads

  1. Replies: 10
    Last Post: 06-22-2009, 07:17 PM
  2. Adding server "online" / "Offline" to website
    By woofdawg23 in forum Website Development
    Replies: 6
    Last Post: 02-21-2009, 12:07 AM
  3. Real working Online Offline.....TUT
    By Bulby Strife in forum Tutorials
    Replies: 3
    Last Post: 03-24-2008, 05:23 PM
  4. World 1/World 8 to Online/Offline
    By Fire in forum Tutorials
    Replies: 7
    Last Post: 06-12-2007, 05:35 PM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •