Announcement

Collapse
No announcement yet.

Online Status Glow to New Forum Topic and Sub-Topic Icon.

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

    Online Status Glow to New Forum Topic and Sub-Topic Icon.

    This takes the online effect and adds it to new topic and sub topic posts.
    Edit the #color codes if you want to change the color.


    Code:
    /*---------------Online Effect on New Topic and Sub Topic Icons---------------*/
    
    /*---Topic---*/
    .forum-list-container .forum-item.new .cell-forum .icon {
        position: relative;
    }
    
    .forum-list-container .forum-item.new .cell-forum .icon:after {
        content: '';
        border: 10px solid #F01F4B; /*color*/
        background: transparent;
        border-radius: 40px;
        height: 40px;
        width: 40px;
        position: absolute;
        top: -24px;
        left: -23px;
        z-index: 1;
        opacity: 0;
        -webkit-animation: glow 3s ease-out infinite;
        animation: glow 3s ease-out infinite;
    }
    
    /*---Sub-Topic---*/
    .forum-list-container .subforum-list .subforum-item .icon.new{
        position: relative;
    }
    
    .forum-list-container .subforum-list .subforum-item .icon.new:after {
        content: '';
        border: 10px solid #F01F4B; /*color*/
        background: transparent;
        border-radius: 40px;
        height: 40px;
        width: 40px;
        position: absolute;
        top: -24px;
        left: -23px;
        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.0;
        }
    
        25% {
            -webkit-transform: scale(0);
            opacity: 0.5;
        }
    
        50% {
            -webkit-transform: scale(0.1);
            opacity: 1.0;
        }
    }
    /*---------------END Online Effect on New Topic and Sub Topic Icons---------------*/
    Last edited by MokeyII; 10-01-2016, 12:20 PM.

    #2
    Yes its working.
    Last edited by maxy1; 10-23-2016, 08:06 PM.

    Comment


      #3
      Hi guys, this code for this mod in which template should i add it? in css additional?

      Comment


        #4
        Yes. Any custom css should go in css_additional template.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          Originally posted by glennrocksvb View Post
          Yes. Any custom css should go in css_additional template.
          Ok, thank you Glenn

          Comment


            #6
            Will this work on the cloud versions?

            Comment


              #7
              For vBCloud, any custom CSS is added via Sitebuilder > Style > CSS Editor.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

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