User Tools

Site Tools


twine2:change_the_font_colors_or_appearance

Change the Font, Colors, or Appearance

If you're looking for simple formatting changes such as bolding or italicizing text, then the How to Format Text page will help you out.

But what if you'd like to change the font or color scheme of your published story? The best way to accomplish that is to edit your story's stylesheet. This uses CSS, a standard web technology.

If you've never written CSS before, there are many tutorials out there that can help you learn it. The Mozilla Developer Network in particular has a very comprehensive tutorial.

That said, CSS is a lot to learn! Fortunately, basic changes are not terribly complicated. Let's talk about some two common scenarios.

Changing the Font

You can very easily change the font your entire story uses with a declaration like this in your story stylesheet:

body, tw-story
{
  font-family: Palatino;
  font-size: 18px;
}

Fonts are not packaged with your story files automatically. If you use Palatino, and someone reading your story doesn't happen to have Palatino installed, your story won't display with Palatino. There are two strategies you can use:

  • Pick a font that almost everyone has. CSS Font Stack has some recommendations that include an estimated percentage of users on each operating system that have a particular font.
  • Use an embedded font, which browsers download when your story loads. Creating an embedded font is a somewhat complicated task, but take a look at this page if you're curious how it works.

Using Google Fonts, which allows you to embed a font with a single extra line of CSS, is much easier. Here's how you would use Lora as your story's font:

@import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic);
 
body, tw-story
{
  font-family: Lora, serif;
  font-size: 18px;
}

Changing the Color Scheme

Colors are recorded in CSS in variety of ways, but the most succinct and commonly-used is called a hex triplet. The first two digits represent how much red the color contains, the second duo how much green, and the final how much blue. So, pure red is written as #ff0000. 1) You can play with colors with online tools like Adobe Color or Paletton, and then using the hex triplets in your own code.

Let's start by changing the background color of the page. This is easy enough to add in your story stylesheet (Snowman/SugarCube example below):

body
{
  background-color: #f5fff0;
}

This changes the background color to a light lime green.

Likewise, you can change other colors like so:

Harlowe Snowman SugarCube
Change main text color <code css> body { background-color: #f5fff0; } tw-passage { color: #22301a; } </code> <code css> body { background-color: #f5fff0; color: #22301a; } </code> Same as Snowman
Change color of links on the page <code css> tw-link { color: #422424; } </code> <code css> a { color: #422424; } </code> Same as Snowman
Build a complete color scheme <code css> body { background-color: #f5fff0; color: #22301a; } tw-link { color: #422424; } </code> <code css> body { background-color: #f5fff0; color: #22301a; } a { color: #422424; } </code> Same as Snowman

External Resources

  • Furkle has written a tutorial for changing the appearance of stories with the Harlowe format, which explains how the different page elements work.
  • The SugarCube documentation has a schematic of how page elements are set up in that story format. It requires a little understanding of HTML, however.
1)
You can also use the word “red” as a color in CSS to get the same exact color. There's a full list if you're curious what's available, but it's often easier to specify an exact color using the hex triplet notation.
twine2/change_the_font_colors_or_appearance.txt · Last modified: 2017/10/10 00:39 (external edit)