XF 1.4 Username Styling

Cambion

Well-known member
I am not sure where to ask/how to ask it...

I am curious to see some possible examples of username Styling? The default way(even with different colors) just seems so boring and vanilla.

I'd love to be able to customize the username better for my site.

Example: I discovered how to make usernames Sparkle which was fairly cool but I grew bored with and then I discovered the Rainbow username which I liked but apparently isn't compatible with all browsers.

Are there any other cool ways to style usernames?

What I'd love to be able to do is

Flashing USername(not sparkle)

Coming from IPB, I love the fact that the username actually flashed different colors. It would cycle through various colors like a rainbow(the XF way of doing rainbow keeps the name static, but the letters are various coolers which isn't quite what I want). I want something that cycles the entire name through various colors.

But yeah any examples of cool tricks to do with usernames?
 
@Sheldon
Request for help. I would like postbit shortened like this shown below. How to do it??
Appreciate your help

2ic05sp.png
 
For a "per name" basis, install:
Add user id class to user links

To use FontAwesome (which I prefer, as it will resize based on the size of the name)
Go to Extra.CSS

.username.user-8303:before {
color: #CC0000;
content: "\f1f8";
font-family: FontAwesome;
padding-right: 2px;
}

The # is the user obviously.

Color is whatever you'd like, content is any icon from here: Font Awesome Icons Click on the one you'd like to see, it will give you the unicode for it.

Also, you must have FA either added to your site locally or through other means for it to display.

Thank you so much for this addon! This was the complete work around we needed! :)
 
Multiple Color Change, infinite

View attachment 86021

Code:
.username.user-1 {
animation: blink 5s infinite;
-moz-animation: blink 5s infinite;
-webkit-animation: blink 5s infinite;
-ms-animation: blink 5s infinite;
-o-animation: blink 5s infinite;
}
@keyframes blink
{
0% {color: red;}
25% {color: yellow;}
50% {color: blue;}
100% {color: green;}
}
@-moz-keyframes blink
{
0% {color: red;}
25% {color: yellow;}
50% {color: blue;}
100% {color: green;}
}
@-webkit-keyframes blink
{
0% {color: red;}
25% {color: yellow;}
50% {color: blue;}
100% {color: green;}
}
@-ms-keyframes blink
{
0% {color: red;}
25% {color: yellow;}
50% {color: blue;}
100% {color: green;}
}
@-o-keyframes blink
{
0% {color: red;}
25% {color: yellow;}
50% {color: blue;}
100% {color: green;}
}
Doesn't seem to work.
 
Top Bottom