[Archived] anouncement and sticky

Details:
can someone help me how to achieve this style of announcement and sticky

https://imgur.com/MrMAHb7

Your Forum Address:
muonline.forums.com.bz

Forum Version:
PunBB

Hi. Go to ACP > General > topics_list_box
Replace topics_list_box template with this :

Code:

<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
         var all_checked = true;
         for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
         }
         }
         document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }
      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
         for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
         }
         }
      }
      </script>
   <!-- END multi_selection -->
<div class="topme"><!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <h1 class="page-title">{L_TOPICS} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
      <p class="options">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
  </p></div>
                  <div class="main-content">
   <table cellspacing="0" class="table">
      
      <tbody class="statused">
<!-- END header_table -->
<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->
<!-- BEGIN topic -->
   <!-- BEGIN table_sticky -->
      </tbody>
   </table>
   </div><div class="topme">
                  <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
      <p class="options">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
                  </p></div>
<div class="main-content">
   <table cellspacing="0" class="table">
      
      <tbody class="statused">
   <!-- END table_sticky -->
      <tr>
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <span class="status" style="padding-top: 0.8%!important">
               <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </span>
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
            <!-- END single_selection -->
                          <span id="tipe-post">{topics_list_box.row.TOPIC_TYPE}&nbsp;</span>
                          {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.ICON}&nbsp;
            <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>&nbsp;{topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;</h2>&nbsp;
            <!-- BEGIN switch_description -->
            <br />
            &nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
                          <p>{topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}&nbsp;&nbsp;{topics_list_box.row.GOTO_PAGE_NEW}&nbsp;</p>
            
         </td>
         <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"></td>
                  <td class="tc3 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><p>{topics_list_box.row.REPLIES} <span>replies</span></p><p>{topics_list_box.row.VIEWS} <span>views</span></p></td>
                  <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><div class="avs" style="padding-left: 30px;"><span><p>{topics_list_box.row.LAST_POST_AUTHOR}</p>{topics_list_box.row.LAST_POST_TIME}{topics_list_box.row.LAST_POST_IMG}</span></div></td>
         <!-- BEGIN multi_selection -->
         <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
         <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
   <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->
<!-- BEGIN bottom -->
      </tbody>
   </table>
   </div>
  
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Add in the css stylesheet this code :

Code:

.tcl.tdtopics #tipe-post strong {
background-image: url(http://i.imgur.com/BnZuWJM.png);
background-position: 0 -1px;
background-repeat: repeat-x;
border-radius: 3px;
color: #fff;
font-weight: 700;
padding: 1px 5px;
text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
text-transform: uppercase;
}

And now , add in Javascript , with placement : all pages , this code :

Code:

$(document).ready(function() {
 $('.tcl strong:contains("Announcement")').each(function(){
$(this).css({ 'background-color': 'rgb(123, 166, 13)'});
});
});
$(document).ready(function() {
 $('.tcl strong:contains("Sticky")').each(function(){
$(this).css({ 'background-color': 'red'});
});
});
$(document).ready(function() {
$('.tcl strong:contains("Global announcement")').each(function(){
$(this).css({ 'background-color': 'rgb(255, 64, 0)'});
});
});

And that's all .

Is it solved now?

working but its now become messy

this is the orginal


and this the new one after i install the codes

Can you post here the original topics_list_box of theme ?

Code:

<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
         var all_checked = true;
         for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
         }
         }
         document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }
      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
         for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
         }
         }
      }
      </script>
   <!-- END multi_selection -->

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
          <h1 class="page-title"><span class="filterb">Announcement and Sticky ({topics_list_box.row.COUNT_TOTAL_TOPICS})</span></h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">&nbsp;</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
<!-- END header_table -->

<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->
   <!-- BEGIN table_sticky -->
      </tbody>
   </table>
   </div>

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /   >
      <!-- END multi_selection -->
                  <h1><span class="filterb">Topics ({topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS})</span></h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">&nbsp;</th>
            <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
   <!-- END table_sticky -->
      <tr>
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <span class="status">
               <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </span>
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
            <!-- END single_selection -->
                          <span style="margin-left: -13px;">{topics_list_box.row.TOPIC_TYPE}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="margin-left: -7px;"><h2 class="topic-title" style="font-weight: normal !important; margin-left: -13px;"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>&nbsp;
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}&nbsp;
                                  <br/><p style="color: #a4a4a4; margin-left: -13px;">Started {topics_list_box.row.L_BY} <span class="authooor">{topics_list_box.row.TOPIC_AUTHOR}</span></p></span>
            <!-- BEGIN switch_description -->
            <br />
            &nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
         </td>
                  <td style="border:none;"  id="postA" class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><span class="ipsBadge ipsBadge_orange" data-id="hot_topic" style="display:none;">HOT</span><strong data-id="replies" class="RP">{topics_list_box.row.REPLIES}</strong> Replies<br /><strong class="VW"> {topics_list_box.row.VIEWS}</strong> Views</td>
       
                  <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><p style="margin-top: 8px;">{topics_list_box.row.LAST_POST_AUTHOR}<br/>{topics_list_box.row.LAST_POST_TIME}</p></td>
         <!-- BEGIN multi_selection -->
         <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
         <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
   <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
      </tbody>
   </table>
   </div>
   <div class="main-foot clearfix">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <p class="options" style="font-size: 12px;">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
   </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->
         
