Help with adding/removing CSS classes for special text effects

Authoring Twine
,
1

Bit of a complicated question here.

Can I delete a CSS class from the stylesheet through a button?

My story is set up with special text effects, different colors, etc. based on who’s talking. I understand this can be a little hard to read for some people, so I’d like for there to be a button, that, when clicked, asks the user if they’re sure about the change (and allows them to cancel the action) and then stops the CSS class from being displayed.

Here’s the CSS classes, where .ptalk is the player’s speech, and .samtalk and .yewtalk are NPC’s text effects:

.ptalk {
  background: -webkit-linear-gradient(90deg, #0c0c0c 1%, #796693 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.samtalk {
  background: -webkit-linear-gradient(90deg, #0c0c0c 1%, #768F7C 100%);
  -webkit-background-clip: text;
  color: transparent
}

.yewtalk {
  background: -webkit-linear-gradient(90deg, #0c0c0c 1%, #5E6B8C 100%);
  -webkit-background-clip: text;
  color: transparent;
}

I know I don’t need to delete the text wrappers, for example:

@@.ptalk;Dreaming might not be for me@@, $pname thinks.

@@.samtalk;What about for me?@@ Sandwich asks.

@@.yewtalk;And me! Don't forget me!@@ Yew adds.

Because Twine automatically hides the @@.ptalk;@@ even if it doesn’t have an applicable class.

I just don’t know how to make the class stop displaying while still showing the text the class wraps.

I’d like to be able to put this button in the side bar, and have a second “undo” sort of button, which re-applies the CSS class in case the user wishes to see the text effects again.

I’m using Sugarcube 2.37.3.

Thanks for any help!

2

(General CSS answer – I haven’t applied this to Twine.)

Typically you don’t modify the stylesheet; you add or remove a class from the document that changes how the other classes behave.

E.g. you have a Fancy class on the document (or on the part of the document that contains the story.) Then write your stylesheet like

.Fancy .ptalk {
  background: -webkit-linear-gradient(90deg, #0c0c0c 1%, #796693 100%);
  -webkit-background-clip: text;
  color: transparent;
}

Now removing Fancy from the document will deactivate the background/color/etc.

3

Yes, but this doesn’t work with how I change the text in the story. The effects stop working when i change .ptalk { to .Fancy .ptalk {.
@@.Fancy.ptalk;@@ doesn’t work either.
Also, I don’t know how to make a button remove .Fancy–I’m using the web version of Twine2.

4

Ah, this is where I hope the people who know Twine can chime in. :)

5

To be honest you should have set it up as a talk widget, then you could switch a story variable on/off to determine what class to use. You hardcoded their speech as classes. Twine cannot delete or modify the CSS during runtime.

6

I don’t have the brainpower to fully answer this question right now, but you probably want to look at the <<toggleclass>> macro (documentation here).

1 Like
7

SugarCube includes a Settings API that can be used to add a Settings Dialog to a project, and the Settings.addToggle() method can be used to show an On/Off setting, and a related handler could be used to assign a known CSS class to the page that can be used to control when specific CSS Rules are applied to the content of the page.

The following JavaScript, which needs to be placed within a project’s Story > JavaScript area, conditionally adds a coloured-dialogue CSS Class to the page’s <html> element

var settingColouredDialogueHandler = function () {
	if (settings.colourdialogue) { // is true
		$("html").addClass("coloured-dialogue");
	}
	else { // is false
		$("html").removeClass("coloured-dialogue");
	}
};
Setting.addToggle("colourdialogue", {
	label    : "Show coloured Dialogue?",
	default  : true,
	onInit   : settingColouredDialogueHandler,
	onChange : settingColouredDialogueHandler
});

And the potential existence of that CSS class can be used as follows to control if a CSS rule gets applied or not…

html.coloured-dialogue .jane {
	color: green;
}
html.coloured-dialogue .mary {
	color: orange;
}

…to the following Passage content…

@@.jane;Hi, how are you?@@
@@.mary;I'm fine, and yourself?@@
3 Likes