discourse / discourse-topic-list-sidebars

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Discourse Topic List Sidebars

This theme component takes a topic and applies it as a sidebar for a category or tag's topic list. These sidebars are only visible when the browser is 767px or wider (most tablets and monitors).

image

👁️ Preview it on theme creator

🤔 https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682

What can I do with this theme component?

  • Choose a topic and display its content as a sidebar for a category or tag.

  • Set a sidebar to be displayed on the /latest, /new, /unread, and /top pages by using all as the sidebar name in your settings.

  • Choose for the sidebars to appear on the left or the right of the topic list.

  • By default a category's sidebar will also display for all its subcategories unless a subcategory has its own sidebar defined (you can disable this by unchecking the inherit parent sidebar setting).


I recommend creating sidebar topics in their respective categories, closing the topic so there are no replies, and unlisting it (so it doesn't appear in the topic list).

Note that you can not use a topic in a private category as a sidebar in a public category (you can, but users without access to that private topic will just see a blank sidebar!).

Custom CSS

Each sidebar is wrapped with a data attribute that contains the category slug or tag name, so for the staff category that would be [data-category-sidebar="staff"] for a tag named "important" it would be [data-tag-sidebar="important"]. You can use these attributes to style the individual sidebars.

The body tag on pages with sidebars also has a class added so you can use body.custom-sidebar to apply styles on all pages that have a sidebar.


❤️ Special thanks to @xrav3nz for laying the groundwork to make this component possible!

About

License:GNU General Public License v2.0


Languages

Language:JavaScript 79.9%Language:SCSS 19.6%Language:Handlebars 0.5%