How can you change the default width of semantic-ui sidebars?

Question

Semantic-ui sidebars are 275px wide. Where should I add the css/js which makes them wider or narrower?

Their code is

.ui.sidebar {
   width: 275px!important;
   margin-left: -275px!important;
}

If I modify this, then the change is global for all the sidebars. If I change their content's width, semantic-ui ignores my change and overrides it with the default 275px.

You can find the sidebar example here: http://semantic-ui.com/modules/sidebar.html#/examples

Answer 1

One way to do it is to just add a new class:

.ui.custom.sidebar {
  width: 315px !important;
  margin-left: -315px !important;
}

.ui.active.custom.sidebar {
  margin-left: 0px !important;
}

.ui.active.right.custom.sidebar {
  margin-left: -315px !important;
}