Persistent Color Changing CSS

Azus Dec 20, 2016

  1. Azus

    Azus New Member NS Member

    6
    0
    3
    The following script will make the user group display name continually change colors! :)

    Open the "EXTRA.css" template, if you are using a fresh installation of XenForo this will be empty but if you have had your XenForo installation for awhile you may already have some things here :p... Anyways, when you add the following script to your "EXTRA.css" make sure you don't have anything that has the same identifier as this or it will not work!

    Code:
    .flashing-admin {
       color: red;
       font-weight: 900;
       -webkit-animation-name: f-a;
       -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
       -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
       animation-name: f-a;
       animation-duration: 3s;
       animation-iteration-count: infinite;
    }
    
    /* Safari 4.0 - 8.0 */
    @webkit-keyframes f-a {
       0% {color: red;}
       10% {color: yellow;}
       20% {color: pink;}
       30% {color: orange;}
       40% {color: blue;}
       50% {color: green;}
    }
    
    @keyframes f-a {
       0% {color: red;}
       10% {color: yellow;}
       20% {color: pink;}
       30% {color: orange;}
       40% {color: blue;}
       50% {color: green;}
    }
    
    .sidebar .flashing-admin {
       margin-left: 43px;
       max-width: 80px;
    }
    

    After you save this script to your "EXTRA.css", navigate your way to the desired user group you wish to add this customization to & in the "User Title Override" section, make sure you have "Use The Following User Title" checked and then add the following to call upon our flashing name css :)

    Code:
    <span class="flashing-admin">Administration</span>
    

    and then go ahead and save all your changes & when you navigate back to your forum or to an administrators profile in my case!
     
    Loading...

Share This Page