MyBB Community Forums

No problem guys, glad it helps.

Also wanted to mention that you can change the color in CSS for each one and use a glyph font like FontAwesome (Just add your <i class="icon-"></i> stuff inside the div). You can see a live demo of it on GoSeries:

http://www.audentio.com/preview/mybb/goseries

It's more useful if you're already making use of the font (I don't suggest loading it just for the on/off/offlock icons).

Thanks for the awesome tutorial. I toyed around with it for a bit and made a slight modification for Font Awesome.

<div class="forumbit_{$lightbulb['folder']}" title="{$lightbulb['altonoff']}"><i class="icon-folder-{$lightbulb['folder']}"></i></div>

Inside your global.css add the three classes .icon-folder-on, .icon-folder-off, .icon-folder-offlock that point to your respective icons. I actually used the .icon-folder-open-alt, icon-folder-closed-alt, and icon-folder-closed respectively.

.icon-folder-on:before {
  content: "\f07c";
  color: purple;
}

I also made forum_displaythread use Font Awesome. If you want to get crazy you can mess with .icon-stack and some of the other tricks. This omits the hot thread icons and uses the four different icon-comment series to differentiate between unread, read, read by you, and unread by you.

Change:

<td align="center" class="{$bgcolor}{$thread_type_class}" width="2%"><img src="{$theme['imgdir']}/{$folder}.gif" alt="{$folder_label}" title="{$folder_label}" /></td>

To:

<td align="center" class="{$bgcolor}{$thread_type_class}" width="2%"><i class="icon-thread-{$folder} icon-stack-base" title="{$folder_label}"></i></td>

Style however you want with CSS:

.icon-thread-folder:before{
	content:"\f0e5";
	color: cyan;
}
.icon-thread-newfolder:before{
	content:"\f075";
	color: magenta;
}
.icon-thread-dot_newfolder:before{
	content:"\f086";
	color: magenta;
}
.icon-thread-dot_folder:before{
	content:"\f0e6";
	color: cyan;
}
.icon-thread-dot_lockfolder:before,.icon-thread-lockfolder:before,.icon-thread-newlockfolder:before,.icon-thread-dot_newlockfolder:before {
	content:"\f023";
	color: red;
}

Change your legend in forumdisplay_threadlist:

<div class="float_left">
	<div class="float_left">
		<dl class="thread_legend smalltext">
			<dd><i class="icon-thread-newfolder"></i>{$lang->new_thread}</dd>
			<dd><i class="icon-thread-folder"></i>{$lang->no_new_thread}</dd>
		</dl>
	</div>

	<div class="float_left">
		<dl class="thread_legend smalltext">
			<dd><i class="icon-thread-dot_folder"></i>{$lang->posts_by_you}</dd>
			<dd><i class="icon-thread-lockfolder"></i>{$lang->locked_thread}</dd>
		</dl>
	</div>
	<br style="clear: both" />
</div>

The default ones work great, but i create my own and its one image that shows and its out of place, i followed everything, any ideas.

(2013-07-18, 08:22 PM)JonathanP Wrote: [ -> ]The default ones work great, but i create my own and its one image that shows and its out of place, i followed everything, any ideas.

what are the dimensions of your image(s)? Are they stacked properly with no space between them? If not 22x22 (or 22x66) then you need to adjust your CSS to use the proper dimensions.

Still no luck.

share your sprite and the css you are using?

Ok i found a sprite generator out of curiosity and it works perfectly now.