Twine Version: 2.3.8
Story Format: Sugarcube 2.31.1
Is there a way to change various colors with buttons, specifically the passage and various font colors? So I press a button, the passage is black, press another and the passage is white.
Are there ways to change custom font styles with buttons as well? So I have .new font style that I call up with @@.New; . Can that be altered with button as well?
Thanks for any help
Yes, you can do that.
For a very simple example, you could put this in your Stylesheet section:
.blackonwhite body, .blackonwhite #ui-bar, .blackonwhite #menu li a, .blackonwhite #ui-bar-toggle, .blackonwhite #ui-bar-history [id|=history] {
background-color: white;
color: black;
}
.blackonwhite *:disabled, .blackonwhite #ui-bar-history [id|=history]:disabled, .blackonwhite #menu li a:hover {
color: grey;
border-color: grey;
}
.whiteonblack body, .whiteonblack #ui-bar, .whiteonblack #menu li a, .whiteonblack #ui-bar-toggle, .whiteonblack #ui-bar-history [id|=history] {
background-color: black;
color: white;
}
.whiteonblack *:disabled, .whiteonblack #ui-bar-history [id|=history]:disabled, .whiteonblack #menu li a:hover {
color: grey;
border-color: grey;
}
(Note: That’s very simplified. You’d probably want to work out a somewhat more detailed version.)
You could add whatever other style changes you’d like there as well.
And then in your passage you could do something like this:
<<button "Black on White">>
<<addclass "html" "blackonwhite">>
<<removeclass "html" "whiteonblack">>
<</button>>
<<button "White on Black">>
<<addclass "html" "whiteonblack">>
<<removeclass "html" "blackonwhite">>
<</button>>
<<button "Remove Classes">>
<<removeclass "html" "blackonwhite">>
<<removeclass "html" "whiteonblack">>
<</button>>
You can see the difference between “White on Black” and the default styling when you click on “Remove Classes”. That’s what I meant by the above CSS being simplified.
I’d also recommend taking a look at the SugarCube “CSS” documentation.
Hope that helps! 
Thanks this helps. Is there away to alter the color property within the style sheet, for example:
Could I change color:grey to black with a button. The reason I ask is because I am using some of these in the passage to represent different people speaking. so @@.person; “blah blah blah”. From what I gathered what you posted above would only work on the big picture stuff and not text within the passage correct?
Or I could be completely off
You don’t alter the Stylesheet content, you just alter either which class an element has (thereby changing which Stylesheet content is used) or set that element’s style directly.
For example, you could add a class to change how some text looks like this:
<span id="test">Some text</span>
<<button "Toggle Text Color">>
<<toggleclass "#test" "pinktext">>
<</button>>
So, if you had this in your stylesheet section:
.pinktext {
color: pink;
}
then clicking the “Toggle Text Color” button would turn on or off using that class on the element with the ID of “test”, which would make that text turn pink. (See the <<addclass>>, <<removeclass>>, and <<toggleclass>> macros for details.)
Alternately, you could set the color on an element directly using a little jQuery code (code that starts with “$(” is jQuery code), like this:
<span id="test">Some text</span>
<<button "Toggle Text Color">>
<<if $("#test").css("color") == "rgb(255, 192, 203)">>
<<run $("#test").css("color", "")>>
<<else>>
<<run $("#test").css("color", "pink")>>
<</if>>
<</button>>
That code would directly set the “style” property on the “test” <span> to add or remove “color: pink;”. (Note: The CSS color “pink” uses the RGB color values of “rgb(255, 192, 203)”, so that’s what jQuery returns when looking at that element’s color value while it’s set to “pink”. See the jQuery .css() method for details.)
It’s important to remember that an ID should be unique on a page. So, if you want to change the styling of multiple elements, then you should use a class instead. For example:
<span class="test">Some text</span>
Some other text
<span class="test">Yet more text</span>
<<button "Toggle Text Color">>
<<toggleclass ".test" "pinktext">>
<</button>>
Clicking that button would toggle the color of the first and third lines of text. Note that IDs are referred to with a “#” in front of the name, while classes are referred to with a “.” in front of the name (per standard CSS selector rules).
That should give you a couple of different ways to restyle elements on the screen via user interactions, such as button clicks.
Please let me know if you have any further questions.
Enjoy!
Hi Everyone
I’ve been trying to change the default style for Sugarcube, because I find it difficult to read.
I’ve been using the recommendations from Ian Millington’s Beautiful Text cheatsheet. Using the code posted earlier in the thread by @HiEv, I’ve currently got:
/* TODO: amend the "hover" value so that the text is still easy to read. Find out how to amend the values of the debugger so that the contrast between the revealed code and the background isn't so bad. Find out why the history icons don't display. */
/*
Reset the default SC2 background color setting for the
document element, which allows background settings applied
to the <body> element to fill the entire area as expected.
*/
html {
background-color: inherit;
}
/*
Replicate the default SC2 document styling onto the <body>
element.
*/
body {
color: #eee;
background-color: #111;
}
/*
Your body.whatever styles here.
*/
body, #ui-bar, #menu li a, #ui-bar-toggle, #ui-bar-history [id|=history] {
color: #554433;
background-color: #f7f4f1;
font-family: "Georgia", serif;
}
*:disabled, #ui-bar-history [id|=history]:disabled, #menu li a:hover {
color: grey;
border-color: green;
}
/* increase the text size of the passages, but not the sidebar */
#passages {
font-size: 1.5em;
}
a {
color: #554433;
text-decoration: underline;
}
If you paste that into a test project, you’ll see that while the story itself looks okay, it’s very difficult to read the debugger. I’d be grateful if anyone could point me towards the name(s) of the debugger elements so that I can change their colors. At a pinch, I could get by with simply reducing the opacity of the blue/gray overlay.
I don’t recall the names off the top of my head, but it’s probably more helpful (long-term) to tell you to right-click (in the browser) and “inspect” an element to see its properties. Select by id with #id or by class with .class.
Or I could go look, if you’d rather not mess with that. But it’s awfully useful to get to know the inspector a little.
I agree with Josh about using the inspector (or at least getting familiar with it for the future). But to answer your question, here is the section of the docs that lists all of the default CSS settings.
Well… If your goal is readability, then you’re not exactly following what that says. The first thing I noticed is that you’re using a serif font, instead of a sans-serif font, and that page says:
Sans-serif faces can also be very readable, when they follow the proportions of classic serif style. At small pixel sizes they may even be clearer (for reasons I’ll cover below).
That said, if you want maximum readability, then you should follow the Web Content Accessibility Guidelines (WCAG). If you take a look at that, you’ll find that some of Millington’s suggestions, such as for separating paragraphs, are just plain wrong considering what studies have since shown about readability. For example, he says:
Good typography does not use vertical space for paragraph breaks because it breaks the rhythm of reading: as your eye scans back to the start of each line, your brain adjusts to the amount of vertical change needed to hit the right spot. As you continue reading this process gets faster and faster as your brain gets better at guessing where the next line will start. Paragraph spacing breaks this rhythm and makes reading harder.
However, regarding that topic, the WCAG says:
1.4.12 Text Spacing
– Level AA (Added in 2.1)
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
In other words, for best readability on the web, it’s actually good to have spaces between paragraphs, unlike what Millington claims.
I’m not saying that Millington is totally incorrect (for example, he’s right about not using pure black and pure white), but I’d take what he said on that page with a grain of salt, and defer to the WCAG when they disagree.
Also, you shouldn’t change the font-family on “#ui-bar-history [id|=history]” otherwise you’ll break the arrows there. That’s why they aren’t displaying.
Oh, and speaking of fonts, if you want the option to really help readability, you might consider adding an option to use the OpenDyslexic font in your game’s settings. That’s a font which is specifically designed for readability for people with dyslexia.
To add an option to use the OpenDyslexic font, first you’d need to put the OpenDyslexic font files within a “fonts” directory where your HTML file is.
Next, add this to your Stylesheet section to make that font available:
/* Font source: https://opendyslexic.org/ */
@font-face {
font-display: swap;
font-family: "opendyslexic";
src: url("fonts/OpenDyslexic-Regular.eot");
src: url("fonts/OpenDyslexic-Regular.eot?#iefix") format("embedded-opentype"),
url("fonts/OpenDyslexic-Regular.woff2") format("woff2"),
url("fonts/OpenDyslexic-Regular.woff") format("woff"),
url("fonts/OpenDyslexic-Regular.otf") format("opentype");
font-style: normal;
font-weight: normal;
}
@font-face {
font-display: swap;
font-family: "opendyslexic";
src: url("fonts/OpenDyslexic-Italic.eot");
src: url("fonts/OpenDyslexic-Italic.eot?#iefix") format("embedded-opentype"),
url("fonts/OpenDyslexic-Italic.woff2") format("woff2"),
url("fonts/OpenDyslexic-Italic.woff") format("woff"),
url("fonts/OpenDyslexic-Italic.otf") format("opentype");
font-style: italic;
font-weight: normal;
}
@font-face {
font-display: swap;
font-family: "opendyslexic";
src: url("fonts/OpenDyslexic-Bold.eot");
src: url("fonts/OpenDyslexic-Bold.eot?#iefix") format("embedded-opentype"),
url("fonts/OpenDyslexic-Bold.woff2") format("woff2"),
url("fonts/OpenDyslexic-Bold.woff") format("woff"),
url("fonts/OpenDyslexic-Bold.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "opendyslexic";
src: url("fonts/OpenDyslexic-Bold-Italic.eot");
src: url("fonts/OpenDyslexic-Bold-Italic.eot?#iefix") format("embedded-opentype"),
url("fonts/OpenDyslexic-Bold-Italic.woff2") format("woff2"),
url("fonts/OpenDyslexic-Bold-Italic.woff") format("woff"),
url("fonts/OpenDyslexic-Bold-Italic.otf") format("opentype");
font-weight: bold;
font-style: italic;
}
html.opendyslexic body, html.opendyslexic #ui-bar, html.opendyslexic #menu li a {
font-family: "opendyslexic", sans-serif;
}
html.opendyslexic body {
font-size: 1em;
}
The last bits there cause the font to be enabled only when the “opendyslexic” class is on the <html> element.
Then, add this to your JavaScript section:
var dyslexicFontHandler = function () {
if (settings.OpenDyslexic) {
$("html").addClass("opendyslexic");
} else {
$("html").removeClass("opendyslexic");
}
};
Setting.addToggle("OpenDyslexic", {
label : "Use the OpenDyslexic font?",
default : false,
onInit : dyslexicFontHandler,
onChange : dyslexicFontHandler
});
That will add a toggle switch to the “Settings” window (which will now be available from the UI bar) that can be used to enable that font by toggling whether the “opendyslexic” class is on the <html> element.
Note: You’ll need to use the published HTML version to see that font work, due to the path issues.
Hope that helps! 