[CSS] Adding style for Announcement and Sticky

Go down

[CSS] Adding style for Announcement and Sticky

Post by SarkZKalie on May 3rd 2018, 12:23 am

Hello guys

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

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 viewtopic_body template.
Replace it by
Code:
<span id="{topics_list_box.row.TOPIC_TYPE}"></span>
Optional:
or if you wanna use this in blog mode, then do search in topics_blog_box template (optional).
Code:
{topics_blog_box.row.TOPIC_TYPE}
Replace it by
Code:
<span id="{topics_blog_box.row.TOPIC_TYPE}"></span>
Blog feature must be activated in
Code:
Admin Control Panel -> Modules -> Blogs -> Activate it
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
avatar
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 940
Reputation : 157
Language : English

http://rotavn.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum