2013-02-10, 06:33 AM
I don't think there's a tut for this yet, so I figured I'd make one real quick.
Alright, so first things first we'll have to turn our on/off/offlock icons into a sprite. So what we'll have to do is find the size of our icons, multiply either the height/width by 3, then order them vertically/horrizontally respectively (Say that 5 times fast).
If I lost you somewhere, here's an example. The default MyBB icons are 22px by 22px. So we'll multiply the height by 3, which gives us 66px. In Photoshop we create a 66px by 22px canvas, and stick in the images like so:
![[Image: iUfYNRxu5sv71.png]](https://camo.mybb.com/ec5f7e41032ada724207ade1f36febbbd74ccf8b/687474703a2f2f69312e6d696e75732e636f6d2f695566594e52787535737637312e706e67)
(Feel free to use this image and skip that step)
Next we'll want to change the way MyBB picks the images. By default it finds the correct image folder, then looks for on.gif, off.gif, and offlock.gif. However this won't work for CSS sprites, since we need to specify the background location with CSS. So let's find the template MyBB decides to do this.
Navigate to:
Template Sets » Default Templates » forumbit_depth2_forum
And find this code:
We'll have to change it so that instead of checking for an image, it checks for a class. So let's try this instead:
Alright, so there's only one step left. Positioning the image to work through CSS. So just add this to your global.css file (changing the image path to the correct path to the image):
And there you go, the server is only loading 1 image instead of 3 now. You can combine this with other images throughout your theme to cut down on load time even more.
If you want to retain clicking a node icon to mark all threads as read, continue reading, else you're finished.
First up you'll want to create a transparent image the same size as one of your icons (Important: Not the size of the whole sprite), in our case 22px by 22px. Upload that to the same place your sprite is located.
Now we'll go back into our template and replace this:
with this (changing the image path to the correct path to the image):
Remember this now means you're loading 2 resources instead of 1, though if you use the CSS Sprite for more than just these 3 images (on/off/offlock), your server will still love you.
Alright, so first things first we'll have to turn our on/off/offlock icons into a sprite. So what we'll have to do is find the size of our icons, multiply either the height/width by 3, then order them vertically/horrizontally respectively (Say that 5 times fast).
If I lost you somewhere, here's an example. The default MyBB icons are 22px by 22px. So we'll multiply the height by 3, which gives us 66px. In Photoshop we create a 66px by 22px canvas, and stick in the images like so:
(Feel free to use this image and skip that step)
Next we'll want to change the way MyBB picks the images. By default it finds the correct image folder, then looks for on.gif, off.gif, and offlock.gif. However this won't work for CSS sprites, since we need to specify the background location with CSS. So let's find the template MyBB decides to do this.
Navigate to:
Template Sets » Default Templates » forumbit_depth2_forum
And find this code:
<img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" />We'll have to change it so that instead of checking for an image, it checks for a class. So let's try this instead:
<div class="forumbit_{$lightbulb['folder']}" title="{$lightbulb['altonoff']}"></div>Alright, so there's only one step left. Positioning the image to work through CSS. So just add this to your global.css file (changing the image path to the correct path to the image):
.forumbit_on, .forumbit_off, .forumbit_offlock {
background: url(path/to/css/sprite.png) no-repeat center center;
width: 22px;
height: 22px;
}
.forumbit_on { background-position: 0 0; }
.forumbit_off { background-position: 0 -22px; }
.forumbit_offlock { background-position: 0 -44px; }And there you go, the server is only loading 1 image instead of 3 now. You can combine this with other images throughout your theme to cut down on load time even more.
If you want to retain clicking a node icon to mark all threads as read, continue reading, else you're finished.
First up you'll want to create a transparent image the same size as one of your icons (Important: Not the size of the whole sprite), in our case 22px by 22px. Upload that to the same place your sprite is located.
Now we'll go back into our template and replace this:
<div class="forumbit_{$lightbulb['folder']}" title="{$lightbulb['altonoff']}"></div>with this (changing the image path to the correct path to the image):
<div class="forumbit_{$lightbulb['folder']}">
<img src="path/to/css/transparent.css" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" />
</div>Remember this now means you're loading 2 resources instead of 1, though if you use the CSS Sprite for more than just these 3 images (on/off/offlock), your server will still love you.
