Category Questions

Any way to make separate categories separate colors? What about in the Latest Topics widget, can the latest topics be color-coded by category, or can you do the latest topic widget for each category? Basically, I have two main categories, one male, one female, and people would like to be able to tell in the Latest Topics which category the post was in as just the title can be a bit ambiguous.

Thanks
txsoccer.net

Maybe this will help:  https://help.forumotion.com/t129060-widget-recent-topics-of-a-specific-sub-forum?highlight=widget

That is close, but I was hoping to do a whole category including multiple forums underneath.

t = topic

f = forum

c = catogery

Code:

jQuery(document).ready(function(){jQuery("#newsareal1").load("/f1-the-health-of-your-cat div.topictitle:lt(11)");});

Change the part after .load

@SLGray what he's asking is a bit more complex than that.

I'm not sure it would be possible using that tutorial with a more complex javascript, but anyway in this case it's easier to use the real Recent topics widget instead.

@txsoccer Here's how:
First edit your template mod_recent_topics.
AP  Display  Templates  Portal  mod_recent_topics

Replace it enterely to this code and save the changes (click the  button):

Code:

<div class="module">
   <div class="h3"><i class="ion-chatbubble-working"></i>{L_RECENT_TOPICS}</div>

<!-- BEGIN scrolling_row -->
   {MARQUEE_JS_SRC}
   <div id="comments_scroll_div">
   <div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
          <table summary="Most Recent Topics">
            <tbody>
      <!-- BEGIN recent_topic_row -->
                    <tr>
                      <td style="display:block;">
         <a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}" class="topictitle mod-recent-title">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a>
                      </td>
                      <td style="display:block;">
         <span class="mod-recent-time">{scrolling_row.recent_topic_row.S_POSTTIME}</span>
                      </td>
            <td style="display:block;">
         <span class="mod-recent-author">
                            <!-- BEGIN switch_poster -->
                                    <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a>
                            <!-- END switch_poster -->
                            <!-- BEGIN switch_poster_guest -->
                                    {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
                            <!-- END switch_poster_guest -->
         </span>
                      </td>
                    </tr>
      <!-- END recent_topic_row -->
            </tbody>
          </table>
   </div>
   <script>$(".marquee").marquee();</script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
   <div class="mod-recent-row">
          <table summary="Most Recent Topics">
            <tbody>
      <!-- BEGIN recent_topic_row -->
                    <tr>
                      <td style="display:block;">
                        <a href="{classical_row.recent_topic_row.U_TITLE}" class="topictitle mod-recent-title">{classical_row.recent_topic_row.L_TITLE}</a>
                      </td>
                      <td style="display:block;">
                        <span class="mod-recent-time">{classical_row.recent_topic_row.S_POSTTIME}</span>
                      </td>
            <td style="display:block;">
                        <span class="mod-recent-author">
            <!-- BEGIN switch_poster -->
               <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
            <!-- END switch_poster -->
            <!-- BEGIN switch_poster_guest -->
               {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
            <!-- END switch_poster_guest -->
         </span>
                      </td>
                    </tr>
      <!-- END recent_topic_row -->
            </tbody>
          </table>
   </div>
<!-- END classical_row -->
</div>

After that, insert this javascript:
AP  Modules  Javascript codes management  Create a new Javascript

Code:

$(function() {
  (function($) {
    $.assyncForHash = function(h, callback) {
        for (i in h) {
          var boundCallback = callback.bind(null, i, h[i]);
          setTimeout(boundCallback, i);
        }
        return this;
    };
  }(jQuery));
 
  var forums = {
    scripts: "/f1-scripts",
    graphics: "/f2-graphics"
  };
  $('.mod-recent-row tr').filter(function(){
    var current = this;
    var last_topic = $('.topictitle.mod-recent-title', current)[0].innerText;
    $.assyncForHash(forums, function(index, content) {
      $.get(content, function(d){
        var forum_topics = $('.topic-title-container', d);
        for (j in forum_topics){
          if (!forum_topics[j]) continue;
          if (forum_topics[j].innerText == last_topic){
            $(current).addClass(index);
            break;
          }
        }
      });
    });
  });
});

Name: Recent Topics Format
Placement: In all the pages

Search this part of the script and change there the different forum fields (in your case male/female) and the link of that forum:

Code:   var forums = {     scripts: "/f1-scripts",     graphics: "/f2-graphics"   };

After that you only have to set format to the new class using CSS.
AP  Display  Colors  CSS Stylesheet

There for example I used this:

Code:

.mod-recent-row tr.scripts {
  background: #7eaf65;
}
.mod-recent-row tr.graphics {
  background: #aaa;
}

Result:

Instead of tr.scripts and tr.graphics use your forum fields tr.male and tr.female

This looks really close Wecoc to what I am needing. A few questions, you have scripts pointing to f1-scripts and graphics to f2-graphics. If I am trying to do whole categories (In my girls category I have 27 sub forums and 17 in boys) I also have a general category with 5 forums. Can this code be altered so all 3 are color coded in the recent topics. Something like

Code:

var forums = {
  general: "/c1-general",
  girls: "/c2-girls",
  boys: "/c3-boys"
  };

or do I have to add multiple forums like

girls: "/f2-general-girls-discussion ", "/f33-girs-highschool", "/f22-girls-da", and so on

Sorry, that Javascript was meant for forums and subforums, not for categories.
You can use this other Javascript instead to work with categories. The idea is the same, but the code is a bit messy, I hope it will work anyway...

Code:

$(function() {
(function($) {
 $.assyncForHash = function(h, callback) {
    for (i in h) {
      var boundCallback = callback.bind(null, i, h[i]);
      setTimeout(boundCallback, i);
    }
    return this;
 };
}(jQuery));

/* Get the categories: BOYS & GIRLS from the homepage */
var categories = {
  boys: 'Boys Soccer',
  girls: 'Girls Soccer'
};
var cat_div = {};
$.get(window.location.origin, function(home){
  $('.forabg', home).filter(function(){
    var cat = $('.header .dterm', this)[0];
    for (i in categories) {
      if (categories[i] == cat.innerText){
        cat_div[i] = this;
      }
    }
  });
}).done(function(){
  /* For each forum of those categories get the inside topics names */
  var cat_topics = [];
  $.assyncForHash(cat_div, function(index, content) {
    $('a.forumtitle', content).filter(function(){
      $.get(this.href, function(d){
        var container = $('.topic-title-container', d);
        var arr = [];
        container.filter(function(){ arr.push(this.innerText); });
        cat_topics.push([arr, index]);
      });
    });
  });
  setTimeout(function(){
    /* Compare each topic in the widget with the data obtained before */
    $('.mod-recent-row tr').filter(function(){
      var current = this;
      var last_topic = $('.topictitle.mod-recent-title', current)[0].innerText;
      for (i = 0; (i < cat_topics.length); i++){
        var arr = cat_topics[i][0];
        if (arr.includes(last_topic)){
          $(current).addClass(cat_topics[i][1]);
        }
      }
    });
  }, 500);
});
});

Everything else (template edit and CSS edit) is the same.
Also in the Javascript now you don't define the link but the category name, which I believe I already configured it properly in your case.

Code: var categories = {   boys: 'Boys Soccer',   girls: 'Girls Soccer' };

I will cross fingers.

Something didn't go right. Where I had the widget now I have code, lol

Probably you insterted the javascript in the wrong place.
Here's the step by step.

1 - Change the Template mod_recent_topics

AP  Display  Templates  Portal  mod_recent_topics
The new content will be the first code I posted.

After that click on the  button.
Once you did that the title mod_recent_topics of that table should be green, which means it's well updated.

2 - Insert a new Javascript

AP  Modules  Javascript codes management  Create a new Javascript
That will be the last code I posted.
Make sure Placement is 'In all the pages'.

3 - Insert CSS format

AP  Display  Colors  CSS Stylesheet
In the very end of the CSS code of your page (which may or may not be empty for now) add everything you need to make the new classes unique.
You are free to set the format you want, in the example above I simply colored the background of the row but you could add other effects, change the font color of the link, etc.
You could apply format on the ones which are not BOYS / GIRLS categories too... This is the most free and easy part once you got the Template and Javacript working.

Here's an example with blue/pink background and rounded borders.

Code:

.mod-recent-row tr.boys {
  background: #89c8e3;
  border-radius: 3px;
}
.mod-recent-row tr.girls {
  background: #eeb2ee;
  border-radius: 3px;
}

OK, it looks like it is getting closer. Now there are a few girls posts with the pink background, no boys have blue background. When I refresh the page, sometimes 2 of the girls recent posts have the pink background, sometimes 3, sometimes none. Kinda odd how it is picking up some, but not others.