Differences

This shows you the differences between two versions of the page.

--- twine2:change_the_font_colors_or_appearance [2015/05/15 16:53]
klembot [Changing the Color Scheme]
+++ twine2:change_the_font_colors_or_appearance [2018/11/13 09:29] (current)
alexroseb Fix formatting of CSS
@@ Line 1: / Line 1: @@
 ===== 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.
+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.
@@ Line 7: / Line 11: @@
 ==== Changing the Font ====
-==== Changing the Color Scheme ====
+You can very easily change the font your entire story uses with a declaration like this in your story stylesheet:
-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.
+<code css>
+body, tw-story
+{
+  font-family: Palatino;
+  font-size: 18px;
+}
+</code>
-Let's start by changing the background color of the page. This is easy enough to add in your story styleheet:
+**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:
-<code>
+  * 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.
-body
+  * 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
 {
-  background-color: #f5fff0;
+  font-family: Lora, serif;
+  font-size: 18px;
 }
 </code>
-This changes the background color to a light lime green. Likewise, you can change the main text color like so in the Snowman and SugarCube story formats:
-<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;
-  color: #22301a;
 }
 </code>
-If you're using Harlowe, you'll need to use a slightly different declaration:
+This changes the background color to a light lime green.
-<code>
+Likewise, you can change other colors like so:
+^ ^ Harlowe ^ Snowman ^ SugarCube ^
+| **Change main text color** | <code css>
 body
 {
@@ Line 42: / Line 68: @@
   color: #22301a;
 }
-</code>
+</code> | <code css>
+body
-Changing the color of links on the page looks like this in Snowman and SugarCube:
+{
+  background-color: #f5fff0;
-<code>
+  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>
+</code> | Same as Snowman |
+| **Build a complete color scheme** | <code css>
-In Harlowe, you would write this instead:
+body
+{
+  background-color: #f5fff0;
+  color: #22301a;
+}
-<code>
 tw-link
 {
   color: #422424;
 }
-</code>
+</code> | <code css>
-You can combine these declarations to build a complete color scheme, like so:
-<code>
 body
 {
@@ Line 75: / Line 108: @@
   color: #422424;
 }
-</code>
+</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.

Twine Wiki

User Tools

Site Tools

Differences

Page Tools