Creating Spoiler Text Using HTML Blocks

Using Ghost
1

Hey all.

On the blog I’m getting ready to launch, I’ll occasionally be doing reviews of things that might discuss spoilers I’d like to hide with hover text, like you often see on Reddit or Steam.

I looked for articles on how to do this and found two of them here
and here
, both of which recommend using CSS.

The first one straight up doesn’t work for me, even though it does in the source article. I’m not sure why, but maybe someone can see a reason. In the second post, I decided to use his Hover Reveal implementation. This does work, but as you can see from how it’s defined, it uses static colours that are in line with his template:

<a
    style="background:#555; color:#555"
    onmouseover="this.style.background='#555';
    this.style.color='#fff'"
    onmouseout="this.style.background='#555';
    this.style.color='#555'"
>

I use the Tuuli template, which has several different colour schemes users can pick from, so I’d rather it use whatever they have it set to. I know there are supposed to be CSS variables you can use to set colours to ones that are present in themes, but I haven’t managed to find a definitive list of them. Does anyone know if it’s possible to either get the first post’s method to work or to change this second method to reflect theme colours? Basically, I’d like the text to appear as normal with the rest of the post when it’s hovered over and just blocked out with a slightly darker background colour when it isn’t.

For now, using the example above works good enough, the colour change is just jarring.

Cheers all!

2

You could hijack the “highlight” format (ctrl/cmd+alt+h on selected text) within the rich-text editor instead of using a HTML block. Then in your global or post code injection field:

<style>
mark {
  background-color: black;
  color: black;
  transition: color 0.2s, background-color 0.2s;
  cursor: pointer;
}

mark:hover {
  color: inherit;
  background-color: inherit;
}
</style>

There’s no JS needed for this type of hover.

3 Likes
3

Oh, I like this! So, the only code injection I’m familiar with is the header and footer, which would impact all posts. Is it possible to do this only on the posts I’d want to use spoiler tags with, so that the highlight function would still be available for others?

Cheers! :slight_smile:

EDIT: Just added the code as an HTML block in the post I wanted it in and it works great! I won’t need it often so I’ll just put that block into posts that require it. Thanks so much Kevin! :slight_smile:

4

Yes, each post has a Code Injection area in its settings menu inside the editor where you can add header/footer code.

Alternatively, as you found you can also add it via a HTML card - if you go that route I would suggest adding the card as a snippet so you can quickly add it to any post where you want to use spoilers.

Just be aware that adding it on a per-post basis (either via code injection, or HTML card) means you can’t change the style globally, you’d need to go into each post and edit it. If you need that option then a global style would likely be better. For a conditional global style you could always edit your theme to add a class to the body when a private tag is added like #has-spoilers and adjust the CSS selector to match.

1 Like
5

Good point! I’ll keep that in mind as well. Learning as I go here, but learning a lot. :slight_smile: Thank you again, appreciate you!