PrivateAlps.net - Offshore Cloud Services | VPS/RDP/VPN - Dedicated Servers - Webhosting - TOR Services - Auto Deploy
MyBB Tutorials

Forum Icons with a CSS Spritesheet Image

Submitted by Aoki, , Thread ID: 21021

Thread Closed
10-05-2016, 02:17 AM
Working Not Working Link Down
#1
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.
1
Nath

RE: Forum Icons with a CSS Spritesheet Image

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

RE: Forum Icons with a CSS Spritesheet Image

OP
#3
12-05-2016, 11:02 PM
Kawaii Wrote: Looks like your image host has died, might be worth re-uploading.

Nope, works fine.

RE: Forum Icons with a CSS Spritesheet Image

#4
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.

[Image: hgkiag.png]

RE: Forum Icons with a CSS Spritesheet Image

#5
12-05-2016, 11:10 PM
Aoki Wrote: Nope, works fine.

Yup, my mistake, Malwarebytes firewalled the site.

RE: Forum Icons with a CSS Spritesheet Image

#6
Any tutorial for making stylsheet for awards as shown here?

RE: Forum Icons with a CSS Spritesheet Image

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

RE: Forum Icons with a CSS Spritesheet Image

OP
#8
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.

RE: Forum Icons with a CSS Spritesheet Image

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

RE: Forum Icons with a CSS Spritesheet Image

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

Users browsing this thread: 1 Guest(s)