XF 1.1 Smilies as CSS Sprites

With XenForo 1.1, it's now possible to (optionally) define individual smilies from a sprite image. This video shows you just how easy it is to use the system.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[DroidHost]

hi ,
if the Dimension = 18x18 then why not make the movement of the position move with a 18px step in one time ?
then it will be much easier :!

 

[Paul B]

Not everyone's smilies will be 18x18.

 

[DroidHost]

what if there is a chick box that will lock the steps
I meant it to be linked to the Dimension value

 

[Shelley]

what if there is a chick box that will lock the steps
I meant it to be linked to the Dimension value

That's actually a good idea. Though you may want to create a new thread in the suggestions area as this will be buried. Then you have to think of the other factor people use different sized smilies within that spritesheet. Odd as that may sound it does happen, when people deal with smilies consistency is thrown out of the window. Basically your suggestion hinges on that the spritesheet will consist of smilies all at the same dimensions.

 

[DroidHost]

yes and no ! it could be helpful in both ways ! it is not a mandatory thing if you need it just click the box !

 

[vkams]

I have about 90 animated smilies (*.gif). How can I
1) convert them into sprite?
2) get smilie block like table with normal height. Now it is too long:

 

[Paul B]

You can't use sprites for animated images.

You can increase the width by adding this to EXTRA.css:

/* Increase width of smiley dropdown menu */
.xenForoSkin .mceSmiliesMenu div {
width: 398px !important;
}

Change the width to suit.

 

[vkams]

Thank you very much, Brogan! I failed passing the quest "Improve editor without manual". I hope new forum release will bring us more transparent and admin-frienly way to set it up. For example, another problem is to add new BB-code buttons.

 

[Anthony Parsons]

So does anyone have the default smilies that ship with XF on a singular sprite for use as yet?

Being there are two, the default 12, then another folder using a default 30 smilies. Will those ship at some point for use, or do we all have to just make them ourselves?

 

[Paul B]

The 35 smilies are already on a single sprite: http://xenforo.com/community/styles/default/xenforo/xenforo-smilies-sprite.png

 

[Anthony Parsons]

Once again... awesome mate.

 

[Paul B]

It should already be available in your own styles folder, assuming you uploaded it.

There's an SQL script here to define them all: http://xenforo.com/community/threads/smiley-sprite-settings.21004/

 

[KidCactus]

If I use smilies as CSS sprites, will the whole main sprite image be shown in the smiley dropdown menu?

 

[Paul B]

No, only the portion of the sprite defined for each smiley.

 

[KidCactus]

Bummer. Is there some easy way to change the layout? My smileys are not all exactly the same size and shape.

 

[Shelley]

Bummer. Is there some easy way to change the layout? My smileys are not all exactly the same size and shape.

You don't have to use the smiley spritesheet you can simply use individual smiley images as normal. The spritesheet option is an extra for those that do wish to use the spritesheet.

 

[Paul B]

I'm not sure I understand your question.

Just define the smilies in the ACP, they will be displayed correctly in the editor toolbar and posts.

The result is exactly the same, whether using a sprite or individual images.

 

[KidCactus]

I'm not sure I understand your question.

I would like to have the smileys lined up, and not like I have it now, where their X position depends on how wide they are.

 

[Paul B]

The layout used to be in a table, it has since changed to a grid using divs due to some complaints when using very wide smilies.

 

[KidCactus]

Ok, too bad. I realize a table wouldn't help me much anyway, since I would still have to position each smiley one by one to get them lined up ok. That's why I was hoping a sprite image would do the trick.

Just changing the width of the container helped a bit though, two rows of smiles looks better for me.