"Settings" menu option to change stylesheets?

0 votes
asked Jan 8 by SmuJamesB (640 points)
How to write the javascript code to get a player to choose between 2 or more css stylesheets? Currently, it only seems possible to put CSS code in the "Edit Story Stylesheet" menu.

2 Answers

0 votes
answered Jan 8 by greyelf (58,490 points)
edited Jan 9 by greyelf

The Twine 2 application has no built-in support for including references to external CSS (or JS) files, you will need to use Javascript to: create a link element within the correct properties; and then add that link element to the head element.

Is it correct to assume that when you state "between 2 or more css stylesheets" you mean Alternative Style: Working With Alternate Style Sheets?

0 votes
answered Jan 8 by TheMadExile (32,880 points)

How are you adding these stylesheets?

What most people, generally, use is something like the second example given in the documentation for Setting.addList() to switch between prefixed style rules that are, yes, added via Story Stylesheet.  If you're interested in something else, then you're going to need to get into details.


Here's an example, straight from the docs, that leverages prefixed style rules: (goes in Story JavaScript)

var settingThemeNames = ["(none)", "Bright Lights", "Charcoal", "Midnight", "Tinsel City"];
var settingThemeHandler = function () {
	// cache the jQuery-wrapped <html> element
	var $html = $("html");

	// remove any existing theme class
	$html.removeClass("theme-bright-lights theme-charcoal theme-midnight theme-tinsel-city");

	// switch on the theme name to add the requested theme class
	switch (settings.theme) {
	case "Bright Lights":
		$html.addClass("theme-bright-lights");
		break;
	case "Charcoal":
		$html.addClass("theme-charcoal");
		break;
	case "Midnight":
		$html.addClass("theme-midnight");
		break;
	case "Tinsel City":
		$html.addClass("theme-tinsel-city");
		break;
	}
};
Setting.addList("theme", {
	label    : "Choose a theme.",
	list     : settingThemeNames,
	onInit   : settingThemeHandler,
	onChange : settingThemeHandler
}); // default value not defined, so the first array member "(none)" is used

And a few examples of how to prefix rules with the classes controlled by the setting which affect the body element: (goes in Story Stylesheet)

html.theme-bright-lights body {
	/* style properties here */
}

html.theme-charcoal body {
	/* style properties here */
}

html.theme-midnight body {
	/* style properties here */
}

html.theme-tinsel-city body {
	/* style properties here */
}

 

...