Current date/time is Mon Dec 10, 2018 8:58 am

Search found 1 match for FF4000

JavaScript issue

Hi @udarsha45,
Yes, there is a small trick, Wink I was found a similar template from another IPB based skin to test it.

Try to replace your skin's topics_list_box with the below:

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">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
   </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="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 -->
      <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <tbody class="statused">
   <!-- END table_sticky -->
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                                <span class="stats">
               <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 -->
            {topics_list_box.row.ICON}&nbsp;
            {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
            {topics_list_box.row.TOPIC_TYPE}&nbsp;
            <h2 class="topic-title"><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;
                 {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}, {topics_list_box.row.FIRST_POST_TIME}
            <!-- BEGIN switch_description -->
            <br />
            &nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
         </td>
                  <td class="tc2"></td>
                  <td class="tc3 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{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 -->">{topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR}<br />{topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.LAST_POST_IMG}</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="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>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->


then save and publish the template.

Now we will fix the javascript to have three different colors, replace your javascript with the code below:

Code:
        $(document).ready(function(){$('.statused tr:contains(Global announcement)').each(function(){$(this).css({'color':'#fff','background':'url("http://i57.servimg.com/u/f57/17/68/86/50/stk1010.png") repeat-x 0 -1px #FF0000','border-radius':'3px 3px 3px 3px','display':'inline-block','font-size':'9px','font-weight':'bold','height':'16px','line-height':'16px','padding':'0 5px','text-shadow':'0 -1px 0 rgba(0, 0, 0, 0.2)','text-transform':'uppercase','vertical-align':'middle',})})});
        $(document).ready(function(){$('.statused tr:contains(Sticky)').each(function(){$(this).css({'color':'#fff','background':'url("http://i57.servimg.com/u/f57/17/68/86/50/stk1010.png") repeat-x 0 -1px #7BA60D','border-radius':'3px 3px 3px 3px','display':'inline-block','font-size':'9px','font-weight':'bold','height':'16px','line-height':'16px','padding':'0 5px','text-shadow':'0 -1px 0 rgba(0, 0, 0, 0.2)','text-transform':'uppercase','vertical-align':'middle',})})});
        $(document).ready(function(){$('.statused tr:contains(Announcement)').each(function(){$(this).css({'color':'#fff','background':'url("http://i57.servimg.com/u/f57/17/68/86/50/stk1010.png") repeat-x 0 -1px #FF4000','border-radius':'3px 3px 3px 3px','display':'inline-block','font-size':'9px','font-weight':'bold','height':'16px','line-height':'16px','padding':'0 5px','text-shadow':'0 -1px 0 rgba(0, 0, 0, 0.2)','text-transform':'uppercase','vertical-align':'middle',})})});


Then press submit.

Now you will have the below colors for each critical topic categories:
1. Red color (#FF0000) for Global Announcements
2. Orange color (#FF4000) for Announcments and
3. Green color (#7BA60D) for Stickies

You can locate this background colors in javascript and customize them as you wish. Wink
by Van-Helsing
on Tue Nov 21, 2017 1:51 pm
 
Search in: Scripts Problems Archives
Topic: JavaScript issue
Replies: 19
Views: 701

Back to top

Jump to: