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

    #46
    Originally posted by Mitch View Post
    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??
    Originally posted by NumNum View Post
    I do see what you mean now. I only see it on your site, not here. I suspect something with zoran_dj code.
    Glenn when you find time after getting caught, up can you review these codes. Right now I have two "active" CSS entries, your original one and Zoran's. I think I need to start fresh with one single code that also works on IOS when not scrolling.

    I'll post what I have currently in my CSS

    First one is from you which seemed to break after an update,, SEE ABOVE POST::

    Code:
     /*Glowing PM and Notifications Start*/
    .notifications-count {
    -webkit-animation: glowing 1500ms infinite;
    -moz-animation: glowing 1500ms infinite;
    -o-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite
    }
    
    .notifications-count.h-hide-imp {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none
    }
    
    @-webkit-keyframes glowing {
    0% {
    background-color: #D31F1F;
    -webkit-box-shadow: 0 0 3px #D31F1F;
    }
    
    50% {
    background-color: #851414;
    -webkit-box-shadow: 0 0 15px #851414;
    }
    
    100% {
    background-color: #D31F1F;
    -webkit-box-shadow: 0 0 3px #D31F1F;
    }
    }
    
    @-moz-keyframes glowing {
    0% {
    background-color: #D31F1F;
    -moz-box-shadow: 0 0 3px #D31F1F;
    }
    
    50% {
    background-color: #851414;
    -moz-box-shadow: 0 0 15px #851414;
    }
    
    100% {
    background-color: #D31F1F;
    -moz-box-shadow: 0 0 3px #D31F1F;
    }
    }
    
    @-o-keyframes glowing {
    0% {
    background-color: #D31F1F;
    box-shadow: 0 0 3px #D31F1F;
    }
    
    50% {
    background-color: #851414;
    box-shadow: 0 0 15px #851414;
    }
    
    100% {
    background-color: #D31F1F;
    box-shadow: 0 0 3px #D31F1F;
    }
    }
    
    @keyframes glowing {
    0% {
    background-color: #D31F1F;
    box-shadow: 0 0 3px #D31F1F;
    }
    
    50% {
    background-color: #851414;
    box-shadow: 0 0 15px #851414;
    }
    
    100% {
    background-color: #D31F1F;
    box-shadow: 0 0 3px #D31F1F;
    }
    }
    /*Glowing PM and Notifications End*/

    And the code added from Zoran::

    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: #0f0; /* Lime, change as needed */
    border-radius: 100%;
    border: 2px solid #fff;
    box-sizing: border-box;
    }
    
    .b-icon__status--green::after {
    content: '';
    border: 10px solid #f90101;
    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


      #47
      The first CSS is for the message notification count on the header top bar while the second one is for the green online icon. Two different CSS. You have to keep both if you need both. But I wonder why the first one is no longer working. Is it also not working here?
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #48
        Originally posted by glennrocksvb View Post
        The first CSS is for the message notification count on the header top bar while the second one is for the green online icon. Two different CSS. You have to keep both if you need both. But I wonder why the first one is no longer working. Is it also not working here?
        I messed up and should have read in to the title better. You are correct, it is for the notifications and that IS working just fine.

        Just the bottom code posted above for the glowing online. It only glows while scrolling on IOS, and stops glowing when the page is still

        Sorry for the mix up

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          Does the issue also happen here?

        • Mitch
          Mitch commented
          Editing a comment
          No.....

        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          I checked your site and found this issue to be odd on iOS. If iOS decides to stop the animation, I would expect it to stop while scrolling and starts when still. But in your case, it's the other way around. I'll check more later.

        #49
        Mitch, I have updated the CSS code in the first post and it should work in vB 5.6.6. You may need some adjustments to the top and left CSS properties to center the glow icon with the green dot icon. Please see inline comments in the CSS code for your reference. Remove the existing CSS code you have and back it up and then replace it with the new code.

        Hopefully this fixes the iOS issue. This code is similar to what I have here which you said has no iOS issue.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


        • Mitch
          Mitch commented
          Editing a comment
          CSS installed and adjusted. Old code was removed. It is still doing the same thing. It never did it on the profile just postbit. On your site it is fine. Could it be a cloud issue?

        #50

        Comment


          #51
          I don't think it's a vBCloud only issue unless you found another vBCloud site with the same issue.

          To rule out the ads, could you temporarily turn off all the ads on the page if possible? The ads might be interfering with the glow animation by any slim chance.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


          • Mitch
            Mitch commented
            Editing a comment
            I tried the ads, nothing. Sometimes it will start going on its own, then will stop. Lets not lose any sleep over it, I can live with it this way. Thanks for looking into the issue and all the other help on fixing those mods.

          #52
          With the 5.6.7 update, the glowing online indicator is not placed over the online dot when viewing the VB namecard.

          Comment


            #53
            Checking...
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #54
              Mitch, add this CSS code in css_additional.

              Code:
              /* Adjust Online Glow Icon Position in Name Card - START */
              .b-namecard--avatar-online-status {
                  position: relative;
              }
              
              .b-namecard--avatar-online-status .b-icon__status--green:after {
                  top: -22px;
                  left: -24px;
              }
              /* Adjust Online Glow Icon Position in Name Card - END */
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


              • Mitch
                Mitch commented
                Editing a comment
                That worked!!! Thanks for the quick service

              #55
              Mitch, I noticed on your forum when I investigated the online glow location issue that in the name card for Admins, the user title "Administrator" is center aligned. This is because you have text-align:center CSS style on your Username HTML Markup for Administrator usergroup. It's not good to center align the user title because centering may not be applicable in some places and the Name Card is one of them. I recommend to remove the center alignment in the Username HTML Markup setting and then just center it in applicable places using css_additional. Actually, I don't think there's any place where you need to force the username to be centered. In postbit, for example, you don't need to center the username because it is already centered by default. I recommend to just use <span style="color: #800000;"> and </span> as the Username HTML Markup tags. The <p> tag is also not necessary.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


              • Mitch
                Mitch commented
                Editing a comment
                Thank you,,,,

            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 "|||"