0 votes
asked 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
answered by (120k 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.

commented 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.
commented by (120k 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.

commented 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.
commented by (120k 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;


commented by (220 points)
Beautiful, greyelf! Thanks so much for your help!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.