Thread Rating:
  • 2 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] FontAwesome Thread Status
#21
Thanks eNvy for this great tutorial,
Though i have tried to do something for that pseudo problem..
i have replaced that dot and now for normal post icon(which don't contain posts by You) i have used file icon and for Contains Posts by You used file-text icon which resolved all problems..

Here is my thread_status.css:
.thread_status {
    display: inline-block;
}

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



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

.thread_status.dot_hotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #970000;
    content: "\f15c";
    position: relative;
    z-index: 0;
}
.thread_status.dot_hotlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_lockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
    content: "\f15c";
    position: relative;
    z-index: 0;
}
.thread_status.dot_lockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

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

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

.thread_status.dot_newhotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #ff0000;
    content: "\f15c";
    position: relative;
    z-index: 0;
}
.thread_status.dot_newhotlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_newlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #739e97;
    content: "\f15c";
    position: relative;
    z-index: 0;
}
.thread_status.dot_newlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

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

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

.thread_status.hotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #970000;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.hotlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}
.thread_status.lockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.lockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}
.thread_status.movefolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.movefolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #53dba6;
    content: "\f061";
    position: absolute;
    z-index: 1;
}
.thread_status.newfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #739e97;
    content: "\f15b";
    position: relative;
    z-index: 0;
}

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

.thread_status.newhotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #ff0000;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.newhotlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}
.thread_status.newlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #739e97;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.newlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

and here is the result of the above css:
[Image: 6a5650c1ce.png]
Reply
#22
(07-31-2016, 11:44 AM)HMR Wrote: Thanks eNvy for this great tutorial,
Though i have tried to do something for that pseudo problem..
i have replaced that dot and now for normal post icon(which don't contain posts by You) i have used file icon and for Contains Posts by You used file-text icon which resolved all problems..

Here is my thread_status.css:
.thread_status {
    display: inline-block;
}

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



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

.thread_status.dot_hotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #970000;
    content: "\f15c";
    position: relative;
    z-index: 0;
}
.thread_status.dot_hotlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_lockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
    content: "\f15c";
    position: relative;
    z-index: 0;
}
.thread_status.dot_lockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

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

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

.thread_status.dot_newhotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #ff0000;
    content: "\f15c";
    position: relative;
    z-index: 0;
}
.thread_status.dot_newhotlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

.thread_status.dot_newlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #739e97;
    content: "\f15c";
    position: relative;
    z-index: 0;
}
.thread_status.dot_newlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

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

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

.thread_status.hotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #970000;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.hotlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}
.thread_status.lockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.lockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}
.thread_status.movefolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.movefolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #53dba6;
    content: "\f061";
    position: absolute;
    z-index: 1;
}
.thread_status.newfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #739e97;
    content: "\f15b";
    position: relative;
    z-index: 0;
}

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

.thread_status.newhotlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #ff0000;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.newhotlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}
.thread_status.newlockfolder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #739e97;
    content: "\f15b";
    position: relative;
    z-index: 0;
}
.thread_status.newlockfolder:before {
    font-family: FontAwesome;
    font-size: 13px;
    color: #cea300;
    content: "\f023";
    position: absolute;
    z-index: 1;
}

and here is the result of the above css:
[Image: 6a5650c1ce.png]

Awesome!

I put the dot because it's the default form of MyBB, but of course you can change it.
I don't give support on PM.
Reply
#23
How can i change hot topic with the closed icon and also the dot icon???
Reply
#24
(08-10-2016, 07:14 PM)Kerala Wrote: How can i change hot topic with the closed icon and also the dot icon???

Would be nice... maybe add a dot icon under the padlock icon or change the background color of the folder icon?
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#25
Thanks, good topic
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)