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

Username Customization

Discussion in 'Styling and Customization Questions' started by Wing, Apr 10, 2013.

  1. Wing

    Wing Active Member

    Hello all,

    Where would I go for css style codes, or what mod would I need to download to get usernames stylization like this forum has: http://silvatales.com/


    I did a quick search across the board, but have not been able to find any setup info on this. Guessing there is a mod somewhere for this functionality?
     
  2. Tracy Perry

    Tracy Perry Well-Known Member

    You mean to give the different usergroups different colors for the usernames and also a little emblem beside certain groups names?
    If so, go into each group you want to customize, go into the "User Name CSS" field and place something like this

    font-weight: bold; makes text bold
    color:#FF0000; defines the color
    font-size: 8; defines the font size
    background: transparent url('images/8ball.png') no-repeat; places an image (in this ccase an 8 ball) beside the user name
    padding-left: 14px; adjusts the padding

    Do not use the text highlighted in red in the area.
     
    Wing likes this.
  3. Brogan

    Brogan XenForo Moderator Staff Member

    Wing likes this.
  4. Wing

    Wing Active Member

    Great, I am specifically looking for the glow effect as shown on the forum I listed in the OP.
    Any ideas on the css glow code?
     
  5. Tracy Perry

    Tracy Perry Well-Known Member

  6. Wing

    Wing Active Member

  7. Tracy Perry

    Tracy Perry Well-Known Member

    Play with this in your extra.css (it has a green color to it in this example). It will apply to all users.

    Code:
    .messageUserBlock a.username {
    text-shadow: 3px 3px 4px rgb(14, 145, 14) !important;
    }
    
    will give you something like the first image below.

    Using this
    Code:
    .messageUserBlock a.username {
    text-shadow: 3px 3px 4px black !important;
    }
    
    will result in the second image.


    1.png 2.png

    If you want to do it in the members list, you would use
    Code:
    .memberListItem h3.username {
    text-shadow: 3px 3px 4px #5C5B5B !important;
    }
     
  8. Shelley

    Shelley Well-Known Member

Share This Page