===== 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|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 [[adding_custom_javascript_and_css|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 [[https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started|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:

<code css>
body, tw-story
{
  font-family: Palatino;
  font-size: 18px;
}
</code>

**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. [[http://www.cssfontstack.com/|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 [[http://www.html5rocks.com/en/tutorials/webfonts/quick/|this page]] if you're curious how it works. 

Using [[https://www.google.com/fonts|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 [[https://www.google.com/fonts/specimen/Lora|Lora]] as your story's font:

<code css>
@import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic);

body, tw-story
{
  font-family: Lora, serif;
  font-size: 18px;
}
</code>


==== 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. ((You can also use the word "red" as a color in CSS to get the same exact color. There's a [[https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords|full list]] if you're curious what's available, but it's often easier to specify an exact color using the hex triplet notation.)) You can play with colors with online tools like [[https://color.adobe.com|Adobe Color]] or [[http://paletton.com/|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):

<code css>
body
{
  background-color: #f5fff0;
}
</code>

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 [[http://furkleindustries.com/fictions/twine/twine2_CSS_tutorial/|tutorial]] for changing the appearance of stories with the Harlowe format, which explains how the different page elements work.

  * The SugarCube documentation has a [[http://www.motoslave.net/sugarcube/docs/html.html|schematic]] of how page elements are set up in that story format. It requires a little understanding of HTML, however.