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

XF 1.1 CSS Sprites

Discussion in 'Have You Seen...?' started by Kier, Sep 9, 2011.

  1. Brogan

    Brogan XenForo Moderator Staff Member

    If the larger image overlaps another one, then you will need to move them on the sheet.

    You will also need to change the associated CSS: width, height, background-position.

    Each image is independent though, in the sense that increasing the size of one doesn't mean you need to increase the sizes of the others.
  2. Floris

    Floris Guest

    Personally, I couldn't care less that users don't understand CSS3 and Sprites. I am all for it. 100%

    Having said that, I am nothing but confident that those user who can't figure out how to use the Style Properties (so they don't have to screw around with CSS) will never change images again because a Sprite imaged and the CSS to accompany it will push them away from even trying.

    "What do you do?", she asks. "Stuff with computers", I respond. "Sounds complicated". And I sighed.
    Abracadaniel and a legacy reborn like this.
  3. CyclingTribe

    CyclingTribe Well-Known Member

    So would it be wise to leave a reasonably large amount of white space around each image if you envisage increasing the size of any of them at some near-future point?

    Shaun :D
  4. Brogan

    Brogan XenForo Moderator Staff Member

    If you plan on increasing the sizes then yes.

    Otherwise you can just increase the size of the sprite sheet and move them to a new position, ensuring you update the CSS at the same time.

    Although once you've set your sprite sheet up, it can be quite a bit of work to change it so ideally you only want to do it once.
  5. CyclingTribe

    CyclingTribe Well-Known Member

    That's what I was thinking, there's potentially a fiddly element to it if you want to change the sprites around later on. If it's just a case of adding some space around them and tweaking the CSS after the change, then that's a simple enough thing to do.

    Like the idea and I know how to accommodate for size increases now, so thanks ... and ... carry on! :)

    Shaun :D
  6. Pope Viper

    Pope Viper Well-Known Member

    OK,. question, if you have all the images on a single sprite, how to you define or "break up" that sprite to use that appropriate portion?
  7. dutchbb

    dutchbb Well-Known Member

    CSS magic.

    I think this is a good read for you: http://css-tricks.com/158-css-sprites/ :)
  8. Brogan

    Brogan XenForo Moderator Staff Member

    As already mentioned, you need to use width, height and background-position to select each image from the sprite sheet.
    Shelley likes this.
  9. Pope Viper

    Pope Viper Well-Known Member

    OK, that's how I thought it worked, thanks guys.
  10. ibnesayeed

    ibnesayeed Well-Known Member

    I would suggest you another way. Suppose you have an sprite with 9 icons 3rows or 3 icons (3*3). And later you decided to alter the dimensions of the middle one. Then you can keep that intact, just append modified icon to the right or bottom of the existing sprite. And in the CSS file, change the references for the new icon. This way, you will save yourself from updating all icon references. And the middle one will remain unused, that will not harm you. :)
  11. dutchbb

    dutchbb Well-Known Member

    And then maybe save some bytes by erasing that middle one, so that it's just transparent.
    ibnesayeed likes this.
  12. Martyn

    Martyn Active Member

    does seem like that!
  13. CyclingTribe

    CyclingTribe Well-Known Member

    From reading a tutorial, you can't use sprites for repeating background images then?

    This would maily be for icon style graphics?

    Shaun :D
  14. Peggy

    Peggy Well-Known Member

    I have never, ever used a sprites. But certainly willing to learn.

    You 'n' me both.
  15. Shelley

    Shelley Well-Known Member

    It's really easy and I'm sure you will get to grips with it within a couple of minutes. If you creating custom imagery to your style and lets say your creating custom sizes forum-unread.png 40px square you simply define a width & height property and re-position the background-position line .

    .node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon {
        background-image: url("styles/default/xenforo/node-sprite.png");
        background-position: 0 0; <<< adjust this line to re-position.
        background-repeat: no-repeat;
      width: 40px; << Add this in.
      height: 40px; << Add this in.
    So let's say for example your forum-read-png is 60px square instead of the 36px squared default which you wouldn't have to input a value but your new size would go something like this:
    .node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("styles/default/xenforo/node-sprite.png");
        background-position: -36px 0; << Adjust accordingly
        background-repeat: no-repeat;
        width: 60px; << Add this in.
        height: 60px;<< Add this in.
    You would need to set the canvas dimensions higher obviously as the default spritesheet size is 144 x36px but you simply define the sizes (height & width and re-position accordingly.

    Ps. I've been drinking heavily tonight and it's late so I've probably made a mistake in explaining this so feel free to correct this BS jargon I just wrote out. :LOL:

    Try experimenting in firebug on this forum so you get a feel on re-positioning the imagery and give xenforo link.pngs instead of unread-read.pngs.

    Edit: Oops paul already explained. :)
    Saeed, Rob Fritz, Alien and 1 other person like this.
  16. EQnoble

    EQnoble Well-Known Member

    Shelley likes this.
  17. I'm surprised this wasn't done as standard. It makes more sense to use sprites rather than have a http request for every icon.
    CNK likes this.
  18. DeltaHF

    DeltaHF Well-Known Member

    You certainly can, though they must repeat on only one axis (vertically or horizontally). You could also expand the default XF composite image by stacking horizontally-repeated textures or gradients below all the icons. The icon's coordinates wouldn't change and wouldn't require any modifications to the theme's CSS.
  19. CyclingTribe

    CyclingTribe Well-Known Member

    Sounds like something I need to experiment with to get the hang of it.

    Added to the to-do list :)
  20. Jeremy

    Jeremy Well-Known Member

    Kier, one thing that I think may be cool would be to add a style property to define common sprite size. Say @defaultSpriteWidth that is auto added. And then have each on get a style property (forum node) where if you expand yours to say 40px x 40px you could modify @spriteNodeNew to be 40px and CSS isn't touched. ;)
    ragtek likes this.

Share This Page