Announcement

Collapse
No announcement yet.

How to make the Green Online icon "Glow" using Pure CSS

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #31
    Excellent mod. Thanks.
    Unfortunately the location I've chosen for my online indicator, right before the username, moves the indicator based on username length. And this mod doesn't move with it. I might fiddle with it later.
    Works in vB 5.6.0.

    Comment


      #32
      So what I did instead, although it required editing the template, was split the span classes in two and put them inside the vb: if condition instead of surrounding. Then I added the nifty heartbeat class mod from vbrocks to the green span. Works great!

      Before:
      Code:
      <span class="b-icon b-icon__status--<vb:if condition="$conversation['online'] == 'online'">green<vb:else />gray</vb:if> "></span>
      After:
      Code:
      <vb:if condition="$conversation['online'] == 'online'"><span class="heartbeat b-icon b-icon__status--green"></span>
      <vb:else /><span class="b-icon b-icon__status--gray"></span></vb:if>

      Comment


        #33
        Was upgraded to 5.6.1. Take note of the glowing online icon on the top left of the profile. Anyone know how to move it to the correct spot??

        Comment


          #34
          Code:
          .b-icon__status--green,
          .profileContainer .username .vb-icon-status-online {
              background: #32cd32; /* green, change as needed */
              border-radius: 100%;
              border: 2px solid #fff;
              box-sizing: border-box;
          }
          
          .profileContainer .profile-acct .username .b-icon__status--green::after {
              content: '';
              border: 10px solid #6e9d00;
              background: transparent;
              border-radius: 40px;
              height: 40px;
              width: 40px;
              position: absolute;
              top: 206px; /* you may have to tweak this if you move it from the default position */
              left: 44px; /* you may have to tweak this if you move it from the default position */
              z-index: 1;
              opacity: 0;
              -webkit-animation: glow 3s ease-out infinite;
              animation: glow 3s ease-out infinite;
          }
          
          .b-userinfo__icons .b-userinfo__icon .b-icon__status--green::after {
              content: '';
              border: 10px solid #6e9d00;
              background: transparent;
              border-radius: 40px;
              height: 40px;
              width: 40px;
              position: absolute;
              top: -24px; /* you may have to tweak this if you move it from the default position */
              left: -22px; /* you may have to tweak this if you move it from the default position */
              z-index: 1;
              opacity: 0;
              -webkit-animation: glow 3s ease-out infinite;
              animation: glow 3s ease-out infinite;
          }
          
          .profileContainer .username .vb-icon-status-offline {
              background-position: -320px -112px;
          }
          
          .profileContainer .username .vb-icon-status-online:after {
              left: -26px;
              top: -26px;
          }
          
          .profileContainer .username .vb-icon {
              margin-left: 5px;
              position: relative;
              overflow: visible;
              -webkit-transform: scale(1.3);
              -ms-transform: scale(1.3);
              transform: scale(1.3);
          }
          
          @-webkit-keyframes glow {
              0% {
                  -webkit-transform: scale(0);
                  opacity: 0;
              }
          
              25% {
                  -webkit-transform: scale(0);
                  opacity: .1;
              }
          
              50% {
                  -webkit-transform: scale(.1);
                  opacity: .3;
              }
          
              75% {
                  -webkit-transform: scale(.5);
                  opacity: .5;
              }
          
              100% {
                  -webkit-transform: scale(1);
                  opacity: 0;
              }
          }
          
          @keyframes glow {
              0% {
                  transform: scale(0);
                  opacity: 0;
              }
          
              25% {
                  transform: scale(0);
                  opacity: .1;
              }
          
              50% {
                  transform: scale(.1);
                  opacity: .3;
              }
          
              75% {
                  transform: scale(.5);
                  opacity: .5;
              }
          
              100% {
                  transform: scale(1);
                  opacity: 0;
              }
          }

          Comment


            #35
            zoran_dj thank you for your response and help. That moved it down but it just needs a little tweak to center it on the user profile. Thread view looks to be just fine...

            I still left the old code in there for now. Added your code to the bottom of the css.



            Here is a video




            I also notice the green dot is not a bright green as before or how it is on this forum. I have this css but maybe the one you supplied overrode it? If I remove your code the dot is bright again as wanted

            Code:
            /* Online Icon Color / Size Start */
            .b-icon__status--green {
                background: #0f0; /* lime color; change color as desired */
                border-radius: 100%;
                border: 2px solid #fff;
                box-sizing: border-box;
            }
            /* Online Icon Color / Size End */

            Comment


              #36
              Code:
              @Mitch This CSS code has been removed due to the fact of not being Responsive.

              Comment


                #37
                Well a longer username moves the online icon over to the right. The pulsating ring does not follow it. This code is not responsive to adjust for different length names

                Click image for larger version  Name:	C6BDA970-E66C-404C-A311-5B39FAD11413.jpeg Views:	0 Size:	78.9 KB ID:	21777Click image for larger version  Name:	BCFE5FBC-823F-49F8-A399-B421EDDB886A.jpeg Views:	0 Size:	85.4 KB ID:	21778

                Comment


                  #38
                  Originally posted by Mitch View Post
                  Well a longer username moves the online icon over to the right. The pulsating ring does not follow it. This code is not responsive to adjust for different length names

                  Click image for larger version Name:	C6BDA970-E66C-404C-A311-5B39FAD11413.jpeg Views:	0 Size:	78.9 KB ID:	21777Click image for larger version Name:	BCFE5FBC-823F-49F8-A399-B421EDDB886A.jpeg Views:	0 Size:	85.4 KB ID:	21778
                  Thanks for pointing this out, Mitch. Here is the responsive fix for the latest version. You only need this CSS code.

                  Code:
                  /* Green Online icon "Glow" vB 5.6.1 - START */
                  .b-icon {
                      overflow: visible;
                      position: relative;
                  }
                  
                  .b-icon__status--green,
                  .profileContainer .username .vb-icon-status-online:after {
                      background: #32cd32; /* green, change as needed */
                      border-radius: 100%;
                      border: 2px solid #fff;
                      box-sizing: border-box;
                  }
                  
                  .b-icon__status--green::after {
                      content: '';
                      border: 10px solid #6e9d00;
                      background: transparent;
                      border-radius: 40px;
                      height: 40px;
                      width: 40px;
                      position: absolute;
                      top: -26px; /* you may have to tweak this if you move it from the default position */
                      left: -26px; /* you may have to tweak this if you move it from the default position */
                      z-index: 1;
                      opacity: 0;
                      -webkit-animation: glow 3s ease-out infinite;
                      animation: glow 3s ease-out infinite;
                  }
                  
                  @-webkit-keyframes glow {
                      0% {
                          -webkit-transform: scale(0);
                          opacity: 0;
                      }
                  
                      25% {
                          -webkit-transform: scale(0);
                          opacity: .1;
                      }
                  
                      50% {
                          -webkit-transform: scale(.1);
                          opacity: .3;
                      }
                  
                      75% {
                          -webkit-transform: scale(.5);
                          opacity: .5;
                      }
                  
                      100% {
                          -webkit-transform: scale(1);
                          opacity: 0;
                      }
                  }
                  
                  @keyframes glow {
                      0% {
                          transform: scale(0);
                          opacity: 0;
                      }
                  
                      25% {
                          transform: scale(0);
                          opacity: .1;
                      }
                  
                      50% {
                          transform: scale(.1);
                          opacity: .3;
                      }
                  
                      75% {
                          transform: scale(.5);
                          opacity: .5;
                      }
                  
                      100% {
                          transform: scale(1);
                          opacity: 0;
                      }
                  }
                  /* Green Online icon "Glow" vB 5.6.1 - END */

                  Comment


                    #39
                    Thanks that worked out really nice. I appreciate the help and would like to buy you a coffee. How would I do that?

                    Comment


                    • Mitch
                      Mitch commented
                      Editing a comment
                      Sent with a doughnut

                    #40
                    One thing I am noticing now is when viewing on IOS, ipad, Iphone the circle stops pulsating until I scroll the screen slightly. Then it happens again once the scrolling stops.
                    Does anyone else see this??

                    Comment


                    • NumNum
                      NumNum commented
                      Editing a comment
                      No problem on my iphone. I went directly to a profile page though.

                    #41
                    I do see what you mean now. I only see it on your site, not here. I suspect something with zoran_dj code.

                    Comment


                      #42

                      Comment


                        #43
                        The only thing I can think of is that the CSS code I gave you above is interfering with another CSS code on your site, did you had this problem before you did these changes or you didn't check this at all?

                        I might create a Javascript modification for vBulletin for this, it would be a cool addition to the current modifications I have made.

                        I just can't find enough time to finish my website because of my current work where I am about to sell my vBulletin modifications.

                        Comment


                        • Mitch
                          Mitch commented
                          Editing a comment
                          Originally it was working good until the update broke it. Your code got it back on track but I never noticed this little issue until I used IOS. I am on cloud if it matters.
                          Thanks for any help that you can offer

                        #44
                        I see on this site the Mod is broken on a users profile page since the update, just like it was on our site. It does keep pulsating here in thread view using ios, so yes there must be a new code issue. I might just reinstall the old code and let the profile pulsator be messed up.

                        Comment


                          #45
                          Working great on 5.6.3
                          thank you

                          Comment

                          Users Viewing This Page

                          Collapse

                          There is 1 user viewing this forum topic.

                          • Guest Guest

                          Latest Posts

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"