MyBB Community Forums

In an effort to change the color for the dot, for lack of a better term, that indicates whether a forum has new posts, I went looking for the png. I found it, only to realize that it is a single png that accounts for all 4 statuses. Further, they're stacked vertically in the png and not horizontally like you see at the bottom of the forum index.

With that said, has anyone successfully altered those colors? I figure I could do it with some photo editing software, but I don't have anything really capable of doing that on my simple laptop. 

Thoughts? 

(see attachment.)

Here is a tutorial that swaps them out for CSS images, you can then style them as you want.

https://community.mybb.com/thread-156711.html

You will have to keep searching the forum if you want to use single images - i recall seeing a guidance for that somewhere on the forum.

(2017-05-21, 10:07 PM)JohnSnow Wrote: [ -> ]In an effort to change the color for the dot, for lack of a better term, that indicates whether a forum has new posts, I went looking for the png. I found it, only to realize that it is a single png that accounts for all 4 statuses. Further, they're stacked vertically in the png and not horizontally like you see at the bottom of the forum index.

With that said, has anyone successfully altered those colors? I figure I could do it with some photo editing software, but I don't have anything really capable of doing that on my simple laptop. 

Thoughts? 

(see attachment.)

@ JohnSnow


I described something similar in the past for someone wanting to remove font-awesome on/off icons here: https://community.mybb.com/thread-197381...pid1236732

And..., awhile back I also described how to change the entire board for the most part to individual images when I was doing classic..., here: https://community.mybb.com/thread-185390.html


But for your usage..., I believe you are not wanting sprites but individual images? Also very, very simple...., Yes, it is fairly easy and no..., it does not require sprites in the least..., here is a quick tip to get you there:

In global.css find:

.forum_status {
    height: 30px;
    width: 30px;
    background: url(images/forum_icon_sprite.png) no-repeat 0 0;
    display: inline-block;
}

.forum_on {
    background-position: 0 0;
}

.forum_off {
    background-position: 0 -30px;
}

.forum_offlock {
    background-position: 0 -60px;
}

.forum_offlink {
    background-position: 0 -90px;
}

