Color & Formatting on Twine

Glyph

Hey there! I'm in need of help with formatting color on 1.4.2. I know you can add a color hook to Twine 2 with the following in the Stylesheet:

tw-hook[style*="color:"] tw-link, tw-hook[style*="color:"] .enchantment-link {
	color: inherit;
}

But I'm not sure how/if this translates to 1.4.2, and if there's another way with 1.4.2. Any help would be appreciated!

Glyph

Bloop, obsolete comment! This was from the earlier version of this post for Twine 2.

greyelf

The CSS example you gave is for the Harlowe story format, which is not available for Twine 1.4.2.

Glyph

greyelf wrote: »

The CSS example you gave is for the Harlowe story format, which is not available for Twine 1.4.2.

I'm aware! I was asking if there existed a similar method, or any method at all, in Twine 1.4.2 that I could use for my stories there to color individual sections of text on the same page.

Claretta

You can do something like just specify a span in the stylesheet like

.whitetext {
color:#fff;
}

And then in passages write <span class="whitetext">This text is white.</span>

Glyph

Claretta wrote: »

You can do something like just specify a span in the stylesheet like

.whitetext {
color:#fff;
}

And then in passages write <span class="whitetext">This text is white.</span>

Although much less intuitive than Harlowe's method, this is still certainly good enough! Thank you very much!

Glyph

Glyph wrote: »

Claretta wrote: »

You can do something like just specify a span in the stylesheet like

.whitetext {
color:#fff;
}

And then in passages write <span class="whitetext">This text is white.</span>

Although much less intuitive than Harlowe's method, this is still certainly good enough! Thank you very much!

Actually, one more important question! While this does work with normal text, it doesn't work with links. Is there any way to color individual links in Twine 1.4.2?

greyelf

Glyph wrote: »

Is there any way to color individual links

You need to state which Story Format you are using when you ask a question, as answers can be different for each one.

1. Vanilla story formats: Sugarcane, Jonah, Responsive:

1a. The CSS to style internal and external links, goes in your story's stylesheet tagged passage.

.whitetext a.internalLink {
	color: #ffffff;
}
.whitetext a.externalLink {
	color: #ffffff;
}

1b. The Markup used to indicate which link(s) to style, both inline (span) and block (div).

<span class="whitetext">[[Internal Link 1|Next Passage]]</span>
<span class="whitetext">[[Extenral Link 1|http://google.com/]]</span>;

<span class="whitetext">[[Internal Link 2|Next Passage]] [[Extenral Link 2|http://google.com/]]</span>;

<div class="whitetext">[[Internal Link 3|Next Passage]]
[[Extenral Link 3|http://google.com/]]</div>;

2. The SugarCube 1 or 2 story format:

2a. The CSS to style internal and external links.

.whitetext a.link-internal {
	color: #ffffff;
}
.whitetext a.link-external {
	color: #ffffff;
}

2b. The Markup used to indicate which link(s) to style.
note: You can either use the same markup in point 1b or Sugarube's Custom Styles markup.

@.whitetext;[[Extenral Link 1|http://google.com/]]@@@.whitetext;[[Internal Link 2|Next Passage]] [[Extenral Link 2|http://google.com/]]@@@.whitetext;
[[Internal Link 3|Next Passage]]
[[Extenral Link 3|http://google.com/]]@

Claretta

You shouldn't need to specify link-internal or anything, to color links it seems to work with just

.whitetext a

Greyelf's answer may still be optimal, I've just never bothered to specify that level of detail.