XF 1.4 Username Styling

[Cambion]

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?

 

[Lisa]

You know it's 2014 and not 1999? Sparkle? Flashing? *shudders*

 

[oman]

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/

 

[Cambion]

You know it's 2014 and not 1999? Sparkle? Flashing? *shudders*

Thanks for your quality and helpful response, dear

XenForo has put some examples in their manual: https://xenforo.com/help/user-group-styling/

Aw thanks for that I didn't know how to do the little icon thingie by a name.

I'd love to see more examples of possible creative styling.

 

[Lisa]

Thanks for your quality and helpful response, dear

Anytime, Micah You might have got the year wrong, it's possible

 

[Sheldon]

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]

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

.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]

Blinking name, alternating colors:

@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]

Multiple Color Change, infinite

.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.]

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]

Background color change, infinite

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

 

[jamalfree]

nice topic.......

 

[Cambion]

Thanks for the replies and tips, I am going to try this out tonight

 

[Brad P]

Blinking name, alternating colors:

View attachment 86018

@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?

 

[Paul B]

The EXTRA.css template.

 

[Brad P]

The EXTRA.css template.

i thought that but when i applied this

@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 :/

 

[Amaury]

i thought that but when i applied this in my EXTRA.css nothing happens :/

Try adding important declarations.

 

[Paul B]

Check for malformed code in the template, e.g. a missing closing bracket } .

 

[Amaury]

Check for malformed code in the template, e.g. a missing closing bracket } .

This too! I've had this happen to me every now and then, and then I went back into the template and found that I forgot a closing curly bracket.

 

[Brad P]

Try adding important declarations.

where would you recommend me putting the important?