Forum Icons with a CSS Spritesheet Image

Aoki · 10-05-2016, 02:17 AM

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.

[Image: BIrhT.png]

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

[Image: s5WfB.png]

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.

[Image: 2Qtkw.png]

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

[Image: ihxET.png]

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:

Code:
.ficons {
   background-image: url(spritesheet.png);
   background-repeat: no-repeat;
   display: block;
 }
 
 .ficons-1 {
   width: 24px;
   height: 24px;
   background-position: -1px -1px;
 }
 
 .ficons-2 {
   width: 24px;
   height: 24px;
   background-position: -27px -1px;
 }
 
 .ficons-3 {
   width: 24px;
   height: 24px;
   background-position: -1px -27px;
 }

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

Code:
background-image: url(spritesheet.png);

to:

Code:
background-image: url(images/spritesheet.png);

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.

[Image: YBSlb.png]

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:

Code:
<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>

And replace it with:

Code:
<i class="ficons ficons-{$forum['fid']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></i>

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

Forum Icons with a CSS Spritesheet Image

Submitted by Aoki, 10-05-2016, 02:17 AM, Thread ID: 21021