[CSS] Adding style for Announcement and Sticky

Hello guys

1) By default, the whole content inside {topics_list_box.row.TOPIC_TYPE} variable will end by a colon ( : ) So, i write this tutorial to help you remove it without installing any javascript and one more thing it will work all version.

First of all, define your special text for announcement and sticky by browse to your Admin Control Panel -> General -> Mesages and emails -> Config. -> Define another name

In my case, I'll use content1 and content2.

Code:

Announcement : content1
Sticky : content2

Next step, search and locate {topics_list_box.row.TOPIC_TYPE} variable in topics_list_box template.
Replace it by

Code:

<span id="{topics_list_box.row.TOPIC_TYPE}"></span>

Optional:

Last step, add this to your CSS

Code:

span[id*="content1"]:before, span[id*="content2"]:before {
     padding: 4px 4px;
     margin: 0 5px;
     border: 1px solid #999;
     border-radius: 2px;
}
 span[id*="content1"]:before {
     content: "new-content1";
     background: darkcyan;
     color: white;
}
 span[id*="content2"]:before {
     content: "new-content2";
     background: red;
     color: white;
}

Result LIVE DEMO

Note : You must have a sticky or announcement post at least, unless this tip won't work as expected