[For 1.8] FontAwesome Thread Status

[eNvy]

First Step

We need to load FontAwesome first, so, go to ACP > Templates & Styles > Templates > Your theme templates > Ungrouped Templates > open headerinclude template

Now just copy and paste this code at the end of the template:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Second Step

Warning: I will give you just one example, you need to make this for all the classes. Also, this modification can only show two icons (the folder icon and other icon you want), so, keep in mind that you can't have for example, a hot topic with the closed icon and also the dot icon.

Now, go to ACP > Templates & Styles > Themes > Your theme > open thread_status.css

The first class you saw is .thread_status

.thread_status {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(images/folders_sprite.png);
    background-repeat: no-repeat;
}

Replace that class with this new code:

.thread_status {
    display: inline-block;
}

Now we're going to replace the next class called .thread_status.dot_folder (this is the original code from .thread_status.dot_folder)

.thread_status.dot_folder {
    background-position: 0 0;
}

Keep only the name of the class, and then, delete it.

We're going to use the CSS pseudo classes :before and :after for this, check this out:

.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;
}

¿What the heck? Don't panic!

Explanation of that CSS code

We're going to use one of this classes to show the icon of the folder (I used a text file icon) and the other class to show a specific icon (in this case, a simple dot icon).

.thread_status.dot_folder:after

I decided to use ALWAYS the :after pseudo class to show the FOLDER icon, so, if you want to make all the icons, just use the same pseudo class for the folder.

You need to use FontAwesome as font-family, put the color, the position, the z-index value on 0 (because we're going to put the :before class over the :after class) and the most important thing, the content.

The content property is the icon itself, if you want to know the content of each FontAwesome icon, you can check this website: https://astronautweb.co/snippet/font-awesome/

Also, if you download the latest version of FontAwesome icon, you can open the css file and search the content of each icon, but you need to know the name of the icon of course.

.thread_status.dot_folder:before

I decided to use ALWAYS the :before pseudo class to show the SPECIFIC icon.

The CSS is basically the same, but we're going to put the "dot" icon with absolute positioning and the z-index value to 1 in order to show this icon OVER the folder icon, always.

¿The results?

If you style all the icons, you can obtain something like this:



Hope you will find this useful.

Regards.

[WallBB]

Really good tutorial eNvY, also if anyone wants to use an icon which is not present on astronautweb they can simply go to
http://fortawesome.github.io/Font-Awesome/icons/
And click on the desired icon and use the Unicode from that page.

Regards
WallBB

[jaydee9296]

This user has been denied support.

After following the steps above, I have encountered this kind of error... I think only one thread status has displayed and the others were not

[eNvy]

After following the steps above, I have encountered this kind of error... I think only one thread status has displayed and the others were not

Read the "Warning" in the Second Step, please.

[wakon5544]

http://community.mybb.com/thread-156711.html ??????

[eNvy]

http://community.mybb.com/thread-156711.html ??????

¿What's happening with that?

[])RAG()N]

nice work +rep

[envira]

Good job with the tut, i have used similar code for a theme in the past.
Would love to make a complete tut about that.
regards

[DuGz]

Nice tutorial, I was looking for something like this thanks.

[Livewire]

I'm so confused on the warning part?