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

Adding a little heart etc. to "like"

Discussion in 'Styling and Customization Questions' started by rotpar, Apr 29, 2013.

  1. rotpar

    rotpar Member

    Hi there,

    How could I add a little heart or thumbs up to the "Like" option in every post?
    I also would want to show this heart below where you can read "xxx likes that". Would be great if I could add it on the left side to where the like message is.

    :) Thank you
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Try adding a background image to .message .likesSummary in EXTRA.css.
     
    loginn and rotpar like this.
  3. MattW

    MattW Well-Known Member

    EXTRA.css

    Code:
    /* LIKE ENHANCEMENTS */
    .message .likesSummary {
      background: url("@imagePath/xenforo/gradients/liked-grad.png") repeat-x scroll center bottom #F6F6F6
    }
     
    .message .LikeText {
      background: url('http://cdn.z22se.com/xenforo/thumb_up.png') no-repeat 5px 50%;
      padding: 2px 2px 2px 25px;
    }
    /* END LIKE ENHANCEMENTS */
    Gives:
    like.PNG
     
    rotpar likes this.
  4. rotpar

    rotpar Member

    Awesome thx
     
    MattW likes this.
  5. rotpar

    rotpar Member

    Ok I got this, but how do I get it on the like link? :)
     
  6. Russ

    Russ Well-Known Member

    Could try something like...

    Code:
    .publicControls .LikeLink .LikeLabel {
        background: url("http://www.connectionone.org/wp/wp-content/uploads/facebook-like-icon.png") no-repeat scroll 0 -3px transparent;
        padding-left: 20px;
    }
    
    Haven't tested it fully ;p
     
    rotpar likes this.
  7. rotpar

    rotpar Member

    That's it, thank you
     

Share This Page