Thread Rating:
  • 2 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] FontAwesome Thread Status
#11
(06-16-2016, 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.
Reply
#12
How do I remove the stupid dot! I don't want it.
Reply
#13
Nice tutorial. Thanks!
Reply
#14
(07-12-2016, 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
Reply
#15
Very good looking tutorial!
Reply
#16
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
Reply
#17
(07-28-2016, 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.
Reply
#18
(07-29-2016, 01:16 AM)eNvy Wrote:
(07-28-2016, 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.
Reply
#19
You must set the background-position's for each folder's.
Reply
#20
(07-30-2016, 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.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)