Thread:ThePokegeek5000/@comment-31427784-20180604004717/@comment-31984232-20180606171617

I also have Avatar Hover Spins :)

Ima just Give you the Code. The only difference between Trilogy7 and me is the colors, font, and avatar spin. I didn't delete Trilogy so you could see different options for the avatar spins:

With Variables (in the :root{} thing, called in var(varName) ): /***********************************************************************/ /***********************************************************************/ /************************** Table of Contents **************************/ /***********************************************************************/ /***********************************************************************/ /*   Section 1 - Table of Contents Section 2 - Top Configuration Section 2.1 - Imports Section 2.1.1 - Fonts Section 2.2 - Variables Section 2.2.1 - ThePokegeek5000 Section 2.2.2 - Trilogy7 Section 3 - CSS Styling Section 3.1 - Staff Styling Section 3.1.1 - ThePokegeek5000 Section 3.1.2 - Trilogy7 Section 4 - Bottom Configuration Section 4.1 - Avatar Spins

/***********************************************************************/ /***********************************************************************/ /************************** Top Configuration **************************/ /***********************************************************************/ /***********************************************************************/

/***********************************************************************/ /******************************* Imports *******************************/ /***********************************************************************/

/* Fonts */ @import url('https://fonts.googleapis.com/css?family=Righteous|Signika');/**/

/***********************************************************************/ /****************************** Variables ******************************/ /***********************************************************************/

