• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Username Styling

Cambion

Well-known member
#1
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?
 

oman

Well-known member
#3
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?
XenForo has put some examples in their manual: https://xenforo.com/help/user-group-styling/
 

Sheldon

Well-known member
#6
I didn't know how to do the little icon thingie by a name.
For a "per name" basis, install:
https://xenforo.com/community/resources/add-user-id-class-to-user-links.2190/

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: http://fortawesome.github.io/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.
 

Sheldon

Well-known member
#7
To do an actual IMAGE as the icon, it is a bit different....

Due to the various locations your name is displayed, you have to adjust the image accordingly.

Taken on the default theme, here is an extra.css example with an image that is 10x13

Code:
.username.user-1 {
    background: url("/images/orange.png") no-repeat scroll 0 -1px rgba(0, 0, 0, 0);
    padding-left: 11px;
}
.xenOverlay.memberCard .username.user-1, .memberListItem .username.user-1 {
    background-position: 0 4px;
}
.diffVersions .username.user-1, .lastPostInfo .username.user-1, .visitorPanel .username.user-1 {
    background-position: 0 1px;
}
#AlertsMenu .username.user-1, .event .username.user-1, .messageUserBlock .username.user-1   {
    background-position: 0 0 ;
    }
#AccountMenu .username.user-1 {
    background-position: 0 5px;
}
.profilePage .username.user-1 {
    background: url("/images/orange.png") no-repeat scroll 1px 0 rgba(0, 0, 0, 0);
    padding-left: 11px;
}
 

Sheldon

Well-known member
#8
Blinking name, alternating colors:

blinkname.gif

Code:
@keyframes blink {
to { color: red; }
}
@-webkit-keyframes blink {
to {color: red; }
}

.username.user-1 {
color: black;
animation: blink 1s steps(2, start) infinite;
-webkit-animation: blink 1s steps(2, start) infinite;
-moz-animation: blink 1s steps(2, start) infinite;
-o-animation: blink 1s steps(2, start) infinite;
}
 

Sheldon

Well-known member
#9
Multiple Color Change, infinite

multiplecolors.gif

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;}
}
 

John L.

Well-known member
#10
It's all dependent on your level of CSS knowledge as @Sheldon has showcased. You can do what you want, but keep in mind the user experience before you go crazy. If you have too much moving on 1 page you might end up scaring or blinding your users.
 

Sheldon

Well-known member
#11
Background color change, infinite

backgroundblink.gif

Code:
.username.user-1 {
    color: black;
    -webkit-animation: blink 3s infinite;
    animation: blink 3s infinite;
}

@-webkit-keyframes blink {
    from {background: red;}
    to {background: yellow;}
}

@keyframes blink {
    from {background: red;}
    to {background: yellow;}
}
 

Brad P

Active member
#14
Blinking name, alternating colors:

View attachment 86018

Code:
@keyframes blink {
to { color: red; }
}
@-webkit-keyframes blink {
to {color: red; }
}

.username.user-1 {
color: black;
animation: blink 1s steps(2, start) infinite;
-webkit-animation: blink 1s steps(2, start) infinite;
-moz-animation: blink 1s steps(2, start) infinite;
-o-animation: blink 1s steps(2, start) infinite;
}
how/where do i apply this for it to work?
 

Brad P

Active member
#16
The EXTRA.css template.
i thought that but when i applied this
Code:
@keyframes blink {
to { color: red; }
}
@-webkit-keyframes blink {
to {color: red; }
}

.username.user-1 {
color: black;
animation: blink 1s steps(2, start) infinite;
-webkit-animation: blink 1s steps(2, start) infinite;
-moz-animation: blink 1s steps(2, start) infinite;
-o-animation: blink 1s steps(2, start) infinite;
}
in my EXTRA.css nothing happens :/