How to Make a Graybar for Spoilers in Dreamwidth

[ysabetwordsmith]

One way to hide spoilers for people who don't want them, while presenting content notes for those who do want them, is to use a graybar. This makes the text and background the same color (except for links, so watch out for those). To read the text, just highlight it and the words will pop out.


Put this code at the beginning of the intended graybar text:
~span style="COLOR: rgb(102,102,102); BACKGROUND-COLOR: rgb(102,102,102)"~

Put this code at the end of the intended graybar text:
~/span~

To activate the code, replace the ~ with angle brackets. The angle brackets tell Dreamwidth that you are speaking to it in code and it should do something. So you can't print them without it activating, you have to replace them with something else or use spaces.

For reference, span style means do something nonstandard to the text. COLOR means the text color and BACKGROUND-COLOR means what is behind it. That rgb code is for gray. The / means "stop doing this" when used in code inside angle brackets.

You can also make a spoiler tag that works in comments.

And that's about the extent of my coding skill.

Comments

[veronyxk84]

I don’t use spoilers very often, but this is useful, thank you!

Tip: if you want to display the < and > in a line of code but stop the HTML editor from reading it as code, you could replace them with &lt; for < and &gt; for >

<span style="COLOR: rgb(102,102,102); BACKGROUND-COLOR: rgb(102,102,102)">

I hope it's useful 😉

Well ...

[ysabetwordsmith]

Sadly the substitutions screw up for me more often than not. With a single symbol, it's more likely to work as intended.

[adore]

Not a newbie but have been wondering how to do this for years! Thanks!

You're welcome!

[ysabetwordsmith]

There are lots of things I've seen other people do, but didn't know how to do until somebody posted about it. Hence that list of links in the resource post.

[pangolin20]

Oh, if you want to have the cursor indicate that the spoiler tag can be clicked, use this:

<details>

<summary style="cursor:pointer">[Summary goes here]</summary>

[Content goes here]

</details>

To demonstrate:

Does this work?

It does.