/* ThePokegeek5000 */
 * root {

--ThePokegeek5000_Background: -webkit-linear-gradient(330deg, #FF0000, #990000, #990099, #000099, #0000FF); --ThePokegeek5000_Font_Family: "Righteous", Helvetica, sans-serif; --ThePokegeek5000_Font_Variant_1: normal; --ThePokegeek5000_Font_Variant_2: small-caps; --ThePokegeek5000_Font_Size_1: 110%; --ThePokegeek5000_Font_Size_2: 12px; --ThePokegeek5000_Title: "[Code] Admin"; }/**/

/* Trilogy7 */
 * root {

--Trilogy7_Background: -webkit-linear-gradient(330deg, #11AAFF, #24E6E1,  #68F68B); --Trilogy7_Font_Family: "Signika", sans-serif; --Trilogy7_Font_Variant_1: normal; --Trilogy7_Font_Variant_2: small-caps; --Trilogy7_Font_Size_1: 110%; --Trilogy7_Font_Size_2: 12px; --Trilogy7_Title: "THE HOLY MOD"; }/**/

/***********************************************************************/ /***********************************************************************/ /***************************** CSS Styling *****************************/ /***********************************************************************/ /***********************************************************************/

/***********************************************************************/ /*************************** Username Styling **************************/ /***********************************************************************/

/* ThePokegeek5000 */

.wds-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a[href$=":ThePokegeek5000"], .Wall .edited-by a.subtle[href$="Wall:ThePokegeek5000"], font-family: var(--ThePokegeek5000_Font_Family); font-size: var(--ThePokegeek5000_Font_Size_1); font-variant: var(--ThePokegeek5000_Font_Variant_1); background: var(--ThePokegeek5000_Background); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub) > a[href$=":ThePokegeek5000"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub) > a[href$="/ThePokegeek5000"] {

.SpeechBubble .edited-by a[href$="User:ThePokegeek5000"]:after, .Wall .edited-by a.subtle[href$="Wall:ThePokegeek5000"]:after { content: " "var(--ThePokegeek5000_Title); font-family: var(--ThePokegeek5000Font1); font-size: var(--ThePokegeek5000_Font_Size_2); font-variant: var(--ThePokegeek5000_Font_Variant_2); }/**/

img[alt="ThePokegeek5000"].avatar:hover, li[data-user="ThePokegeek5000"] .avatar:hover { animation-name: sidespin; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; border-radius: 100%; }/**/

/* Trilogy7 */

.wds-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a[href$=":Trilogy7"], .Wall .edited-by a.subtle[href$="Wall:Trilogy7"], font-family: var(--Trilogy7_Font_Family); font-size: var(--Trilogy7_Font_Size_1); font-variant: var(--Trilogy7_Font_Variant_1); background: var(--Trilogy7_Background); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub) > a[href$=":Trilogy7"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub) > a[href$="/Trilogy7"] {

.SpeechBubble .edited-by a[href$="User:Trilogy7"]:after, .Wall .edited-by a.subtle[href$="Wall:Trilogy7"]:after { content: " "var(--Trilogy7_Title); font-family: var(--Trilogy7Font1); font-size: var(--Trilogy7_Font_Size_2); font-variant: var(--Trilogy7_Font_Variant_2); }/**/

img[alt="Trilogy7"].avatar:hover, li[data-user="Trilogy7"] .avatar:hover { animation-name: avspin; animation-direction: alternate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; border-radius: 100%; }/**/

/***********************************************************************/ /***********************************************************************/ /************************ Bottom Configuration *************************/ /***********************************************************************/ /***********************************************************************/

/***********************************************************************/ /**************************** Avatar Spins *****************************/ /***********************************************************************/

@keyframes avspin { from { transform: rotate(0deg); }   to { transform: rotate(720deg); } }

@keyframes sidespin { from { transform: rotateY(0deg); }   to { transform: rotateY(129600deg); } }/**/

With the Variables now in the Staff Styling Section integrated into where they were called (No Variables): /***********************************************************************/ /***********************************************************************/ /************************** Table of Contents **************************/ /***********************************************************************/ /***********************************************************************/ /*   Section 1 - Table of Contents Section 2 - Top Configuration Section 2.1 - Imports Section 2.1.1 - Fonts Section 3 - CSS Styling Section 3.1 - Staff Styling Section 3.1.1 - ThePokegeek5000 Section 3.1.2 - Trilogy7 Section 4 - Bottom Configuration Section 4.1 - Avatar Spins

/***********************************************************************/ /***********************************************************************/ /************************** Top Configuration **************************/ /***********************************************************************/ /***********************************************************************/

/***********************************************************************/ /******************************* Imports *******************************/ /***********************************************************************/

/* Fonts */ @import url('https://fonts.googleapis.com/css?family=Jura|Open+Sans|Righteous|Signika');/**/

/***********************************************************************/ /***********************************************************************/ /***************************** CSS Styling *****************************/ /***********************************************************************/ /***********************************************************************/

/***********************************************************************/ /*************************** Username Styling **************************/ /***********************************************************************/

/* ThePokegeek5000 */

.wds-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a[href$=":ThePokegeek5000"], .Wall .edited-by a.subtle[href$="Wall:ThePokegeek5000"], font-family: "Righteous", Helvetica, sans-serif; font-size: 110%; font-variant: normal; background: -webkit-linear-gradient(330deg, #FF0000, #990000, #990099, #000099, #0000FF); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub) > a[href$=":ThePokegeek5000"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub) > a[href$="/ThePokegeek5000"] {

.SpeechBubble .edited-by a[href$="User:ThePokegeek5000"]:after, .Wall .edited-by a.subtle[href$="Wall:ThePokegeek5000"]:after { content: " ""[Code] Admin"; font-family: "Righteous", Helvetica, sans-serif; font-size: 12px; font-variant: small-caps; }/**/

img[alt="ThePokegeek5000"].avatar:hover, li[data-user="ThePokegeek5000"] .avatar:hover { animation-name: sidespin; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; border-radius: 100%; }/**/

/* Trilogy7 */

.wds-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a[href$=":Trilogy7"], .Wall .edited-by a.subtle[href$="Wall:Trilogy7"], font-family: "Signika", sans-serif; font-size: 110%; font-variant: normal; background: -webkit-linear-gradient(330deg, #11AAFF, #24E6E1,  #68F68B);; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub) > a[href$=":Trilogy7"],
 * not(.wds-list) > *:not(.custom-wds-wrapper):not(#contentSub):not(#contentSubSub) > a[href$="/Trilogy7"] {

.SpeechBubble .edited-by a[href$="User:Trilogy7"]:after, .Wall .edited-by a.subtle[href$="Wall:Trilogy7"]:after { content: " ""THE HOLY MOD"; font-family: "Signika", sans-serif; font-size: 12px; font-variant: small-caps; }/**/

img[alt="Trilogy7"].avatar:hover, li[data-user="Trilogy7"] .avatar:hover { animation-name: avspin; animation-direction: alternate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; border-radius: 100%; }/**/

/***********************************************************************/ /***********************************************************************/ /************************ Bottom Configuration *************************/ /***********************************************************************/ /***********************************************************************/

/***********************************************************************/ /**************************** Avatar Spins *****************************/ /***********************************************************************/

@keyframes avspin { from { transform: rotate(0deg); }   to { transform: rotate(720deg); } }

@keyframes sidespin { from { transform: rotateY(0deg); }   to { transform: rotateY(129600deg); } }/**/ And Some Notes:
 * 1) The -webkit-linear-gradient has hex codes in order of left to right for the gradient. If the 330deg is changed, it won't be horizontal.
 * 2) Don't touch the @keyframe s; they create the avatar spins animations
 * 3) The @import is being used to import the fonts. If you need more fonts, contact me (the only ones being imported are Righteous (mine) and Signika (Trilogy's) )
 * 4) Avatar Spins can be (for avspin, the circular one) CW, CCW, or Alternating. Trilogy's is Alternating (Don't type CW or CCW, as that would break it), and sidespin is Left or Right (left is default, I can't remember the one for right).
 * 5) The Font-Variant is either "normal" or "small-caps". Both tell exactly what they do; Small Caps makes lowercase letters capital but still small, while normal doesn't.
 * 6) I think you can understand what the Content, Font-Size, and Font-Family do: The Content for the Title (The space is important to prevent bugs), Font Size (px, em, or %. px is Pixels, 1em is 12px (1.5em is 18px), and 110% is 110% of whatever the default is (usually 12px) ), and the Font you want (Primary Font, Fallback if Primary doesn't work, continue the chain; end in sans-serif)