+6 votes
by (260 points)
Using SugarCube2 in 1.x

Can I change the colour/shape of individual/all <<button>> macros?

4 Answers

+4 votes
by (2.5k points)
selected by
 
Best answer

This might affect more than you want it to, but you could create a passage tagged "stylesheet" that has CSS like this:

#passages button {
  background: red;
}

Not sure about shape -- it'd have to be rectangular, at least. If you want rounded corners, you could write:

#passages button {
  background: red;
  border-radius: 8px;
}

 

by (260 points)
Nice! Thank you!

I tried putting 'text-color: red;' but that didn't work. How would I change the colour of the text?

Uh - just put 'color'! :D

Now how do I delete this dumb comment?
by (2.5k points)
Just use color, not text-color.
by (2.5k points)
No worries! I think it's better to leave this note in for future readers.
+1 vote
by (220 points)

In case this is helpful, I'm going to add what I've added to my own project. I wanted to change all the default Sugarcube buttons, and used images made in photoshop to make them look a little more rugged. There is a separate image for the hover section to make it look like the button is being pressed. 

This is what I have in a stylesheet tagged passage. Disclaimer though, this will also alter the appearance of the default UI buttons like in the save menu, sidebar toggle, etc. 

button {
	cursor: pointer;
	color: 	#00FF00;
	background-image: url(images/ui/button.png);
	background-size: 100% 100%;
	border: 1px solid #ffffff;
	line-height: normal;
	padding: 0.4em;
	transition-duration: 200ms;
	user-select: none;
	border-width: 2px;
	border-radius: 3px;
	border-color: #000000;
}
button:hover {
	color: 	#00FF00;
	background-image: url(images/ui/button_hover.png);
	background-size: 100% 100%;
	border-color: #000000;
	border-width: 2px;
	border-radius: 3px;
}

 

+4 votes
by (67.7k points)

If you want to alter all <<button>> macros everywhere, but only them, use:

.macro-button {
	/* style properties */
}

If you want to alter all <button> elements within the main passage display area, created by <<button>> or not, use:

#passages button {
	/* style properties */
}

If you want to alter all <button> elements everywhere, use:

button {
	/* style properties */
}

NOTE: SugarCube's UI bar menu "buttons" are not actually <button> elements and will not be affected by any of the above.

 

+1 vote
by (460 points)
Very, very late reply, but figured I might as well since I went through the same experience and it's probably helpful for this to be out there:

 

This site: http://www.bestcssbuttongenerator.com/ is incredibly useful for visualizing button appearance and finding something you're happy with. Saves you a lot of time fiddling with CSS and "testing" in Twine for every button swap.
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.
...