User Tools

Site Tools


twine2:change_the_font_colors_or_appearance

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
twine2:change_the_font_colors_or_appearance [2015/05/16 10:51]
klembot
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 ===== ===== 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. That said, CSS is a lot to learn! Fortunately,​ basic changes are not terribly complicated. Let's talk about some two common scenarios.
Line 10: Line 14:
  
 <code css> <code css>
-body+body, tw-story
 { {
   font-family:​ Palatino;   font-family:​ Palatino;
Line 17: Line 21:
 </​code>​ </​code>​
  
-But there'​s something very important to keep in mind! Fonts are not packaged with your story files automatically ​-- so if someone reading your story doesn'​t happen to have Palatino installed, your story won't display with the font you expect. There are two strategies you can take.+**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:
  
-First, you can 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.+  * 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.
  
-You could also 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 [[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:+  * 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> <code css>
 @import url(http://​fonts.googleapis.com/​css?​family=Lora:​400,​700,​400italic,​700italic);​ @import url(http://​fonts.googleapis.com/​css?​family=Lora:​400,​700,​400italic,​700italic);​
  
-body+body, tw-story
 { {
   font-family:​ Lora, serif;   font-family:​ Lora, serif;
Line 32: Line 38:
 } }
 </​code>​ </​code>​
 +
 +
 ==== Changing the Color Scheme ==== ==== 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. 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 styleheet:+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> <code css>
Line 45: Line 53:
 </​code>​ </​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:+This changes the background color to a light lime green. ​
  
-<code css>+Likewise, you can change other colors like so: 
 + 
 +^ ^ Harlowe ^ Snowman ^ SugarCube ^ 
 +| **Change main text color** | <code css>
 body body
 { {
   background-color:​ #f5fff0;   background-color:​ #f5fff0;
-  color: #22301a; 
 } }
-</​code>​ 
  
-If you're using Harlowe, you'll need to use a slightly different declaration+tw-passage 
- +
-<code css>+  color#22301a; 
 +} 
 +</​code>​ | <code css>
 body body
 { {
   background-color:​ #f5fff0;   background-color:​ #f5fff0;
 +  color: #22301a;
 } }
- +</​code>​ | Same as Snowman | 
-tw-passage+| **Change color of links on the page** | <code css> 
 +tw-link
 { {
-  color: #22301a;+  color: #422424;
 } }
-</​code>​ +</​code> ​<code css>
- +
-Changing the color of links on the page looks like this in Snowman and SugarCube:​ +
- +
-<code css>+
 a a
 { {
   color: #422424;   color: #422424;
 } }
-</​code>​+</​code> ​| Same as Snowman |     
 +| **Build a complete color scheme** | <code css> 
 +body 
 +
 +  background-color:​ #f5fff0; 
 +  color: #22301a; 
 +}
  
-In Harlowe, you would write this instead: 
- 
-<code css> 
 tw-link tw-link
 { {
   color: #422424;   color: #422424;
 } }
-</​code>​ +</​code> ​<code css>
- +
-You can combine these declarations to build a complete color scheme, like so: +
- +
-<code css>+
 body body
 { {
Line 100: Line 108:
   color: #422424;   color: #422424;
 } }
-</​code>​+</​code> ​| Same as Snowman | 
 + 
 + 
 +  
  
 ==== External Resources ==== ==== 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.   * 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. ​   * 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. ​
twine2/change_the_font_colors_or_appearance.1431787865.txt.gz · Last modified: 2017/10/09 20:38 (external edit)