Adjusting text in a div

Twine Version: 2.3.16
Story Format: 2.36.1

I recently managed to get sidebars buttons to open in an overlay, thanks to StoryMenu and/or StoryCaption overlay

In StoryCaption, I have this:

<<link "Hints">>
<<script>>
Dialog.setup("Hints");
Dialog.wiki(Story.get("Hints").processText());
Dialog.open();
<</script>>
<</link>>

That works perfectly fine.

I was able to add a map as an image in one of these, which also works:

<img src="img/misc/map.jpg">

Although it is an image only, no clicking. I will use links and button for navigation for now

Then I wanted to add an image as a background to text info:

<div id="hintdiv" style= "background-image: url('img/bg/old paper.jpg');">
my text 
</div>

Which works, except that my text is now right up to the left and right edges, and I also need to change the colour of it to suit the background and keep it legible.

So my question is, where/how do I make this change? Is it a CSS thing, or can I write it straight into the above hintdiv code?

I’m not sure exactly where you want the text. However, the text color can just be added under style.

<div id="hintdiv" style="color: red; background-image: url('img/bg/old paper.jpg');">
my text 
</div>

You should get rid of the space here too: style= " should be style="

Thank you again.

I also added

padding-left: 10px;

and everything looks the way I want it now. :slight_smile:

1 Like