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

**URL:** https://meta.discourse.org/t/plugin-with-sidebar-how-to-modify-small-width-medium-width-large-width/57801
**Category:** Development
**Created:** [February 22, 2017, 5:42pm UTC](https://meta.discourse.org/t/plugin-with-sidebar-how-to-modify-small-width-medium-width-large-width/57801 "2017-02-22T17:42:25Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![jack2](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@jack2](https://meta.discourse.org/u/jack2)
#### Post date: [February 22, 2017, 5:42pm UTC](https://meta.discourse.org/t/plugin-with-sidebar-how-to-modify-small-width-medium-width-large-width/57801/1 "2017-02-22T17:42:25Z")

</div>

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…

---

<div class="post-metadata">

### Author: ![jack2](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@jack2](https://meta.discourse.org/u/jack2)
#### Post date: [February 23, 2017, 3:31pm UTC](https://meta.discourse.org/t/plugin-with-sidebar-how-to-modify-small-width-medium-width-large-width/57801/2 "2017-02-23T15:31:41Z")

</div>

My current understanding is:

- Values I need to change are in the 3 first mixins of file [mixins.scss](https://github.com/discourse/discourse/blob/5dbd6a304bed5400be481d71061d3e3ebb4d6785/app/assets/stylesheets/common/foundation/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?

---

<div class="post-metadata">

### Author: ![mikechristopher](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikechristopher/32/89135_2.png) [@mikechristopher](https://meta.discourse.org/u/mikechristopher)
#### Post date: [February 23, 2017, 4:07pm UTC](https://meta.discourse.org/t/plugin-with-sidebar-how-to-modify-small-width-medium-width-large-width/57801/3 "2017-02-23T16:07:40Z")

</div>

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

> [@Discourse Sidebar Blocks](https://meta.discourse.org/t/discourse-sidebar-blocks/51457):
>
> warning This plugin is now deprecated. Please use the [Right Sidebar Blocks](https://meta.discourse.org/t/right-sidebar-blocks/231067) theme component instead. 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 se…

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

---

<div class="post-metadata">

### Author: ![jack2](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@jack2](https://meta.discourse.org/u/jack2)
#### Post date: [February 23, 2017, 4:12pm UTC](https://meta.discourse.org/t/plugin-with-sidebar-how-to-modify-small-width-medium-width-large-width/57801/4 "2017-02-23T16:12:56Z")

</div>

Thanks @mikechristopher.

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

> [@Layouts Plugin](https://meta.discourse.org/t/custom-layouts-plugin/55208):
>
> This plugin is a framework for custom Discourse layouts. Its main use case is adding sidebars to Discourse. Desktop Mobile (closed) Mobile (open)desktop_computer[Get the code](https://github.com/paviliondev/discourse-layouts)page_facing_up [Read the documentation](https://coop.pavilion.tech/c/documentation/discourse-layouts/92)bug [Report a bug](https://coop.pavilion.tech/w/bug-report)Quick Links [The advantages of the Layouts Plugin](https://coop.pavilion.tech/t/using-the-layouts-plugin/1737)[Installation and Setup](https://coop.pavilion.tech/t/installation-and-setup/1606)[Widget Development](https://coop.pavilion.tech/t/widget-development/1618)wave Before you post in this …

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

---

<div class="post-metadata">

### Author: ![jack2](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@jack2](https://meta.discourse.org/u/jack2)
#### Post date: [February 23, 2017, 4:19pm UTC](https://meta.discourse.org/t/plugin-with-sidebar-how-to-modify-small-width-medium-width-large-width/57801/5 "2017-02-23T16:19:40Z")

</div>

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)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 23, 2017, 4:23pm UTC](https://meta.discourse.org/t/plugin-with-sidebar-how-to-modify-small-width-medium-width-large-width/57801/6 "2017-02-23T16:23:13Z")

</div>

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 */
  }

```

---

<div class="post-metadata">

### Author: ![jack2](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@jack2](https://meta.discourse.org/u/jack2)
#### Post date: [February 23, 2017, 7:30pm UTC](https://meta.discourse.org/t/plugin-with-sidebar-how-to-modify-small-width-medium-width-large-width/57801/7 "2017-02-23T19:30:04Z")

</div>

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.
