MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > FontAwesome Thread Status
Full Version: FontAwesome Thread Status
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3

eNvy

2016-06-16, 10:54 PM
(2016-06-16, 10:48 PM)Limited Edition Wrote: [ -> ]I'm so confused on the warning part? Confused

It's quite simple, you have a lot of thread status (open, closed, hot topic, hot topic with your answers, hot topic closed, etc). I give you just an example for ONE status, you need to apply the same tutorial for all of them, and change the icons for the different status.

Dizzygaming

2016-07-12, 10:23 AM
How do I remove the stupid dot! I don't want it.

brad-t

2016-07-12, 02:19 PM
Nice tutorial. Thanks!

WallBB

2016-07-12, 02:26 PM
(2016-07-12, 10:23 AM)Dizzygaming Wrote: [ -> ]How do I remove the stupid dot! I don't want it.

Can you tell me which dot you want to remove ?
I can help

Milcore

2016-07-12, 03:22 PM
Very good looking tutorial!

Milcore

2016-07-28, 01:43 PM
Okay so, so far this is my code:

.thread_status {
    display: inline-block;
}

.thread_status.dot_folder {
    background-position: 0 0;
}

.thread_status.dot_folder:before {
    font-family: FontAwesome;
    font-size: 8px;
    color: #739e97;
    content: "\f111";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_folder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
    content: "\f15c";
    position: relative;
    z-index: 0;
}

/* End Folder */

.thread_status.dot_hotfolder {
    background-position: 0 0;
}

.thread_status.dot_hotfolder:before {
    font-family: FontAwesome;
    font-size: 8px;
    color: #c0392b;
    content: "\f111";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_hotfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #c0392b;
    content: "\f15c";
    position: relative;
    z-index: 0;
}

/* End Hot Folder */

.thread_status.dot_hotfolder {
    background-position: 0 0;
}

.thread_status.dot_hotlockfolder:before {
    font-family: FontAwesome;
    font-size: 8px;
    color: #c0392b;
    content: "\f111";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_hotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #c0392b;
    content: "\f15c";
    position: relative;
    z-index: 0;
}

/* End Hot Locked Folder */

.thread_status.dot_lockfolder {
 background-position: 0 -60px;
}

.thread_status.dot_newfolder {
 background-position: 0 -80px;
}

.thread_status.dot_newhotfolder {
 background-position: 0 -100px;
}

.thread_status.dot_newhotlockfolder {
 background-position: 0 -120px;
}

.thread_status.dot_newlockfolder {
 background-position: 0 -140px;
}

.thread_status.folder {
 background-position: 0 -160px;
}

.thread_status.hotfolder {
 background-position: 0 -180px;
}

.thread_status.hotlockfolder {
 background-position: 0 -200px;
}

.thread_status.lockfolder {
 background-position: 0 -220px;
}

.thread_status.movefolder {
 background-position: 0 -240px;
}

.thread_status.newfolder {
 background-position: 0 -260px;
}

.thread_status.newhotfolder {
 background-position: 0 -280px;
}

.thread_status.newhotlockfolder {
 background-position: 0 -300px;
}

.thread_status.newlockfolder {
 background-position: 0 -320px;
}

Well this is the problem:
[Image: fa38c9d86a4445a7b11a844c36c693dc.png]


Can anyone help with this? Not that good at CSS

eNvy

2016-07-29, 01:16 AM
(2016-07-28, 01:43 PM)StealthBB Wrote: [ -> ]Okay so, so far this is my code:

.thread_status {
    display: inline-block;
}

.thread_status.dot_folder {
    background-position: 0 0;
}

.thread_status.dot_folder:before {
    font-family: FontAwesome;
    font-size: 8px;
    color: #739e97;
    content: "\f111";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_folder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
    content: "\f15c";
    position: relative;
    z-index: 0;
}

/* End Folder */

.thread_status.dot_hotfolder {
    background-position: 0 0;
}

.thread_status.dot_hotfolder:before {
    font-family: FontAwesome;
    font-size: 8px;
    color: #c0392b;
    content: "\f111";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_hotfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #c0392b;
    content: "\f15c";
    position: relative;
    z-index: 0;
}

/* End Hot Folder */

.thread_status.dot_hotfolder {
    background-position: 0 0;
}

.thread_status.dot_hotlockfolder:before {
    font-family: FontAwesome;
    font-size: 8px;
    color: #c0392b;
    content: "\f111";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_hotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #c0392b;
    content: "\f15c";
    position: relative;
    z-index: 0;
}

