Changing Forum_icon_sprite.png colors?
#1
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.)


Attached Files Thumbnail(s)
   
Reply
#2
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.
What goes around comes around
Reply
#3
(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:


.zip   images.zip (Size: 11.98 KB / Downloads: 89)



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:


.zip   images2.zip (Size: 27.55 KB / Downloads: 92)
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)