Problem with passage tag colors

Authoring Twine
1

Twine Version:2.3.5
Story Format: Sugarcube 2.30

So I have a separate body and passage color, as dictate below:

body{
  background-color: green;
  color: black;
  margin-left: auto;
}

#passages {
 background-color: blue;
 margin-bottom: 11em; 
 margin-left: auto;
 border: black solid 0.4em;
 padding:25px 50px 25px 50px;
}

I am using a tag to change the color of the background like this:

.flare {
  background-color: white;
}

However when I do this, the area that is padded around the passage is still blue. I want it to be white along with the rest of the background. Am i missing something obvious? I would like to keep the body and passage different colors except for the tagged passages if possible.

Thanks in advance

2

As explained within the Passage Tags section of the Passage Conversions documentation, a Passage Tag name is added as a CSS class to the <body> element and the <div> element that contains the contents of the ‘current’ Passage.
eg. which results in a HTML structure something like the following, which you can Inspect in your web-browser. (I have simplified the structure slightly)

<body data-tags="flare" class="flare">
   <div id="story" role="main">
      <div id="passages">
         <div id="passage-start" data-passage="Start" data-tags="flare" class="passage flare">
            ...contents of 'current' Passage...
         </div>
      </div>
   </div>
</div>

So as you can see your .flare CSS class based rule is being applied twice, once to the outer <body> element and its descendent elements unless there is an overriding CSS rule, and a second time to the inner <div> element that represents the Passage. The reason there is a rectangle area with a blue background is because of the #passages CSS rule is still effecting the related <div> element.

Change the CSS selector of your .flare CSS class rule to something like the following.

body.flare, body.flare #passages {
  background-color: white;
}
3

As a followup to Greyelf’s excellent answer:

  1. I’d suggest using the [data-tags] syntax for future proofing.
  2. Their example CSS rule affects both the body and #passages backgrounds. If you only want to affect one, then it’ll need to change slightly.

Their example switched to the [data-tags] syntax:

html[data-tags~="flare"] body, html[data-tags~="flare"] #passages {
	background-color: white;
}

To affect only the body background:

html[data-tags~="flare"] body {
	background-color: white;
}

To affect only the #passages background:

html[data-tags~="flare"] #passages {
	background-color: white;
}
4

That worked perfectly, thanks for the explanation. I’m still new to anything past slapping some code I found together and seeing what happens. This helped alot.

5

Thanks for your help. So is the advantage of the data-tags is that its reflecting how the html actually gets used? Sorry, still new at this.

6

There are two main advantages of using the newer data-tags based method over the older CSS class based one:

  1. The story format developer may remove the older CSS class based method in some later release of SugarCube.
  2. Modern HTML development practices advise using using custom element attributes (those who’s name starts with data-) to add meaning/extra information to a element, instead of misusing the existing class attribute to do such.