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/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 ===== ===== 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 7: Line 11:
 ==== Changing the Font ==== ==== 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 waysbut 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> 
 +bodytw-story 
 +
 +  font-familyPalatino; 
 +  font-size18px; 
 +
 +</code>
  
-Let's start by changing the background color of the pageThis 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-familyLora, serif; 
 +  font-size: 18px;
 } }
 </​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: 
  
-<​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 body
 { {
   background-color:​ #f5fff0;   background-color:​ #f5fff0;
-  color: #22301a; 
 } }
 </​code>​ </​code>​
  
-If you're using Harlowe, you'll need to use 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 body
 { {
Line 42: Line 68:
   color: #22301a;   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 a
 { {
   color: #422424;   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 tw-link
 { {
   color: #422424;   color: #422424;
 } }
-</​code>​ +</​code> ​<​code ​css>
- +
-You can combine these declarations to build a complete color scheme, like so: +
- +
-<​code>​+
 body body
 { {
Line 75: Line 108:
   color: #422424;   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. ​
twine2/change_the_font_colors_or_appearance.1431723235.txt.gz · Last modified: 2017/10/09 20:38 (external edit)