/* End Hot Locked Folder */

.thread_status.dot_lockfolder {
 background-position: 0 -60px;
}

.thread_status.dot_newfolder {
 background-position: 0 -80px;
}

.thread_status.dot_newhotfolder {
 background-position: 0 -100px;
}

.thread_status.dot_newhotlockfolder {
 background-position: 0 -120px;
}

.thread_status.dot_newlockfolder {
 background-position: 0 -140px;
}

.thread_status.folder {
 background-position: 0 -160px;
}

.thread_status.hotfolder {
 background-position: 0 -180px;
}

.thread_status.hotlockfolder {
 background-position: 0 -200px;
}

.thread_status.lockfolder {
 background-position: 0 -220px;
}

.thread_status.movefolder {
 background-position: 0 -240px;
}

.thread_status.newfolder {
 background-position: 0 -260px;
}

.thread_status.newhotfolder {
 background-position: 0 -280px;
}

.thread_status.newhotlockfolder {
 background-position: 0 -300px;
}

.thread_status.newlockfolder {
 background-position: 0 -320px;
}

Well this is the problem:
[Image: fa38c9d86a4445a7b11a844c36c693dc.png]


Can anyone help with this? Not that good at CSS

Read again the tutorial, this is not just copy and paste, is a tutorial for a reason.

Milcore

2016-07-30, 04:05 PM
(2016-07-29, 01:16 AM)eNvy Wrote: [ -> ]
(2016-07-28, 01:43 PM)StealthBB Wrote: [ -> ]Okay so, so far this is my code:

.thread_status {
    display: inline-block;
}

.thread_status.dot_folder {
    background-position: 0 0;
}

.thread_status.dot_folder:before {
    font-family: FontAwesome;
    font-size: 8px;
    color: #739e97;
    content: "\f111";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_folder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
    content: "\f15c";
    position: relative;
    z-index: 0;
}

/* End Folder */

.thread_status.dot_hotfolder {
    background-position: 0 0;
}

.thread_status.dot_hotfolder:before {
    font-family: FontAwesome;
    font-size: 8px;
    color: #c0392b;
    content: "\f111";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_hotfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #c0392b;
    content: "\f15c";
    position: relative;
    z-index: 0;
}

/* End Hot Folder */

.thread_status.dot_hotfolder {
    background-position: 0 0;
}

.thread_status.dot_hotlockfolder:before {
    font-family: FontAwesome;
    font-size: 8px;
    color: #c0392b;
    content: "\f111";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_hotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #c0392b;
    content: "\f15c";
    position: relative;
    z-index: 0;
}

/* End Hot Locked Folder */

.thread_status.dot_lockfolder {
 background-position: 0 -60px;
}

.thread_status.dot_newfolder {
 background-position: 0 -80px;
}

.thread_status.dot_newhotfolder {
 background-position: 0 -100px;
}

.thread_status.dot_newhotlockfolder {
 background-position: 0 -120px;
}

.thread_status.dot_newlockfolder {
 background-position: 0 -140px;
}

.thread_status.folder {
 background-position: 0 -160px;
}

.thread_status.hotfolder {
 background-position: 0 -180px;
}

.thread_status.hotlockfolder {
 background-position: 0 -200px;
}

.thread_status.lockfolder {
 background-position: 0 -220px;
}

.thread_status.movefolder {
 background-position: 0 -240px;
}

.thread_status.newfolder {
 background-position: 0 -260px;
}

.thread_status.newhotfolder {
 background-position: 0 -280px;
}

.thread_status.newhotlockfolder {
 background-position: 0 -300px;
}

.thread_status.newlockfolder {
 background-position: 0 -320px;
}

Well this is the problem:
[Image: fa38c9d86a4445a7b11a844c36c693dc.png]


Can anyone help with this? Not that good at CSS

Read again the tutorial, this is not just copy and paste, is a tutorial for a reason.

Yes I know, but when I try to add the other files it doesn't work at all.

MrBrechreiz

2016-07-30, 04:16 PM
You must set the background-position's for each folder's.

eNvy

2016-07-31, 04:59 AM
(2016-07-30, 04:16 PM)MrBrechreiz Wrote: [ -> ]You must set the background-position's for each folder's.

No, is not necessary. You need just to create the 2 pseudo classes for each one and that's all.
Pages: 1 2 3
MyBB Community Forums > Resources > Tutorials > FontAwesome Thread Status