.subforumicon {
    height: 10px;
    width: 10px;
    display: inline-block;
    margin: 0 5px;
    background: url(images/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
    background-position: 0 0;
}

.subforum_minioff {
    background-position: 0 -10px;
}

.subforum_miniofflock {
    background-position: 0 -20px;
}

.subforum_miniofflink {
    background-position: 0 -30px;
}

Replace with:

 .forum_status {
    height: 22px;
    width: 22px;     
 /* background: url('images/forum_icon_sprite.png') no-repeat 0 0; */ /** for sprite usage **/
    display: inline-block;
 }
 
 .forum_on {
 /* background-position: 0 0; */ /** for sprite usage **/
    background-image: url('images/on.png'); /** for individual on/off icon usage **/
 }
 
 .forum_off {
 /* background-position: 0 -30px; */ /** for sprite usage **/
    background-image: url('images/off.png');  /** for individual on/off icon usage **/
 }
 
 .forum_offlock {
 /* background-position: 0 -60px; */ /** for sprite usage **/
    background-image: url('images/offlock.png');  /** for individual on/off icon usage **/
 }
 
 .forum_offlink {
 /* background-position: 0 -90px; */ /** for sprite usage **/
    background-image: url('images/offlink.png');  /** for individual on/off icon usage **/
 }
 
 .subforumicon {
 /* height: 10px; */ /** for sprite usage **/
 /* width: 10px; */ /** for sprite usage **/
    height: 16px; /** for individual mini on/off icon usage **/
    width: 16px; /** for individual mini on/off icon usage **/
    display: inline-block;  
    vertical-align: middle; /** for individual mini on/off icon usage **/
 /* margin: 0 5px; */ /** for sprite usage **/
 /* background: url('images/mini_status_sprite.png') no-repeat 0 0; */ /** for sprite usage **/
 }
 
 .subforum_minion {
 /* background-position: 0 0; */ /** for sprite usage **/
    background-image: url('images/minion.png');  /** for individual mini on/off icon usage **/
 }
 
 .subforum_minioff {
 /* background-position: 0 -10px; */ /** for sprite usage **/
    background-image: url('images/minioff.png');  /** for individual mini on/off icon usage **/
 }
 
 .subforum_miniofflock {
 /* background-position: 0 -20px; */ /** for sprite usage **/
    background-image: url('images/miniofflock.png');  /** for individual mini on/off icon usage **/
 }
 
 .subforum_miniofflink {
 /* background-position: 0 -30px; */ /** for sprite usage **/
    background-image: url('images/miniofflink.png');  /** for individual mini on/off icon usage **/
 }

These are the on/off images used in "classic"
Add the images below to your "images" folder until you plan on creating your own:

[attachment=38875]



Now if you did not want the on/off images I used in classic..., the same can be applied for the default images.., found below not as sprites but individual images..., though to implement it the sizing is slightly different than the above instructions: ie: rather than 22px by 22px and 16px by 16px it will be 30px by 30px and 10px by 10px  as you can see below:

In global.css find:

Code:

.forum_status {
     height: 30px;
     width: 30px;
     background: url(images/forum_icon_sprite.png) no-repeat 0 0;
     display: inline-block;
 }
 
 .forum_on {
     background-position: 0 0;
 }
 
 .forum_off {
     background-position: 0 -30px;
 }
 
 .forum_offlock {
     background-position: 0 -60px;
 }
 
 .forum_offlink {
     background-position: 0 -90px;
 }
 
 .subforumicon {
     height: 10px;
     width: 10px;
     display: inline-block;
     margin: 0 5px;
     background: url(images/mini_status_sprite.png) no-repeat 0 0;
 }
 
 .subforum_minion {
     background-position: 0 0;
 }
 
 .subforum_minioff {
     background-position: 0 -10px;
 }
 
 .subforum_miniofflock {
     background-position: 0 -20px;
 }
 
 .subforum_miniofflink {
     background-position: 0 -30px;
 }

Replace with:

Code:

.forum_status {
    height: 30px;
    width: 30px;     
 /* background: url('images/forum_icon_sprite.png') no-repeat 0 0; */ /** for sprite usage **/
    display: inline-block;
 }
 
 .forum_on {
 /* background-position: 0 0; */ /** for sprite usage **/
    background-image: url('images/on.png'); /** for individual on/off icon usage **/
 }
 
 .forum_off {
 /* background-position: 0 -30px; */ /** for sprite usage **/
    background-image: url('images/off.png');  /** for individual on/off icon usage **/
 }
 
 .forum_offlock {
 /* background-position: 0 -60px; */ /** for sprite usage **/
    background-image: url('images/offlock.png');  /** for individual on/off icon usage **/
 }
 
 .forum_offlink {
 /* background-position: 0 -90px; */ /** for sprite usage **/
    background-image: url('images/offlink.png');  /** for individual on/off icon usage **/
 }
 
 .subforumicon {
 /* height: 10px; */ /** for sprite usage **/
 /* width: 10px; */ /** for sprite usage **/
    height: 10px; /** for individual mini on/off icon usage **/
    width: 10px; /** for individual mini on/off icon usage **/
    display: inline-block;  
    vertical-align: middle; /** for individual mini on/off icon usage **/
 /* margin: 0 5px; */ /** for sprite usage **/
 /* background: url('images/mini_status_sprite.png') no-repeat 0 0; */ /** for sprite usage **/
 }
 
 .subforum_minion {
 /* background-position: 0 0; */ /** for sprite usage **/
    background-image: url('images/minion.png');  /** for individual mini on/off icon usage **/
 }
 
 .subforum_minioff {
 /* background-position: 0 -10px; */ /** for sprite usage **/
    background-image: url('images/minioff.png');  /** for individual mini on/off icon usage **/
 }
 
 .subforum_miniofflock {
 /* background-position: 0 -20px; */ /** for sprite usage **/
    background-image: url('images/miniofflock.png');  /** for individual mini on/off icon usage **/
 }
 
 .subforum_miniofflink {
 /* background-position: 0 -30px; */ /** for sprite usage **/
    background-image: url('images/miniofflink.png');  /** for individual mini on/off icon usage **/
 }

Add the images below to your "images" folder until you plan on creating your own:

[attachment=38876]

I don't see only lock icon. I don't understand

Not sure why you posted on this old thread, but thank you! I was looking for these instructions everywhere and couldn't find them. So now I know where they are for future reference.

merhaba bişey sormak istiyorum bende forum sitesi kurmak istiyorum fakat mybb nin teması değil farklı temalar kullanabilir myiz bide forum acılınca en üstte mybb logosu yerine baska logo koyabilir miyiz

Quote:hello, I want to ask something, I want to set up a forum site, but not mybb's theme, can we use different themes? When the forum is opened, can we put another logo instead of mybb logo

Yes, alternative themes may be found here, and elsewhere on the internet. https://community.mybb.com/mods.php?acti...ory=themes
Since some may not be maintained to be current with latest version of MyBB, you may need to try it, and find another if it doesn't suit you.

Other logos can also be used. How to change to a different logo may be dependent on which theme you are using.

Thank you. this tutorial was very helpful.

go to you theme- templates- Forum Bit Templates- and add this

<tr>
<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>
<td class="{$bgcolor}" valign="top">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="trow1" valign="center" align="center" style="white-space: nowrap" width="85"><span style="background: #eee;
    padding: 5px;
    border: 1px solid gainsboro;
    border-radius: 2px; color: gray; font-weight: bold;"><i class="fa fa-comment"></i> {$threads}{$unapproved['unapproved_threads']} Tema </span></td>
<td class="trow1" valign="center" align="center" style="white-space: nowrap" width="85"><span style="background: #eee;
    padding: 5px;
    border: 1px solid gainsboro;
    border-radius: 2px; color: gray; font-weight: bold;"><i class="fa fa-comments"></i> {$posts}{$unapproved['unapproved_posts']} Post </span></td>
<td class="trow1" valign="center" align="left" style="white-space: nowrap" width="200">{$lastpost}</td>
</tr>

forumbit_depth2_forum