How to get background color behind text only!

Question

Hey everyone! I asked this question before but it seems that it disappeared. Anyway, to simplify my question since the last one was pretty long, I'm running into a problem where I can't have a background color behind my text in SugarCube 2.21.0

I have a background image for the whole story but I want the text to also have a background color behind it. The "box" of color will only be the width of the text. Can't seem to get it to work cause I end up only getting borders that set of to the side.

Maybe I should have a colored box with set height and width where the whole text is in? So maybe when the player scrolls down only the text moves?

Any suggestions and advice will be my appreciated!

Answer 1

If you want to only change the backgroundcolor around the text, you can do it like this:

<span style="background-color:red;">YourText</span>

 

Comments

Thanks for the suggestion but it doesn't work! Is there anyway to have it in the CSS file instead?

---

Just saw that this was a problem with SugarCube 2.21.0. It works fine in version 2.22.0+, so if upgrading is an option, you could try that.

If you want to use CSS, it'd have to be something like this:

.test {
background-color: red;
}

Use it like this:

<span class="test">YourText</span>

Not sure whether this is broken in your version of sugarcube too though, but it's worth a try.

---

Oh whoa! It worked!! Thanks!!

I think it would be best if I upgraded to 2.22 cause the color breaks off in some pages. Regardless, this is progress. Thanks!

---

What do you mean when you say "breaks off"? - Just in case this is a persistant problem.

---

When I put my text in the span class it only forms text color around paragraphs, but when I tag the whole page as .test it applies the color to all the text in one huge box.

---

That's normal - <span> specifically only effects the lines of the text within. If you however add this class to the whole passage, this will modify a <div> instead of a span. Depending on which effect you want, I'm afraid you'll have to manually wrap your text into a <span> or create a widget to automatically modify your passages.

---

Don't worry, I'll just add the .test tag to every page. Seems better than writing out <span> code cause thats the aesthetic I was going for. I even found a way to modify the background color opacity! Now all I need is to be able to round out the edges (have the edge of the square be round) and I've solved a good chuck of my problem!

---

For rounded corners you use the border-radius Property. This won't work with tagging the passages or <span> though. You'd need to wrap the pages in:

<div class="test">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

Or add a new div to your page to display the content of you passage.

---

Oh my God! I just added the border radius directly to the class in the CSS file and it worked!

I'm so happy I could legit cry!

Thank you so much!!

---

> Just saw that this was a problem with SugarCube 2.21.0.

No it's not.  I'm unsure what you ran into, but the example code works fine in v2.21.0.

---

Just read in the documentation for 2.22.0:

"Added a parser specifically for the HTML <style> tag so that, in addition to now working as expected, it supports image passage transclusion."

and assumed this pertained to the problem at hand. Guess it must have been something else then.

---

As noted right in its description, that was in reference to <style> tags, not style attributes.

---

Would any of this work for Harlowe?

I am trying to achieve the same effect but when I insert the span code in the CSS, as above, nothing happens.