Suggestion: Add qa-category-<categoryid> along with qa-q-list-item

Question

In qa-base-theme.php body_tags() adds a 'qa-category-<categoryid> in body_tags() function.  If I add a qa-category-<categoryid> class in the css file, then I can see categories in different colours, but only on the category specific page.

My suggestion is to add qa-category-<categoryid> in function q_list_item().  That way all pages (like Questions, Hot, Unanswered) will show each question in different colour based on the category id.

I don't see qa-category-<categoryid> class being used anywhere else and I believe that is the original purpose here.

Answer 1

You can easily add the desired class by overriding the method q_list_item() in your theme:

public function q_list_item($q_item) {
  $categoryids = explode(',', $q_item['raw']['categoryids']);
  $uniqueids   = array_unique($categoryids, SORT_NUMERIC);
  $css_classes = array_map(function($s) {return "qa-category-${s}";}, $uniqueids)
  $q_item['classes'] .= ' ' . join($css_classes, ' ');

  parent::q_list_item($q_item);
}

Comments

Thanx Ansgar.

On my site, I don't see $q_item['raw']['categoryids'].  I do see one category id in $q_item['raw']['categoryid']

BTW, I have changed qa-base-theme.php now.  But that is part of Core and I don't want to make changes here as it'll have issues when I upgrade.

Since I saw qa-category-<categoryid> class being set elsewhere, I thought it would be good to set it here as well.

BTW, here is the change that I've done right now:
+++ qa-theme-base.php   2021-08-17 17:08:37.054631444 +0530
@@ -1668,12 +1668,19 @@

        public function q_list_item($q_item)
        {
+               // Set colour per category
+               if (isset($q_item['raw']['categoryid'])) {
+                       $this->output('<div class="qa-category-' . $q_item['raw']['categoryid'] . '">');
+               }
                $this->output('<div class="qa-q-list-item' . rtrim(' ' . @$q_item['classes']) . '" ' . @$q_item['tags'] . '>');
                $this->q_item_stats($q_item);
                $this->q_item_main($q_item);
                $this->q_item_clear();

                $this->output('</div> <!-- END qa-q-list-item -->', '');
+               if (isset($q_item['raw']['categoryid'])) {
+                       $this->output('</div> <!-- END qa-category-x -->', '');
+               }
        }

---

Like I said: override the method *in your theme*. Modifying core code is not recommended.