MyBB Community Forums

Full Version: Change these icons? (Threadlist)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey guys. I'm working on a theme and I want to change some gif icons to CSS icons (FontAwesome will be used.)

I managed to change the legend already, but now I need to change the icons to be like I want them to be.
Sorry - I'm really bad at explaining, but I hope that you guys understood. I'm developing this theme on WAMP.

http://prntscr.com/4lgcn0
[Image: 91Ezakp.png]
Quote:it depends on your base theme and MyBB version
MyBB 1.8 default theme is using sprite image (~/images/folders_sprite.png) with css positioning through background property
Forgot to mention, I'm using MyBB 1.6.

(2014-09-09, 09:26 AM)Coxetamine Wrote: [ -> ]Forgot to mention, I'm using MyBB 1.6.

Huh
Help me please :3
(2014-09-10, 11:20 AM)Coxetamine Wrote: [ -> ]Help me please :3

I've seen this done but I don't remember where. Please someone help me with my problem Big Grin
(2014-09-11, 07:07 PM)Coxetamine Wrote: [ -> ]
(2014-09-10, 11:20 AM)Coxetamine Wrote: [ -> ]Help me please :3

I've seen this done but I don't remember where. Please someone help me with my problem Big Grin

bring up my post Angel
Edit them in Thread_status.css.  I change them like this for 1.8 ( forgot how they are done on 1.6)

.thread_status {
display: inline-block;
  width: 16px;
height: 16px;
background-repeat: no-repeat;
}

.thread_status.dot_folder {
   position:relative;
}

.thread_status.dot_folder:before {
background: #27ae60;
color: #fff;
position: absolute;
background-position: 0 0;
content: "\f114";
border: 1px solid #1c8046;
text-shadow: 1px 1px 0px #1c8046;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
-webkit-box-shadow: inset 0 0 1px 1px #26cb6c;
-moz-box-shadow: inset 0 0 1px 1px #26cb6c;
box-shadow: inset 0 0 1px 1px #26cb6c;
padding: 3px 5px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-top: -7px;
font-family: FontAwesome;
font-size: 16px;
}

then do the same for every folder- change the bold for the icons.  
Use the cheatsheet here for icons http://fortawesome.github.io/Font-Awesome/cheatsheet/