Hey there, I'm currently working on Devaon's templates. Don't mind the incoherent stuff. Thanks !
Welcome to Devaon

Back to thread listCustomize the important threads appearence in threads list
Jeg
Sat Dec 11, 2021 2:04 pm

A way to customize the appearence of important threads (sticky, announcements and global announcements) in the threads list.

work in progress

In template topics_list_box, find
Code:
<li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
 and replace with
Code:
<li class="row {topics_list_box.row.ROW_ALT_CLASS}" data-type="{topics_list_box.row.TOPIC_TYPE}" <!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >


Check out the examples to know how to apply CSS to your important threads:

Global Announcement:
Code:
ul.topiclist li.row[data-type*="Global"] dl { /* this changes the block appareance */
    background-color: orange;
    color: white;
    display: block;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: none;
}

ul.topiclist li.row[data-type*="Global"] dl a {color: white;} /* this changes the global thread's links to white color */

Announcement:
Code:
ul.topiclist li.row[data-type*="announcement"] dl { /* this changes the block appareance */
    background-color: orange;
    color: white;
    display: block;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: none;
}

ul.topiclist li.row[data-type*="announcement"] dl a {color: white;} /* this changes the announcement thread's links to white color */

Sticky:
Code:
ul.topiclist li.row[data-type*="Sticky"] dl { /* this changes the block appareance */
    background-color: orange;
    color: white;
    display: block;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: none;
}

ul.topiclist li.row[data-type*="Sticky"] dl a {color: white;} /* this changes the sticky thread's links to white color */