2016-04-06, 01:02 AM
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:
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
Replace that class with this new code:
Now we're going to replace the next class called .thread_status.dot_folder (this is the original code from .thread_status.dot_folder)
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:
¿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:
![[Image: P5Xoxnf.png]](https://camo.mybb.com/1cb77578177448332ad5d403c3a98184708d878f/687474703a2f2f692e696d6775722e636f6d2f5035586f786e662e706e67)
Hope you will find this useful.
Regards.
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.
