Discourse Tag Sidebars

theme-component
(Kris) #1

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

Want sidebars for categories? Check out Discourse Category Sidebars.

:eye: Preview it on theme creator - (navigate to the art tag)

:hammer_and_wrench: Github repo: https://github.com/awesomerobot/discourse-tag-sidebars

:thinking: How do I install a Theme or Theme Component?

What can I do with this theme component?

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

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

How do I configure it?

Simply insert the tag name and the id of the topic (e.g. example.com/t/example-topic/57)

I recommend creating sidebar topics in their respective tags, 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 area.

Custom CSS

Each tag sidebar is wrapped with a class that contains the tag name, so for the test tag that would be .tag-sidebar-test. You can use these classes 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.

24 Likes
(jrgong) #2

Your sidebar themes are amazing

It would be great to have an option to display a sidebar in a topic based on tags. With multiple tags the divs could be simply stacked on top of each other.

(emilio) #3

minor nit. it seems that external links in the side bar do not follow setting to open in new tab, so they open in same window.

2 Likes
(David Kingham) #4

This is a really cool idea Kris, how hard would it be to move it from the sidebar to the top? I would love to have it where the category description normally goes so it always displays and doesn’t resize the container. I use topic list preview with the tile layout and this makes all the images smaller and wastes space in my case.