0 votes
by (220 points)
Hello there,

This is probably a very simple question, but I'm wondering: How can I change the little arrow button that stows the sidebar? I'd like to replace it with a small square image. (I'm using Twine 2, Sugarcube 2.)

Thanks in advance!

1 Answer

0 votes
by (159k points)
selected by
Best answer

The default look of the toggle 'button' is defined within the CSS related sections of the documentation, in this particular case within the 10. ui-bar.css section. You can use the Web Developer Tools built into modern web-browsers to Inspect the HTML elements that make up the current page to determine which HTML element is involved, and the related CSS selector / rule that is being used to styling that element.

The HTML element you are looking for has an ID of ui-bar-toggle and the two  CSS selectors / rules that you will need to alter are:
1. #ui-bar-toggle:before to remove the Character content being shown when sidebar is un-stowed.
2. #ui-bar.stowed #ui-bar-toggle:before to do the same for the stowed sidebar.
3. #ui-bar-toggle to add a background-image to the button.
4. [optional] #ui-bar.stowed #ui-bar-toggle if you want the stowed sidebar to show a different image.

The resulting CSS would start looking something like the following, and you would place it the the Story Stylesheet area.

#ui-bar-toggle:before, #ui-bar.stowed #ui-bar-toggle:before {
	content: normal;

#ui-bar-toggle {
	background-image: url("square.jpg");

/* Optional */
#ui-bar.stowed #ui-bar-toggle {
	background-image: url("triangle.jpg");

note: obviously the image URL's in your copy of the above CSS would need to reference your image files.

by (220 points)
Hmm, well, that works except that it seems to only show the tiniest (rectangular) sliver of the image. The result is a very tiny rectangle, not the whole black-and-white image. Do I need to resize the image? or give program some more sizing instructions?

Edit: I got it to show half the image by adding background-size: cover; but it's still rectangular even though the image is square. It's also much smaller than the original arrow.
by (159k points)

By default because the #ui-bar-toggle (button) element is just displaying a custom Character it gets it's (width & height) dimensions from:
1. the font-size property
2. the line-height property
3. and the padding property.

Because you are replacing that Character with an image then you will need to either:
1. Make the image the correct dimensions to fill the area you want it to appear in.
2. Give the element a width and a height property to control the size of the button.
3. Use background related CSS properties to adjust how the image appears.
4. A combination of all of the above.

I don't know the dimensions of your image, nor how exactly you want it to appear on the left side-bar, which makes it difficult to suggest a solution.

by (220 points)
The current size of the image is 549x480px, and all I'd really like to do is make this image appear instead of the toggle arrow. Same size (although of course it's not perfectly square) and same position.
by (159k points)

The dimensions of the existing toggle button is roughly 31x31px, based on the roughly 19.2px font size of the button element (default 16px font size multiplied by 1.2em)

You need to downsize your image by a factor of 18 (549 / 30 ~= 18), which would roughly result in an image of 30x26px. Personally I would make it a square of 30x30px.

You could then change the second CSS rule of my previous example to something like.

#ui-bar-toggle {
	background-image: url("square.png");
	width: 31px;
	height: 31px;


by (220 points)
Beautiful, greyelf! Thanks so much for your help!