Background and text color in float-box?

Authoring Twine
1

Is it possible to change the background colour and text colour inside a float box? I have a box that I want to appear and disappear with a link-rerun and hide macro, but I would like it to stand out a bit. Basically, it’s a box that shows you a list of definitions you can go through, but if it’s a second play-through you can just ignore the “show definitions” link. I’m new to this, so I feel like I’m doing things in the least efficient ways all the time.

I’m using the newest harlowe. I’m still writing, but this is what I’ve got so far.

(link-rerun:"Show definitions")[|definitions>[(float-box:"=XX=","=YY=")[List of definitions using the dialog macro when clicked on them.
===>
(text-size:0.8)[(link-rerun:"hide definitions")[(hide:?definitions)]]]]]

It works fine, but I just wish the background was a different color so it looks like a box.

2

If you use your web-browser’s Web Developer Tools to Inspect the HTML elements generated by your code example you would see something like the following…

<tw-hook name="definitions">
	<tw-expression type="macro" name="float-box" return="changer"></tw-expression>
	<tw-hook style="display: block; width: 50vw; max-width: 50vw; left: 25vw; box-sizing: content-box; overflow-y: auto; height: 50vh; position: fixed; top: 25vh; padding: 1em; background-color: rgb(0, 0, 0);">
		List of definitions using the dialog macro when clicked on them.
		<br>
		<tw-align style="text-align: right;">
			<tw-expression type="macro" name="text-size" return="changer"></tw-expression>
			<tw-hook style="font-size: 19.2px; line-height: 28.8px;">
				<tw-expression type="macro" name="link-rerun" return="changer"></tw-expression>
				<tw-hook>
					<tw-link tabindex="0" data-raw="">hide definitions</tw-link>
				</tw-hook>
			</tw-hook>
		</tw-align>
	</tw-hook>
</tw-hook>

…and you would discover that the default background colour of the “float box” is hardwired to always be Black.
eg. background-color: rgb(0, 0, 0);

You can use a CSS Specificity !important exception like the following within your project’s Story Stylesheet area to override that hardwired background colour…

tw-hook[name="definitions"] tw-hook {
    background-color: green !important;
}
3

Thank you for your help!

That did work, but it also changed all other float-boxes.

I found the following in the harlowe manual and it worked fine. The css you suggested changed this to green as well, but only while the “definition” float-box was open. It went back to white when the “hide” was clicked.

(enchant:?passage,
	(float-box:"=XX=","=YYY=") +
	(bg:white) +
	(color:black) +
	(b4r-color:gray) +
	(b4r:"solid") +
	(b4r-size:0,4,4,0))

I assume it’s the !important that is overriding everything? I have been trying to learn about css values.

4

I tried your css with a unique div class. It sort of worked. The other float boxes don’t go green, but some of the text from the float-box underneath is included in it.

I think I should probably create a new topic for this. The part of the text that appears on top is in columns and includes story links [[choices]]. The float box is created using the enchant?passage I wrote above.

So to recap. Main float-box:

(enchant:?passage,
	(float-box:"=XX=","Y") +
	(bg:white) +
	(color:black) +
	(b4r-color:gray) +
	(b4r:"solid") +
	(b4r-size:0,4,4,0))

Code for the float box for definitions:

(link-rerun:"Show definitions")[|definitions>[(float-box:"=XX=","=YY=")[<div class="definitions">List of definitions using the dialog macro when clicked on them.
===>
(text-size:0.8)[(link-rerun:"hide definitions")[(hide:?definitions)]]</div>]]]

Css in stylesheet

.definitions {
    background-color: green !important;
}

In the passage this text appears above everything when the definitions float box is opened:

|=
==>
[[Choice]]
=|
(link:'Choice 2')[Are you [[Choice 2.1]] or [[Choice 2.2]]?]
|==|

I technically can just make sure the float box doesn’t appear over the last line, but I’m too curious as to the reason not to include it.

Additional question: is there a way to decide the order of float boxes? I thought they would appear in the order they appear in the code, but my last float box to be listed in the code appears over my definitions one, so now I’m unsure how the order is decided.

Code for the last float-box, which I use as a sort of bar with links to various resources that always appears at the bottom.

(float-box:"=XX=","====Y")[
---
|=
<==
<a href="Website" target:"_blank" rel="noopener noreferrer"><img src="logo.png" width="250" height="32"></a>
=|=
=><=
(text-size:0.9)[Link to resources]
=|
==>
(text-size:0.9)[Link to either undo or restart]]

