Layouts Interoperability

Documentation Discourse Layouts
1

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.

2

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).

image
image886×774 37.3 KB

image
image690×768 32.9 KB

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.

image
image2494×1246 254 KB

3

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.

https://meta.discourse.org/t/blog-post-styling/110841

4

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.

5

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

6

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.

7

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.

8

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

9

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

https://github.com/paviliondev/discourse-layouts/commit/3f7ead84102be4dff3475c1425fcbde981206675

10

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
image

image

11

hm, I’m not seeing any issues with the plugin on try.thepavilion.io, 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)

image

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

12

My site is hub.youthpowercoalition.org. 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.

13

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

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

14

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

15

@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.

https://github.com/paviliondev/discourse-layouts/commit/56c144a20b72545e12f5ab4defcd452ab4cef7b0

16

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

image

17

I’ve been playing with the new https://meta.discourse.org/t/welcome-link-banner/218743 and the more venerable https://meta.discourse.org/t/versatile-banner/109133 and layouts_sidebar_left_position full (as per thepavillion.io) 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?

18

@Nathan

Hmm…

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

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

instead.

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;;
}
19

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?

20

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…