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

Threaded Mode
[For 1.8] FontAwesome Thread Status
HMR Offline
Posts: 233
Threads: 38
Joined: Aug 2015
Reputation: 38
#21
2016-07-31, 11:44 AM (This post was last modified: 2016-07-31, 11:48 AM by HMR.)
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]
Discord: Prince#4000
Find
Reply
eNvy Offline
Posts: 1,116
Threads: 42
Joined: Jul 2013
Reputation: 151
#22
2016-08-02, 04:32 PM
(2016-07-31, 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.
Website Find
Reply
Kerala Offline
Posts: 106
Threads: 32
Joined: Jul 2016
Reputation: 1
#23
2016-08-10, 07:14 PM
How can i change hot topic with the closed icon and also the dot icon???
Website Find
Reply
Eldenroot Offline

Contributor
Posts: 3,320
Threads: 192
Joined: May 2014
Reputation: 147
#24
2017-12-22, 08:40 PM (This post was last modified: 2017-12-22, 08:41 PM by Eldenroot.)
(2016-08-10, 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
Website Find
Reply
Tekkie Da Offline
Posts: 832
Threads: 129
Joined: Mar 2010
Reputation: 49
#25
2023-07-15, 05:20 AM (This post was last modified: 2023-07-15, 05:48 AM by Tekkie Da. Edited 2 times in total.)
Thanks, I am using this for a theme I am making Smile Looks great!

   
root@TekkieDa: $ ▮
Website Find
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)