Apologies, that was a lot. I just didn’t want to leave anything out.
Thanks for the help. This is really helping me understand, even if my learning curve is barely curving.

5

I strongly suggest using you learn to use your web-browser’s Web Developer Tools to Inspect the HTML elements that your Passage content is generating, it will help you understand what effect your code has on the page’s HTML structure and how to craft CSS selectors that target the elements you want them to. I would also suggest incrementally increasing the styling you’re applying bit by bit so you can Inspect how it’s being applied and to what…

warning: The visual effect associated with Harlowe’s Passage Transition process ignores block based elements like the classed <div> you’re wrapping the “List of definitions…” text in, which will cause it to be displayed at a different rate that the other Passage content. To overcome this behaviour you need to alter the block based element types you use to be display as inline-block with a width of 100%.

div {
    display: inline-block;
    width: 100%;
}

Personally I would refrain from using them, and use a Named Hook instead.

If you Inspect the elements of a simple Passage that only contains textual content with not styling applied…

Story blah blah

…you will see it generates a HTML structure like the following…

<tw-story tags="">
	<tw-passage tags="">
		<tw-sidebar>
			<tw-icon tabindex="0" alt="Undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
			<tw-icon tabindex="0" alt="Redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
		</tw-sidebar>
		Story blah blah
	</tw-passage>
</tw-story>

And if you alter the Passage content you include a basic variation of your (enchant: ?Passage) macro call…

(enchant: ?passage, (float-box: "=XX=","Y"))
Story blah blah

…you will see the above HTML structure changes to something like the following…

<tw-story tags="">
	<tw-enchantment style="display: block; width: 50vw; max-width: 50vw; left: 25vw; box-sizing: content-box; overflow-y: auto; height: 100vh; position: fixed; top: 0vh; padding: 1em; background-color: rgb(0, 0, 0);">
		<tw-passage tags="">
			<!-- tw-sidebar elements removed to simplify example -->
			<tw-expression type="macro" name="enchant" return="command"></tw-expression>
			Story blah blah
		</tw-passage>
	</tw-enchantment>
</tw-story>

…and you will discover that the default structure has been altered to include a element between the element and the element, and this can effect how you craft CSS selectors.

note: you may want to consider using the (change:) macro instead of (enchant:), because the late re-applies it’s effect after every dynamic change to the structure of the current page (like when you use a link to display additional content). Where as the format only applies its effect once when the targeted content is first added to the page.

(change: ?Passage,
	(float-box: "=XX=","=YYY=") +
	(bg: white) +
	(color: black) +
	(b4r-color: gray) +
	(b4r: "solid") +
	(b4r-size: 0,4,4,0))
Story blah blah

Now if will add your ‘choices’ structure to the simple Passage example…

(change: ?Passage, (float-box: "=XX=","Y"))\
Story blah blah

|=
==>
[[Choice]]
=|
(link:'Choice 2')[Are you [[Choice 2.1]] or [[Choice 2.2]]?]
|==|

…and Inspect what additional HTML gets generated…

<tw-columns>
	<tw-column type="left" style="width:50%; margin-left: 0em; margin-right: 1em;">
		<tw-align style="text-align: right;">
			<tw-expression type="macro" name="link-goto" return="command">
				<tw-link tabindex="0" data-raw="">Choice</tw-link>
			</tw-expression>
			<br>
		</tw-align>
	</tw-column>
	<tw-column type="right" style="width:50%; margin-left: 1em; margin-right: 0em;">
		<tw-expression type="macro" name="link" return="changer"></tw-expression>
		<tw-hook>
			<tw-link tabindex="0" data-raw="">Choice 2</tw-link>
		</tw-hook>
		<br>
	</tw-column>
</tw-columns>

…we discover when looking at the CSS being applied that the element is displayed using flex, which affects its flow relationship with other elements of the page. One of these being that it’s content now appears “above” (has a higher z-index value) that of other elements like those of your “Show definitions” float-box.

To fix this you need to increase the z-index of the “Show definitions” float-box, like so…

tw-hook[name="definitions"] tw-hook {
	background-color: green !important;
	z-index: 5;
}

note: I used a value of 5 for no particular reason other than it worked in my test project, you may need to use a different value for your project.

6

Thank you so much!! I have begun inspecting after every iteration and I think I’m really beginning to grasp some fundamentals.