MyBB Community Forums › Resources › Tutorials v
[For 1.8] FontAwesome Thread Status

Threaded Mode
[For 1.8] FontAwesome Thread Status
eNvy Offline
Posts: 1,116
Threads: 42
Joined: Jul 2013
Reputation: 151
#11
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.
I don't give support on PM.
Website Find
Reply
Dizzygaming Offline
Posts: 152
Threads: 58
Joined: Jan 2013
Reputation: 2
#12
2016-07-12, 10:23 AM
How do I remove the stupid dot! I don't want it.
Find
Reply
brad-t Offline

Former Staff
Posts: 9,348
Threads: 266
Joined: Oct 2007
Reputation: 232
#13
2016-07-12, 02:19 PM
Nice tutorial. Thanks!
World Beyblade Organization
Website Find
Reply
WallBB Offline

Contributor
Posts: 2,794
Threads: 60
Joined: Mar 2016
Reputation: 230
#14
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
- MyBB Heart
Find
Reply
Milcore Offline
Posts: 17
Threads: 6
Joined: Jun 2016
Reputation: 0
#15
2016-07-12, 03:22 PM
Very good looking tutorial!
Find
Reply
Milcore Offline
Posts: 17
Threads: 6
Joined: Jun 2016
Reputation: 0
#16
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
Find
Reply
eNvy Offline
Posts: 1,116
Threads: 42
Joined: Jul 2013
Reputation: 151
#17
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.
I don't give support on PM.
Website Find
Reply
Milcore Offline
Posts: 17
Threads: 6
Joined: Jun 2016
Reputation: 0
#18
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.
Find
Reply
MrBrechreiz Offline
Posts: 119
Threads: 2
Joined: Dec 2011
Reputation: 12
#19
2016-07-30, 04:16 PM
You must set the background-position's for each folder's.
Find
Reply
eNvy Offline
Posts: 1,116
Threads: 42
Joined: Jul 2013
Reputation: 151
#20
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.
I don't give support on PM.
Website Find
Reply


Forum Jump:


Users browsing this thread: 2 Guest(s)