Is there a way to change the spacing of the sidebar buttons? (Sugarcube 2.21)

Question

I'd like to change the layout of the sidebar buttons so that certain ones are grouped together.

Currently it looks like This

But I would like it to look something more like This

Is this possible?

Answer 1

Based on your first example image I will assume:

1. You have hidden the standard side-bar Save button, possibly using CSS like the following within your project's Story Stylesheet area.

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

2. Your project's StoryMenu special passage looks something like..

[[Inventory]]
[[Endings]]
[[Achievements]]
[[Erase Progress]]

... and it generated a HTML element structure like the following..

<ul id="menu-story">
  <li><a data-passage="Inventory" class="link-internal" tabindex="0">Inventory</a></li>
  <li><a data-passage="Endings" class="link-internal" tabindex="0">Endings</a></li>
  <li><a data-passage="Achievements" class="link-internal" tabindex="0">Achievements</a></li>
  <li><a data-passage="Erase Progress" class="link-internal" tabindex="0">Erase Progress</a></li>
</ul>

 

You can use the CSS margin property to add a gap between two elements, in your case you want this margin (gap) between the 1st & 2nd <li> element and between the 3rd & 4th <li> element. You can do this by using the :first-child CSS pseudo-class and the :nth-child() CSS pseudo-class to target the 1st & 3rd <li> elements, and by using margin-bottom property. The following CSS demostrates how to do this

#menu-story li:first-child, #menu-story li:nth-child(3) {
	margin-bottom: 1em;
}

Unfortunately the above CSS doesn't handle the new issue of how to fix the borders that surround each of the 'buttons', nor does it remove the existing margin (gap) between the Erase Progress and Restart 'buttons'.
The following CSS does all the above.

#menu #menu-story {
	border: 0;
}

#menu-story li:first-child {
	border-top: 1px solid #444;
}

#menu-story li:first-child, #menu-story li:nth-child(3) {
	margin-bottom: 1em;
	border-bottom: 1px solid #444;
}

#menu-story li {
	border-left: 1px solid #444;
	border-right: 1px solid #444;
}

#menu #menu-core {
	margin-top: 0;
}

 

Comments

Oh awesome, thank you very much! That works fantastically. I appreciate the full explanation too, though admittedly I understood about half of it. I've only been using Twine for around 3 weeks so I'm sure I'll come around. Anyways, thanks again!