<style>
.pun-crumbs p {
display: none;
}
#onlinelist {
display: none;
}
#stats {
background-color: white !important;
}
</style>
         
         
<script type="text/javascript">
        <a href="http://<![CDATA[" target="_blank" rel="nofollow">http://<![CDATA[</a>
    /***
    * Copyright (c) 2013 JScript <jscriptbrasil at live.com>
    * This work is free. You can redistribute it and/or modify it
    * under the terms of the WTFPL, Version 2
    *
    * For more information, go to the home page:
    * http://punbb.forumeiros.com/forum
    */
        var replies_value = 9;
        var target = $('td.tc2');
     
        target.each(function(index){
            var oThis = $(this);
            var replies = oThis.children('strong[data-id="replies"]').text();
            if (replies > replies_value) {
                oThis.children('span[data-id="hot_topic"]').show();
            }
        });
        <a href="http://]]>" target="_blank" rel="nofollow">http://]]></a>
    </script>
<style>
.ipsBadge {
    border-radius: 4px 4px 4px 4px;
    color: rgb(255, 255, 255);
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    height: 15px;
    line-height: 15px;
    padding: 0px 5px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-right: 10px;
}
    .ipsBadge_orange {
      background: none repeat scroll 0 0 #ED7710;
    }
</style>

This is an shorter way without using the template editing

Code:

$(document).ready(function(){$('.tcl strong:contains("Sticky")').each(function(){$(this).css({'css here',})})});

[ic]Sticky[/ic] change it in your language if your forums in not on english and just copy paste for announcements in next line and so on.
[ic]css here[/ic] change with css which you want to have and separate it with commas for example [ic]'display':'inline-block','font-size':'9px'[/ic] and so on.

this code

Code:

<!-- BEGIN topics_list_box -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<th colspan="3" align="center" nowrap="nowrap">Njoftim !</th>
</tr>
</tbody>
</table>
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
         var all_checked = true;
         for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
         }
         }
         document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }
      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
         for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
         }
         }
      }
      </script>
   <!-- END multi_selection -->

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
          <h1 class="page-title"><span class="filterb">Rregullat ({topics_list_box.row.COUNT_TOTAL_TOPICS})</span></h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">&nbsp;</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
<!-- END header_table -->

<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->
   <!-- BEGIN table_sticky -->
      </tbody>
   </table>
   </div>

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /   >
      <!-- END multi_selection -->
                  <h1><span class="filterb">Temat ({topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS})</span></h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">&nbsp;</th>
            <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
   <!-- END table_sticky -->
      <tr>
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <span class="status">
               <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </span>
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
            <!-- END single_selection -->
                          <span style="margin-left: -13px;">{topics_list_box.row.TOPIC_TYPE}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="margin-left: -7px;"><h2 class="topic-title" style="font-weight: normal !important; margin-left: -13px;"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>&nbsp;
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}&nbsp;
                                  <br/><p style="color: #a4a4a4; margin-left: -13px;">Started {topics_list_box.row.L_BY} <span class="authooor">{topics_list_box.row.TOPIC_AUTHOR}</span></p></span>
            <!-- BEGIN switch_description -->
            <br />
            &nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
         </td>
                  <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->" style="text-align: right; padding-right: 5px; color: #777 !important;">{topics_list_box.row.REPLIES} replies<br/>
                  {topics_list_box.row.VIEWS} views</td>
                  <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><p style="margin-top: 8px;">{topics_list_box.row.LAST_POST_AUTHOR}<br/>{topics_list_box.row.LAST_POST_TIME}</p></td>
         <!-- BEGIN multi_selection -->
         <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
         <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
   <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
      </tbody>
   </table>
   </div>
   <div class="main-foot clearfix">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <p class="options" style="font-size: 12px;">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
   </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->
         
<style>
.pun-crumbs p {
display: none;
}
#onlinelist {
display: none;
}
#stats {
background-color: white !important;
}
</style>