Background color Please Please Please

Comments

• Claretta

  May 2015 edited May 2015

  The SugarCube screen is made up of 4 elements: html (underlying background), body (main area background), passage (text area), and ui-body (sidebar).
  
  In the custom stylesheet area you access from the bottom left story menu, try putting in:

  body.reddish {
  background-color: red;
  }
  
  .passage.reddish {
  background-color: red;
  }
  
  html.reddish {
  background-color: red;
  }
  

  This will result in a vary garish red, however, so you may want to look up css colours. You could try background-color: #800000; instead.
  
  If you also wanted the ui area to change you'd use:
  

  #ui-bar.reddish, #ui-body.reddish {
  background-color: red;
  }
  

  
  Then in passages you wanted to be red, you'd write:
  
  <<addclass "html" "reddish">>
  
  and do the same for the other elements like "body" or "#ui-body" in place of "html" etc. To remove that you'd write <<removeclass "html" "reddish">>.
  
  But for the .passage you don't need to use addclass, you just add a "reddish" tag to the top of the passage.
  
  

  Ggg wrote: »

  Also is it more difficult to use Sugarcube than Harlow ? Because then I may change…

  
  Depends on your preferences, but both have a learning curve. I find SugarCube easier to use than Harlowe, others find the opposite.
  
• Sage

  May 2015

  Also @Ggg
  @Sharpe wrote what I thought was a fantastic guide to walk you through this stuff.
  
  It's here:
  http://twinery.org/forum/discussion/1528/css-is-your-friend-the-basics-of-changing-twine-s-default-appearance-for-newbs/p1
• Ggg

  May 2015

  Thank you so much !! Very clear and helpful
• Claretta

  May 2015 edited May 2015

  You can also add transition effects to them.
  
  E.g. write in each of those css sections:

  transition: all 1s linear;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  

  
  Underneath the background-color property. That should give you a nice fade in between the colours.