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

HMR

2016-07-31, 11:44 AM
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]

eNvy

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.

Kerala

2016-08-10, 07:14 PM
How can i change hot topic with the closed icon and also the dot icon???

Eldenroot

2017-12-22, 08:40 PM
(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?

Anurag M

2023-07-15, 05:20 AM
Thanks, I am using this for a theme I am making Smile Looks great!

[attachment=46155]
Pages: 1 2 3
MyBB Community Forums > Resources > Tutorials > FontAwesome Thread Status