"Settings" menu option to change stylesheets?

0 votes
asked Jan 8 by SmuJamesB (2,600 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 TheMadExile (42,760 points)
selected Feb 7 by SmuJamesB
 
Best answer

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 */
}

 

0 votes
answered Jan 8 by greyelf (76,130 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?

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.
...