Help With Sprites, Nodes, Smilies

[Israel]

Hi, I'm pretty new to Xenforo and to creating forums in general, so I'm starting on the ground floor here. I've never used sprites for anything at all and I'm trying to add custom node icons and smilies.

I have downloaded an Android smiley pack, but when I unzipped it they are all separate pics. Should these be added to the sprite sheet I see in my xenforo default directory, or added separately? How the heck do I make a sprite sheet? (I have a good grasp of Photoshop, but never have heard of sprites).

Also, the node icons...can I just open one of the node sprite sheets in Photoshop, cut out the old icons and paste mine in, or is there more that goes into creating the sprite?

Any help, tips, or links would be greatly appreciated, thanks.

 

[Shelley]

Hi, I'm pretty new to Xenforo and to creating forums in general, so I'm starting on the ground floor here. I've never used sprites for anything at all and I'm trying to add custom node icons and smilies.

I have downloaded an Android smiley pack, but when I unzipped it they are all separate pics. Should these be added to the sprite sheet I see in my xenforo default directory, or added separately? How the heck do I make a sprite sheet? (I have a good grasp of Photoshop, but never have heard of sprites).

Also, the node icons...can I just open one of the node sprite sheets in Photoshop, cut out the old icons and paste mine in, or is there more that goes into creating the sprite?

Any help, tips, or links would be greatly appreciated, thanks.

Adding the images (smilies in this case) isn't difficult. Just create a new file in a graphics editor and copy and paste the smilies onto the 1 sheet at your specified canvas size then insert the coordinates via the smiley manger in the admincp. If your still having difficulty in doing this I'll make an update to the post if it's the android smilies I released and add in a spritesheet version later today or tomorrow.

edit: you are able to add the smilies separately, If you choose. ensure you unchecked the spritesheet box within the smiley manager and add them accordingly.

 

[Israel]

Thanks for the reply, they are indeed the Android smileys you created! (looking forward to the add on as well).

I use Photoshop CS, creating a new sheet and pasting in the smileys is simple enough. But where do I get the coordinates?

Also, do you know anything about changing the node icons, does it work in the same manner?

Thanks again!

 

[Shelley]

Thanks for the reply, they are indeed the Android smileys you created! (looking forward to the add on as well).

I use Photoshop CS, creating a new sheet and pasting in the smileys is simple enough. But where do I get the coordinates?

Also, do you know anything about changing the node icons, does it work in the same manner?

Thanks again!

Yes you can actually go into the style properties and use individual imagery for nodes or use sprites they prity much work in the same way.

You can get the coordinates by using the sprite positioning utility which will show you a preview in the top right hand corner of the smiley manager. Since you mention the add-on android smilies I might add them in with the existing android smilies as one spritesheet. If I manage this tonight I'll add them on my test server and update the post with the coordinates.

 

[Israel]

Yes you can actually go into the style properties and use individual imagery for nodes or use sprites they prity much work in the same way.

You can get the coordinates by using the sprite positioning utility which will show you a preview in the top right hand corner of the smiley manager. Since you mention the add-on android smilies I might add them in with the existing android smilies as one spritesheet. If I manage this tonight I'll add them on my test server and update the post with the coordinates.

You rock, thanks! I'll wait on making a smiley sheet then and see if you have one done before then. I'll just work on the node icons right now. Testing a new node sprite as we speak...

My node icons (Drift style) have a circle on them that seems to fill with the background color and is not an image. Will I have to edit CSS or something to get rid of this circle?

 

[Israel]

This is the style I'm trying to change node icons on. Drift: http://www.audentio.com/preview/xenforo/drift

The only part in the sprite is the ">", not the red circle. And the red circle fills with the background color when there are new posts.

I can now get my custom icon to show, but can't figure out how to get rid of the red circle part....?

 

[Shelley]

You rock, thanks! I'll wait on making a smiley sheet then and see if you have one done before then. I'll just work on the node icons right now. Testing a new node sprite as we speak...

My node icons (Drift style) have a circle on them that seems to fill with the background color and is not an image. Will I have to edit CSS or something to get rid of this circle?

Not sure how the code in the custom style is done. You can check your style properties in the node icon area and remove the background color or paste the following into your extra css template if you want to remove the blue circle.The !imporatant may not be necessary but add it in if it doesn't remove the background colour (blue circle) or if you have no joy in the style properties.

.node .unread .nodeIcon_bg {
    background-color: none !important;
}

If you remove the blue background you find the icons not showing since they are light in nature and will show on a light background if you remove the background colour.
With regards to the android spritesheet for now I'll just add in th defaults not the add-ons i am working on since after checking them I want to add more before i release these. Once I'm happy there's a nice amount I'll also add the extended android smilies in with the default android smilies.
I'll start working on making the default android smiley pack now I should have an update soon.

 

[Shelley]

You rock, thanks! I'll wait on making a smiley sheet then and see if you have one done before then. I'll just work on the node icons right now. Testing a new node sprite as we speak...

My node icons (Drift style) have a circle on them that seems to fill with the background color and is not an image. Will I have to edit CSS or something to get rid of this circle?

Here's the spritesheet for the android smilies. If you use the positioning tool it shouldn't take you long to get them all in. Since my dev site has smilies already I don't want to disrupt those (sorry) so you'll have to use the positioning tool to get the coordinates which isn't difficult.

 

[Israel]

Sweet, thanks!

I tried adding that code to the extra.css but no luck. I made a post on Audentio's site, hopefully I'll get an answer over there. My main problem I think is that I know nothing about CSS!

 

[Dad.]

If you need any other assistance, feel free to create a ticket in your customer area