SugarCube/CSS: Help with changing the background into an image during gameplay

Comments

• greyelf

  July 2016

  You can use SugarCube's tag based styling feature to control which background image is shown in each passage.
  
  The following example uses a desert tag to show a desert background image.
  
  I used a passage based on Leon's to check my styling:

  //''Leon's Twine Stylesheets''//
  
  Choose a stylesheet:
  
  Simple customisable sheets:
  [[Simple Centered|Second]] * [[Simple Box|Second]]
  
  ----
  Complex sheets:
  [[Sodden Tome|Second]] * [[Muet|Second]] * [[Squillions|Second]] * [[Remembering the 90s|Second]] * [[Porthole|Second]] * [[The Earth's Story|Second]] * [[Guest of a Bluish Orb|Second]] * [[Hypercane|Second]] * [[Closed In|Second]] * [[Orange Highlight|Second]] * [[Warm Cabin|Second]] *
  
  Bold text with ''bold markup''.
  Italic text with //italic markup//.
  Underline text with __underline markup__.
  Internal Links with [[link markup|Second]]
  External Links with [[link markup|http://google.com/]]
  

  
  After modify Leon's "Simple Box" stylesheet to allow for the differences in SugarCube 2's HTML structure and default CSS I ended up with the following stylesheet.
  
  Note the body.desert selector, it causes any passage tagged with desert to show the desert background image.

  body {
  	background-color: silver;
  }
  body.desert {
  	background-image: url('media/desert.jpg');
  	background-attachment: fixed;
  }
  #story {
  	font-size: 100%;
  	margin: 10% 0 0 0;
  	/* Used to center the box */
  	text-align: center;
  }
  #passages {
    /* Box background (white with 70% opacity) */
  	background-color: rgba(255, 255, 255, 0.7);
  
    /* Border */
  	border: 2px solid white;
  
    /* Rounded corners */
  	border-radius: 1em;
  
    /* Box width */
    /* width: 60%; */
  
  	/* Center the box */
  	display: inline-block;
  	min-height: 40%;
  	margin:auto;
  	margin-bottom: 5%;
    /*padding: 0px;*/
  }
  .passage {
  	/*margin: 0px;*/
  	/* Inner margin within the box */
  	padding: 2em;
  
  	/* Text formatting */
  	color: black;
  	font-size: 100%;
  	text-align: justify;
  }
  /* No sidebar */
  #ui-bar {
    display: none;
  }
  /* Links */
  a.link-internal, a.link-external {
    color: royalblue;
  }
  a.link-internal:hover, a.link-external:hover {
    color: deepskyblue;
    text-decoration: none;
  }
  
  /* Shrink the page when viewed on devices with a low screen width */
  @media screen and (max-width: 960px) {
    .passage { font-size: 90%;}
    #passages { width: 70%; }
  }
  @media screen and (max-width: 840px) {
    .passage { font-size: 87.5%; }
    #passages { width: 80%; }
  }
  @media screen and (max-width: 720px) {
    .passage { font-size: 75%; }
    #passages { width: 90%; }
  }
  

  To extend the above CSS all you need to do is make up a tag name for each of your different background images and the to add a related body.tag-name selector for each of the different tag names.
• Sylen

  July 2016

  Okay, but how do i tag a passage so that it displays that body then? I get how to make different bodies and such, but i cant seem to find any guides whatsoever explaining this in a comprehensible fashion or showing examples?
  
  Thanks for the help!
• Sylen

  July 2016

  Nevermind, found someone whom made an example using <<addclass "body" "desert">> for an example
  
  Thanks for help!
• TheMadExile

  July 2016

  Sylen wrote: »

  Okay, but how do i tag a passage so that it displays that body then?

  You simply tag each passage with the appropriate tags (i.e. to trigger the body.desert style, you tag each "desert" passage with desert).
  

  Sylen wrote: »

  Nevermind, found someone whom made an example using <<addclass "body" "desert">> for an example

  You probably do not need, or really want, to use the <<addclass>> macro here. See above.