Plugin with sidebar: how to modify small-width, medium-width, large-width?

[jack2]

I am working on a plugin that adds a sidebar to discourse. Because of this sidebar, the width of the topic list is reduced.

The consequence is that the small-width, medium-width and large-width media queries are now wrong. For example, I need to trigger the small-width below 900px instead of 800px, for all elements except the header.

How can I do that? I have tried to override the scss variables and mixins with register_asset "stylesheets/mixins.scss", but it doesn’t work…

[jack2]

My current understanding is:

• Values I need to change are in the 3 first mixins of file mixins.scss.
• But those values are hardcoded in the mixins.
• Because there is no !default mechanism for mixins (like there is for variables), whenever I provide my own mixins with same names, they are overwritten by discourse’s ones. So that is not the way to go.
• I then tried to replace the full mixins.scss file with my own modified one, hoping the file replacement mechanism used for templates would also work for scss (putting a file with the same name in the same folder hierarchy). But it seems it doesn’t…

Anyone on this?

[mikechristopher]

you do know there are other sidebar plugins out there dont you - for example

Discourse Sidebar Blocks

This plugin shows a list of blocks as a sidebar on all discovery list pages (latest, new, unread, categories but not on the single topic page). The available blocks at this point (Oct. 12 2016) are the following: multiple category posts (6 items max per category) latest replies (5 items) a custom html block Blocks can be ordered in the plugin settings. Speaking of which, there are these settings under Admin > Settings > Plugins: sidebar enable enables the display of the sidebar sidebar bl…

Might be worth looking at how they do it - if you want to create your own that is.

[jack2]

Thanks @mikechristopher.

I think the most interesting thread about sidebars (listing several plugins, including the one you mention), is:

Custom Layouts Plugin

This plugin is a framework for custom Discourse layouts. It’s main use case is adding sidebars to Discourse. You can see it in action on our site thepavilion.io. Our left hand sidebar, and our mobile menu is managed by this plugin. Desktop (scroll right for mobile) Mobile (closed) Mobile (open) [Screen Shot 2020-07-27 at 10.37.25 PM] [Screen Shot 2020-07-27 at 10.27.12 PM] [Screen Shot 2020-07-27 at 10.28.03 PM] Get the code Read the documentatio…

I have been through some of those plugins, but it seems they don’t resize correctly.

[jack2]

Discourse team, do you confirm there is currently no way to override, let’s say, the 850px small screen limit? (I see it hardcoded in 3 files)

[pmusaraj (Penar Musaraj)]

You can just write CSS that is more specific than what’s in the core Discourse scss files and it will take precedence. That is, you don’t need to override anything in core to add your own css to either the plugin or the site customizations.

Further, you don’t need to use the core mixins. If you need to add css for, say, browsers smaller than 500px, you can use this:

  @media all and (max-width: 500px) {
     /* css here */
  }

[jack2]

Thanks @pmusaraj. Of course I can override all styles that depend on small-width, medium-width and large-width. But it is a lot of work and it might cause maintenance issues when there will be a new Discourse version. For now I think my best option is to modify my Discourse instance.