How To Change Specific Text's Color

Comments

• MeekoSoup

  January 2017

  To best, and most efficiently accomplish this, I suggest utilizing CSS. The techniques I'll describe should work for all the popular Story systems used in Twine, however I will try to illustrate how at least two of the systems use it, Harlowe and SugarCube.
  
  Next to the house symbol you'll have the name of your Story with a little arrow pointing up. Clicking on that reveals of list of menu items. In that list is, "Edit Story Stylesheet." This is where you'll provide the majority of your CSS (Cascading Style Sheet). CSS is used in web design, specially as templates filled with information for how elements on a page should look.
  
  Refer to this link to learn more about CSS, as there is a LOT you can do with it: w3schools.com/css/.
  
  My suggestion is, in that Edit Story Stylesheet section, write the following:

  span.speaker1 {
  color: red;
  }
  span.speaker2 {
  color: blue;
  }
  

  
  Now comes the specific Story format part. After some brief testing, it seems you can use this method for both Harlowe and SugarCube, probably even Snowman.
  
  In a passage type something like the following:

  <span class="player">Speaker1: Hello</span>
  

  
  The CSS is saying that if there is a "span" tag that is of class "speaker1" then color it's text red. The HTML (in the passage) is saying, there is a "span" tag of class "speaker1" here, and it's contents are, "Speaker1: Hello". The extra "speaker2" part in CSS is just there to show you, briefly, how standalone CSS is structured.
  
  Now, you can do this inline as well.
  
  In Harlowe you can do the following:

  (css: "color: red;")[Speaker1: Hello]
  

  
  In SugarCube it would just be how you would do it in a webpage:

  <span style="color: red;">Speaker1: Hello</span>
  

  
  The semicolons are a good practice, especially if you want to add more than one effect. This inline method will achieve the same effect, but may be pretty cumbersome in the long run.
  
  Finally, here's just a really cool effect you can do, using a "div" tag. The difference between "span" and "div" can be explained on w3schools.
  
  In your Stylesheet area, type:

  div.speaker1 {
  color: yellow;
  background-color: indigo;
  box-shadow: 5px 5px 3px #888888;
  padding: 8px 8px 8px 8px;
  }
  

  
  and then in a passage type:

  <div class="speaker1">Speaker1: Hello</div>
  

  
  You may find this to be a highly appealing look, and it should give you a better idea of the power of CSS.
  
  Hope you found this helpful!