add “flair” next to certain wordpress usernames

3 Views

Like the title says I want to add “flair” next to certain (not all) users in my wordpress site. Very similar to how reddit does it but to be used more for how YouTube has added “verified” users (essentially what I’ll be using it for).

YouTube & Reddit examples – http://imgur.com/a/tPHjh

Read More

I have the css for hovering so it changes color but I don’t know how to make it stay to the right of the text/username.

CSS 

#verified {left: 10px; width: 9px;}
#verified {background: url(verifieds.png) 0 0;}
#verified:hover {background: url(verifieds.png) 0 -9px;}

HTML 

<p id="verified">test</p>

This is giving me this as a result: http://jirachi.net/hover/hover.html but the hovering to change works somewhat. Thanks for the help!

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. You may try this, see demo.

    #verified {
    padding: 0 5px 0 0;
    width:35px;
    height:18px;
    background: url(http://jirachi.net/hover/verifieds.png) no-repeat right center;
    cursor:pointer;
}

#verified:hover {
    background: url(http://jirachi.net/hover/verifieds.png) repeat-y right -9px;
}

  2. so after the user hovers over verified you want the background to stay 0 -9px? if that’s the case just add 

    #verified:active,

    before #verified:hover