Forum Icons with a CSS Spritesheet Image

This was requested by devil.
I'm showing you how to make your forum icons using a spritesheet image.

---

1. Why would you use this?

Quote:An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.

---

2. Generate your spritesheet

Simply go to this site: https://draeton.github.io/stitches/

The first thing you want to do is adding your icons.



After you've added your icons, they should appear in this spritesheet demo:



On the right side we have settings. Just copy my settings and you're fine. It's important to name the prefix "ficons", otherwise you need a different CSS code.



After you've done this, click on the top download button and save your spritesheet image.



Upload this image via FTP to your image directory of your MyBB installation. (yourdomain.com/images/spritesheet.png)

Do not close this page yet. We will need it again!

---

3. Add CSS

On the same download page, click on the CSS tab and copy everything to your global.css file. (AdminCP > Templates & Style > Themes > Your Theme > global.css)

This should look similar to this:


Now we want to set the proper image path. Edit:


to:


Here comes the tricky part. All your icons are using different CSS classes now. Example: ficons-1, ficons-2 and ficons-3.
The numbers are actually the Forum ID's of your forums. You need to give each icon the proper class with the proper Forum ID, otherwise they won't be displayed correctly.

How to find out the Forum ID of a forum:

Navigate to AdminCP > Forums & Posts and click on any forum. You'll now see the Forum ID in the URL of your page.

---

4. Editing Templates

Remember to make a backup of everything in case you're doing something wrong.

Navigate to AdminCP > Templates & Style > Templates > Your Theme Templates > Forum Bit Templates > forumbit_depth2_forum
Look for this line:


And replace it with:

---

That's basically it. If you have any questions, feel free to ask.

Looks like your image host has died, might be worth re-uploading.

12-05-2016, 11:02 PM

Kawaii Wrote: Looks like your image host has died, might be worth re-uploading.

Nope, works fine.

12-05-2016, 11:02 PM

Kawaii Wrote: Looks like your image host has died, might be worth re-uploading.

Triple check to make sure that the network you're on isn't blocking it, it works fine for me.

12-05-2016, 11:10 PM

Aoki Wrote: Nope, works fine.

Yup, my mistake, Malwarebytes firewalled the site.

Any tutorial for making stylsheet for awards as shown here?

This is awesome, was wondering how to do this, since I guess this is what you have to do when editing post icons

13-05-2016, 03:24 PM

Medishared Wrote: Any tutorial for making stylsheet for awards as shown here?

It's not as simple as this unless you make a new page seperate from the one which is used by the plugin.

I did not know how to do it lol I liked the tutorial very well explained

A nice way to do it without a plugin. Thanks for this