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

Discussion in 'Styling and Customization Questions' started by Cambion, Oct 8, 2014.

  1. Cambion

    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?
     
  2. Lisa

    Lisa Well-Known Member

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

    oman Well-Known Member

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

    Cambion Well-Known Member

    Thanks for your quality and helpful response, dear ;)

    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.
     
  5. Lisa

    Lisa Well-Known Member

    Anytime, Micah :D You might have got the year wrong, it's possible :p
     
  6. Sheldon

    Sheldon Well-Known Member

    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.
     
    Cambion, DEZero and Chris D like this.
  7. Sheldon

    Sheldon Well-Known Member

    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;
    } 
     
    Cambion and Chris D like this.
  8. Sheldon

    Sheldon Well-Known Member

    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;
    }
     
    Cambion and Chris D like this.
  9. Sheldon

    Sheldon Well-Known Member

    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;}
    }
    
     
    blumchen, Chris D and Cambion like this.
  10. John L.

    John L. Well-Known Member

    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.
     
    Cambion likes this.
  11. Sheldon

    Sheldon Well-Known Member

    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;}
    } 
     
    Digital Doctor and Cambion like this.
  12. jamalfree

    jamalfree Active Member

    nice topic.......
     
  13. Cambion

    Cambion Well-Known Member

    Thanks for the replies and tips, I am going to try this out tonight :)
     
  14. Brad P

    Brad P Active Member

    how/where do i apply this for it to work?
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    The EXTRA.css template.
     
  16. Brad P

    Brad P Active Member

    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 :/
     
  17. Amaury

    Amaury Well-Known Member

    Try adding important declarations.
     
  18. Brogan

    Brogan XenForo Moderator Staff Member

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

    Amaury Well-Known Member

    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. :oops:
     
  20. Brad P

    Brad P Active Member

    where would you recommend me putting the important?
     

Share This Page