4. Style topics differently by category

Style topics differently by category


  • Hi there,

    Is there any way to style topics differently based on the category they belong to? The current page name is appended to the <body> tag as a class, but I can't find a way for the CSS to know anything about a topic's parent category.

    I can solve the issue with a javscript hack by reading the category name from the breadcrumbs, but this seems ... terrible.

    Is there a less terrible way to expose category information to the topic template?

    0
  • Staff Admin

    You can do it with a plugin, listen for the hook filter:middleware.render and add the class you want to the bodyClass string if the user is on a topic page. Here is some code to get you going.

    // this goes in your plugin
myPlugin.onPageRender = function (hookData, callback) {
  // this checks if we are on the topic page
  if (hookData.templateData.template.topic) {
    // add the class `category-<cid>` to bodyClass
    hookData.templateData.bodyClass += ' category-' + hookData.templateData.category.cid;
  }  
  callback(null, hookData);
};

    Hope that helps.

    2

  • fantastic! my codebase is much happier now

    0
Log in to reply
 

Suggested Topics

  • I


    Plugin Development •  

    4
  • D


    Plugin Development •  

    4


  • Plugin Development •  

    6


  • Plugin Development •  

    1
  • B


    Plugin Development •  

    1
| |
Copyright © 2018 NodeBB | Contributors