Layouts Interoperability

This topic is for the interoperability of the layouts plugin with any other customisation. Please post any interoperability questions here. Unless otherwise noted, interoperability is handled via adding CSS to your theme or a seperate theme component.

Discourse Kanban

Add this to a theme or theme component

div.discourse-kanban {
  margin-left: initial;
  left: initial;
  width: 100%;

.discourse-kanban-container div.kanban-spacer {
  width: 50px;
  min-width: initial;

Discourse Category Banners

Set the layouts sidebar left position and / or layouts sidebar right position site settings to “sticky” if you’re using the Category Banners theme component.

This is such an elegant solution. Thank you! My question is, is it possible for the CSS to still allow the Kanban Board to extend all the way to the right of the screen? See the difference between the Light theme (where I added the CSS) and the Dark theme (where I didn’t).

My other thought was, perhaps another solution is to have Layouts start next to the Topic list as opposed to just under the banner. See where the red arrow is pointing below.

Blog Post Styling Interoperability

I noticed that when Layouts in enabled in a category that uses Blog Post Styling, the Blog Post Styling no longer applies. I’d love to be able to exclude Layouts from showing up on our Blog category.

UPDATE: I found a temporary solution. I changed the settings on the Discourse Kanban component to show 4 columns instead of 3 and that helps because now we can still see more columns when adding the CSS that you provided without sacrificing the overlap that happens with Layouts.

Thanks for the update there and sorry for my slow response. Let me know if you run into any other issues.

Thanks @angus! What I haven’t been able to figure out yet is the Blog Post Styling Interoperability question. How can I disable Layouts for one specific category in which we use the Blog Post Styling Interoperability component? I know that there’s the ability to choose which categories to display Layouts in, but I’m looking for the opposite functionality.

That should be possible via CSS, but I’ll have to get back to you on that early next week, as I’m a bit snowed over this week.

This topic was automatically closed after 4 days. New replies are no longer allowed.

@debryc I’ve added a setting to the plugin to allow widgets to be excluded from specific categories. Let me know how that goes

Thank you so much! The bad news is that once I updated everything, Layouts doesn’t show up on my site at all now.

I tried

  • Signing in and out
  • Using a different browser
  • Disabling then enabling Layouts…

Discourse and all plug-ins are fully up-to-date.
Layout widgets are all up-to-date.

Screenshot of settings


hm, I’m not seeing any issues with the plugin on, which is running the latest version of the plugin and discourse. I’ve set the “Custom Wizard” category on that site to be both included and excluded and that’s working as expected (i.e. it’s excluded)


Could you link me to your site? I’ll take a closer look.

My site is Interestingly enough, once in a while Layouts DOES show but with no admin changes made in between. Then the next time I go to the site Layouts disappears again.

:man_facepalming: I made a silly mistake in another new feature. Sorry about that.

If you update again now, it should work as normal.

3 posts were split to a new topic: Excluded category not appearing in sidebar

@debryc Technically, this is an incompatibility issue between the plugin and the DiscoTOC theme component, not a bug. I understand that that kind of distinction is almost impossible to know if you’re not familiar with the software, so I definitely don’t begrudge these great reports! :slight_smile:

I am going to file this one slightly differently though, so I hope you won’t mind that I’ve updated your post. I’ve also addressed it, so when you update the plugin it should be resolved.

DiscoTOC causes an aligntment issue if the left sidebar is sufficiently wide.


I’ve been playing with the new and the more venerable and layouts_sidebar_left_position full (as per and unfortunately they aren’t compatible.

They seem to escape the right shift of the other page content by being in the header or something.

A workaround is to have: :ballot_box_with_check: layouts_sidebar_left_default_minimized

Can you suggest a CSS tweak for them, or maybe some way to have the sidebar minimise automagically if it is likely to clash with a banner?



You could fork the plugin and make it be displayed using the plugin outlet:

{{plugin-outlet name="above-layouts-main-content"}}


Or as for CSS tweaks, something like the following seems to work:

.welcome-link-banner-wrapper {
  margin-left: calc(var(--mainLeftOffset) - 1.4rem);

.layouts-sidebar-minimized .welcome-link-banner-wrapper {
  margin-left: 0;;

I’ll go the CSS option! Much less scary.

Works perfectly for the expanded state - thank you!!!

However the minimized state I still get an overlap at times with a margin of 0. With this it looks good:

.layouts-sidebar-minimized .welcome-link-banner-wrapper {
  margin-left: 5.4rem;

Is there a smarter way to do that dynamically like the expanded state?

Hmm, nothing I can think of off the top of my head. The width when collapsed is set to max-content so theres no defined width in pixels nor is there any set in a variable like there with the expanded state…