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

XF 1.5 Adding image/emoticon to profile likes

Discussion in 'Styling and Customization Questions' started by seabeds, Apr 9, 2016.

  1. seabeds

    seabeds Active Member

    [​IMG]

    How can i achieve this? (Having a heart on the same line)
     
  2. seabeds

    seabeds Active Member

    So far i have this:

    [​IMG]


    And in my likes_summary.css
    HTML:
    .likesSummary
    {
        overflow: hidden; zoom: 1;
        font-size: 11px;
    }
    
        .likesSummary:before
        {
            background: transparent url('styles/uix_dark/xenforo-ui-sprite.png') no-repeat -155px -58px;
    margin-top: -7px;
    content: '';
    display: block;
    position: absolute;
    left: 10;
    top: 20%;
    width: 15px;
    height: 14px;
    
        }
    
            @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 1.5dppx)
            {
                .likesSummary:before
                {
                    background-image: url('styles/uix_dark/xenforo-ui-sprite-big.png');
                    background-size: 200px 80px;
                }
            }
    
        .LikeText
        {
            float: left;
        }
      
        .likeInfo
        {
            float: right;
        }
      
    
     
  3. rafass

    rafass Well-Known Member

    Try with:
    Code:
    span.LikeLabel:before {
        content: "❤";
        color: #b23026;
        margin-right: 3px;
    }
    
    in EXTRA.css
    slide.gif
     
    viper357 and maszd like this.
  4. seabeds

    seabeds Active Member

    That's pretty neat, i think i'll keep that although that's not exactly what i'm aiming for. How would i remove the thumb that is there for like and unlike? It might be a UI.X thing.
     
  5. rafass

    rafass Well-Known Member

    I don't use that kind of themes. not sure if there are some option to do that. you can ask in the respective thread of that theme.
    Anyway, with just few lines of CSS you can put whatever you want there. FA icons too.
    Screen Shot 2016-04-09 at 10.28.09 AM.png
    and achieve something like:
    slide.gif
     
    maszd likes this.

Share This Page