Trouble with speech macro

Authoring Twine
1

Twine Version: 2.8.1
Hi, me again :frowning:
I added the speech macro to my CSS and it is working well. I don’t want the pictures/avatars, just custom background and name color. The background is working fine, but I can’t find a way to change only the color of the name of the character. Here is what I tried:

.speech {
	display: inline-block;
  	color: white;
	border: 1px solid white;
	border-radius: 5px;
	padding: 8px 8px 8px 8px;
	box-shadow: 3px 3px 3px Black;
    margin: 2px;
}

.You {
	background-color: #333333;
}

.You:first-of-type {  
 color: red;
}

I also tried

.speech .You p:first-of-type {  
 color: red;
}

It is changing the color of the text, not only the name.
Thanks again…

2

When asking questions about a third party addon it helps those answering if you include a link to the specific addon you are using, so there is no confusion about which addon you mean. This is especially true when there are multiple (speech) addons that can be used to achieve a specific outcome.

I will assume you are using Chapel’s Speech Box System addon, but the general principles I’m using will work with other such addons.

Passage content like the following…

<<john>>Welcome to the Library<</john>>

…will generate a HTML structure like the following when that Passage is visited…

<div class="john say">
	<img src="images/portraits/john.jpg">
	<p>John</p>
	<p>Welcome to the Library</p>
</div>

note: you can use your web-browser’s Web Developer Tools to inspect the generated HTML.

The above structure tells us that:

  • a lowercase copy of the character’s identifier (John) was added as a CSS Class to the outer <div> element. This allows us to distinguish the speech box of one character from that of another.
  • the character’s identifier (John) is added as is to the 1st child Paragraph <p> element of structure.

Combining the above information with a little knowledge of CSS Selectors allows us to craft a CSS Rule that targets that <p> element.

.john > p:first-of-type {
	color: red;
}

…or if you want make sure that the rule only targets john classed elements associated with the speech box addon…

.say.john > p:first-of-type {
	color: red;
}

note: If you are using some other “speech box” system then the generated HTML structure will likely look different to the above one, but you can use the same steps to determine what identifiers & element types are being generated, thus what information is needed to craft the correct CSS Select to target the correct element.