How to change sidebar width?

Authoring Twine
1

I know this is probably a really silly question, but I can’t seem to find the answer to it anywhere and I’ve messed around with numbers in the stylesheet but I just can’t change the width of the sidebar. Which numbers in the stylesheet am I supposed to change? Here’s what I’ve got at the moment:

#ui-bar-history [id|=history],#ui-bar-toggle{font-size:1.2em;line-height:inherit;color:#000000;background-color:transparent;border:0px solid #000000}#ui-bar-toggle{display:block;position:absolute;top:0;right:0;border-right:none;padding:.3em .40em .25em}#ui-bar.stowed #ui-bar-toggle{padding:.3em .30em .25em .40em}#ui-bar-toggle:hover{background-color:#000000;border-color:#000000}#ui-bar-history{margin:0 auto}#ui-bar-history [id|=history]{padding:.2em .30em .35em}#ui-bar-history #history-jumpto{padding:.2em .650em .35em}#ui-bar-history [id|=history]:not(:first-child){margin-left:1em}#ui-bar-history [id|=history]:hover{background-color:#000000;border-color:#000000}#ui-bar-history [id|=history]:disabled{color:#808080;background-color:transparent;border-color:#000000}#ui-bar-body{line-height:1.5;overflow:auto}#ui-bar-body>:not(:first-child){margin-top:2em}#story-title{margin:0;font-size:162.5%}#story-author{margin-top:2em;font-weight:700}#menu ul{margin:1em 0 0;padding:0;list-style:none;border:0px solid #000000}#menu ul:empty{display:none}#menu li{margin:0}#menu li:not(:first-child){border-top:0px solid #000000}#menu li a{display:block;padding:.25em .75em;border:0px solid transparent;color:#000000;text-transform:uppercase}#menu li a:hover{background-color:#000000;border-color:#eee}#menu a,#ui-bar-history [id|=history],#ui-bar-toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#menu-core li[id|=menu-item] a:before,#ui-bar-history [id|=history],#ui-bar-toggle:before{font-family:tme-fa-icons!important;font-style:normal;font-weight:800;font-variant:normal;line-height:1;speak:never;text-rendering:auto;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:000000}#ui-bar-toggle:before{content:"\e81d"}#ui-bar.stowed #ui-bar-a:before{content:"\e82b\00a0"}#menu-item-settings a:before{content:"\e82d\00a0"}#menu-item-restart a:before{content:"\e82c\00a0"}#menu-item-share a:before{content:"\e82f\00a0"}

#menu-item-settings {
	display: none;
}

#ui-bar-tray {
	position: absolute;
	top: 0.1em;
	left: 0;
	right: 0;
}

#ui-bar {
	background-color: #24170b;
	color: #808080;
	font-family: Futura, sans-serif;
}
#ui-bar-history [id|=history], #ui-bar-toggle {
    color: #808080;
}
#menu li a {
    color: #808080;
}

body {
background-color:  #404040;
color: #808080;
font-family: Futura, sans-serif;
font-size: 120%;
}

a {
color: #808080;
}
a:hover {
color: #808080;
text-decoration: underline;
border-bottom: 1px solid #808080;
}

/* Bottom Bar styling - Start */
#bottombar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 75%;
	background-color: #000000;
	border-top: 0px solid #000000;
	box-shadow: 0 0 0px 0 #000000;
	z-index: 40;
}
#bbblock {
	margin-left: 15em;
	margin-right: 2em;
	-o-transition: margin .1s ease-in;
    transition: margin .1s ease-in;
}
#bbtext {
	text-align: center;
    max-width: 45em;
    margin: 0 auto;
}
#ui-bar.stowed~#story #bbblock {
	margin-left: 2em;
}
@media screen and (max-width: 1130px) {
	#bbblock {
		margin-left: 13em;
		margin-right: 1em;
	}
	#ui-bar.stowed~#story #bbblock {
		margin-left: 3.5em;
	}
}
@media screen and (max-width: 763px) {
	#bbblock {
		margin-left: 3em;
	}
}
/* Bottom Bar styling - End */

#topbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 75%;
	background-color: #000000;
	border-top: 0px solid #000000;
	box-shadow: 0 0 0px 0 #000000;
	z-index: 40;
}
/* Used to align label for volume slider */
input[type=range] {
	vertical-align: middle;
}

.hide { display: none; }
.fadein {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
}
@keyframes fadeInOpacity {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.--macro-ctp-hidden {
	display: none;
}

.--macro-ctp-t8n {
	animation: macro-ctp-t8n 400ms ease-in;
}

@keyframes macro-ctp-t8n {
	from { opacity: 0; }
	to { opacity: 1; }
}

input[type=range] {
  width: 75%;
  margin: 8px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #7471a9;
  border: 5px solid #010101;
  width: 75%;
  height: 0px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -10px;
  width: 6px;
  height: 20px;
  background: #000000;
  border: 0.3px solid #ffffff;
  border-radius: 1px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #8481b3;
}
input[type=range]::-moz-range-track {
  background: #7471a9;
  border: 5px solid #010101;
  width: 75%;
  height: 0px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 8px;
  height: 20px;
  background: #000000;
  border: 0.3px solid #ffffff;
  border-radius: 1px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 10px 0;
  color: transparent;
  width: 75%;
  height: 0px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #64619f;
  border: 5px solid #010101;
}
input[type=range]::-ms-fill-upper {
  background: #7471a9;
  border: 5px solid #010101;
}
input[type=range]::-ms-thumb {
  width: 7px;
  height: 20px;
  background: #000000;
  border: 0.3px solid #ffffff;
  border-radius: 1px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: #7471a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #8481b3;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}
input[type=range] {
  width: 100%;
  margin: 10px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #7471a9;
  border: 5px solid #010101;
  width: 100%;
  height: 0px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -15px;
  width: 8px;
  height: 20px;
  background: #000000;
  border: 0.3px solid #ffffff;
  border-radius: 1px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #8481b3;
}
input[type=range]::-moz-range-track {
  background: #7471a9;
  border: 5px solid #010101;
  width: 100%;
  height: 0px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 8px;
  height: 20px;
  background: #000000;
  border: 0.3px solid #ffffff;
  border-radius: 1px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 10px 0;
  color: transparent;
  width: 100%;
  height: 0px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #64619f;
  border: 5px solid #010101;
}
input[type=range]::-ms-fill-upper {
  background: #7471a9;
  border: 5px solid #010101;
}
input[type=range]::-ms-thumb {
  width: 8px;
  height: 20px;
  background: #000000;
  border: 0.3px solid #ffffff;
  border-radius: 1px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: #7471a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #8481b3;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}

.say {
    border: 0px solid #24170b;
    overflow: auto;
}

.say > img {
    max-width: 20%;
    float: left;
    margin-right: 1em;
}

.say > p:first-of-type {
    font-weight: bold;
    margin: 0.2em 0;
    border-bottom: 0px solid #24170b;
}

.say > p:last-of-type {
    padding: 0.5em;
    margin: 0;
}
2

I am assuming you are using the built-in interface (no StoryInterface passage) of SugarCube:

This is the element you want to target with width: [size]

If you are not sure what element to target when changing the interface, you can open the Inspect Tool of your browser, which will help you see what affect what…

Note: #story also has a rule linked to whether the sidebar is stowed or not.
You can find the built-in stylesheets for SugarCube in the documentation.

3

I can’t find width: [size] anywhere in my stylesheet (I copied it into wordpad and used the search), where abouts do I add it?

4

oh, width is a CSS rule you attach to an element. the [size] is what you need to indicate. Put all together:

#ui-bar {
     width: 20em;
}
5

Thanks, it works now.