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

XF 1.4 How to scale css sprites (e.g. Smilies)

Discussion in 'Styling and Customization Questions' started by Myke623, Nov 16, 2014.

  1. Myke623

    Myke623 Active Member

    I have a need for scaling (down) some smilies for alternate display purposes. Is there a tidy way to accomplish this?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  3. Myke623

    Myke623 Active Member

    Cheers Jake.

    My preference would be to not create separate images or a sprite sheet for this purpose so I'll have a play around with the ideas suggested in the link.
     
    Last edited: Nov 16, 2014
  4. Myke623

    Myke623 Active Member

    In case anyone has a need for this, following on from the suggestion of using zoom and transform-scale properties, I contain my smileys that I wish to scale down within a div and style it as so:

    Code:
    .smilieSmaller
    {
        display: inline-block;
        zoom: 0.80;
        -moz-transform:scale(0.80);
        -moz-transform-origin: 0 0;
        -o-transform:scale(0.80);
        -o-transform-origin: 0 0;
    }
    The end result, as shown in Chrome, you can see the smaller (80%) version appearing in the tab, and the normal size below:
    smilie-small-chrome.PNG
     

Share This Page