Ask a Question

Harlowe 2.0.1 How do I change the color of all my text, including the links?

0 votes
by (690 points)
I would like to set the color of the text across the whole story to (#fdff29) to make it match the theme of the webpage it's uploaded to. If possible I would like the links to be (#fa5c5c), also to match the theme.

I tried looking around other questions, but I didn't see any CSS for Harlowe.

2 Answers

0 votes
by (159k points)

If you search the Old Forum Archive you will find a number of threads related to changing the background colour of your story, as well as changing the default colour of links. And in regards to links a quick search of the Q/A site gave me the [Harlowe 2] Overriding default link format to format certain links differently? question.

1. Default Background colour.

Harlowe 2.x assigns its default back-ground (and fore-ground) colour to the tw-story element, which can be seen by using your web-browser's built-in Web Developer tools to Inspect the current HTML structure (and the related CSS) of your story when playing it. The related default CSS looks like the following:

tw-story {
	background-color: #000;
	color: #fff;
}

2. Default Link colours.

Harlowe implements links using a number of different techniques which can be grouped into two main categories: those that use a tw-link element; and those that use an enchantment-link CSS class. The following is the default CSS used to colour these two categories for the three main link states. (standard, visited, hover)

tw-link, .enchantment-link {
	color: #4169E1;
}

tw-link:hover, .enchantment-link:hover {
	color: #00BFFF;
}

.visited {
	color: #6941E1;
}

.visited:hover {
	color: #EE33EE;
}

 

by (690 points)
edited by
What is the CSS for Text color, I don't care about the Background, but thanks for the link color code

Addendum:

Never mind, I'm such a noob...
0 votes
by (63.1k points)

Edit: I see greyelf beat me to it. 

Most of Harlowe's styling is on the <tw-story> custom element in Harlowe 2.x, (instead of on the <html> element, as in Harlowe 1.x, or the <body> element, as in most web pages and web apps). Links in Harlowe also use the custom <tw-link> element for most links, and the class .enchantment-link for generated links (i.e. links created via the (click: macro). 

So to change the text color across a Harlowe story, you'd use CSS like this: 

tw-story {
  color: #fdff29;
}

For the links: 

tw-link, .enchantment-link {
  color: #fa5c5c; 
}

To find the selectors for elements, you can look at the html structure and css of web pages and web apps, including Twine stories, by using your browser's development tools. For example, on Google Chrome running in Windows, you can right click on an element and then select inspect element from the context menu, which will open a dock in the right side of the browser window detailing the document's html structure and css code, which can be altered in real time to test things out (these alterations are not saved, however). 

Snow Theme by Q2A Market
Powered by Question2Answer
...