Introduction

This “blackout” effect (Heimu) is a lot of fun. Unfortunately, it won’t render on the homepage, and writing it directly in Markdown is a bit of a pain.

Usage

When writing a post, select Edit as HTML and insert the following:

1

<span class="heimu" title="Tooltip text">Text to hide</span>

Inserting CSS

I originally wanted to get the blackout effect working on the homepage, but testing showed it just won’t render there. (Why won’t it render?! Imagine Warma’s voice here.)

Go to your dashboard, find the Footer settings, and paste the code below. Alternatively, you can insert it into the WordPress Custom CSS section (just remember to remove the <style> tags).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<style>
.heimu, .heimu a, a .heimu, .heimu a.new 
{
  background-color: #252525;
  color: #252525;
  text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu 
{
  color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu 
{
  color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu 
{
  color: #BA0000 !important;
}
</style>

Note: Since the Argon theme doesn’t render comments, I’ve left the following out of the code block:

/* Read more: https://zh.moegirl.org/MediaWiki:Mobile.css This content is cited from Moegirlpedia (https://zh.moegirl.org). Text content is available under CC BY-NC-SA 3.0. */

References

Re: Implementing Blackout on Moegirlpedia – Vanilla_chan – Blog Garden

Moegirl Blackout CSS Code - Hiyoung’blog