/* For Inline Spoilers */
div.spoiler-head.collapsed.no-icon,
div.spoiler-head.expanded.no-icon{
  background:0 0;
  cursor:auto;
  padding:0 6px;
}

/* The text inside the spoiler */
/*
div.spoiler-body{
  background:#222;
}
*/

/* The text of the title */
.wp-block-inline-spoilers-block .spoiler-title,
.wp-block-inline-spoilers-block summary{
  font-variant: small-caps;
  /* The little + symbol */
background-image: url(data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=);
  background-color: #222;
  color: #d24d04;
  border-bottom: 1px solid #d24d04 !important;
  background-position: 6px;
  background-repeat: no-repeat;
  cursor: pointer;
  font-weight: 100;
  line-height: 1.5;
  list-style: none;
  margin: 0 -10px -1px;
  outline: 0;
  padding: 0 6px 0 23px;
  text-align: left;
}

/* The whole of the spoiler block */
.wp-block-inline-spoilers-block {
  background: #222;
  border: 1px solid #333;
  padding: 2px 10px 2px 10px;
  box-sizing: border-box;
  clear: both;
}
/* unsure */
.wp-block-inline-spoilers-block:has(.spoiler-wrap){
  background:transparent;
  border:0;
  padding:0;
}

Customization - 1.5.5 ∞

Override classes defined in wp-content/plugins/inline-spoilers/styles/inline-spoilers-styles.css with your theme styles.

This does not work, for all kinds of reasons.

1. There was some sort of caching happening, but clearing my browser's cache and reloading didn't work.

2. There is no WordPress caching plugin.

3. There is no sitewide caching that I know of.

4. There was a ?ver= appended to CSS URLs which interfered. I changed this with Code Snippets.

WordPress remove version query string

function remove_cssjs_ver($src) {
    if(strpos($src, '?ver='))
        $src = remove_query_arg('ver', $src);
    return $src;
}

add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2);
add_filter('script_loader_src', 'remove_cssjs_ver', 10, 2);

Solution - I made changes within BlogText custom CSS:

custom CSS

div.spoiler-wrap {
  background-color: #222;
  border: 1px solid #333;
  border-left-width: 2px;
  clear: both;
  display: block;
}
div.spoiler-head {
  color: #d24d04;
  font-weight: normal;
}
div.spoiler-head.collapsed {
  padding-left: 15px;
}
div.spoiler-head.expanded {
  padding-left: 15px;
}
div.spoiler-head.collapsed.no-icon,
div.spoiler-head.expanded.no-icon {
  background: 0 0;
}
div.spoiler-body {
  background: #222;
  border-top: 1px solid #d24d04;
  padding: 0px 6px 6px 6px !important;
}
p.wp-block-inline-spoilers-block {
  display: none;
}

default

div.spoiler-wrap{background-color:#e9e9e6;border:1px solid #c3cbd1;border-left-width:2px;clear:both;display:block;margin:6px 0;padding:0}div.spoiler-head{color:#2a2a2a;cursor:pointer;display:block;font-weight:700;line-height:1.5em;margin-left:6px;padding:0 6px 0 14px;text-align:left}div.spoiler-head.collapsed{background:url(data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=) left center no-repeat}div.spoiler-head.expanded{background:url(data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw==) left center no-repeat}div.spoiler-head.collapsed.no-icon,div.spoiler-head.expanded.no-icon{background:0 0;cursor:auto;padding:0 6px}div.spoiler-body{background:#f5f5f5;border-top:1px solid #c3cbd1;padding:2px 6px}p.wp-block-inline-spoilers-block{display:none}

default, prettified

div.spoiler-wrap {
  background-color: #e9e9e6;
  border: 1px solid #c3cbd1;
  border-left-width: 2px;
  clear: both;
  display: block;
  margin: 6px 0;
  padding: 0;
}
div.spoiler-head {
  color: #2a2a2a;
  cursor: pointer;
  display: block;
  font-weight: 700;
  line-height: 1.5em;
  margin-left: 6px;
  padding: 0 6px 0 14px;
  text-align: left;
}
div.spoiler-head.collapsed {
  background: url(data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=)
    left center no-repeat;
}
div.spoiler-head.expanded {
  background: url(data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw==)
    left center no-repeat;
}
div.spoiler-head.collapsed.no-icon,
div.spoiler-head.expanded.no-icon {
  background: 0 0;
  cursor: auto;
  padding: 0 6px;
}
div.spoiler-body {
  background: #f5f5f5;
  border-top: 1px solid #c3cbd1;
  padding: 2px 6px;
}
p.wp-block-inline-spoilers-block {
  display: none;
}

Alternatives ∞

Simple Spoiler
Tiny Spoiler (Abandoned)

Last updated 2025-04-21 at 00:32:34

spiralofhope

Inline Spoilers

2024-05-31 - 1.5.5 ∞

Usage ∞

Customization - 2.1.0 ∞

Customization - 1.5.5 ∞

Alternatives ∞

2 comments on “Inline Spoilers”

Leave a Reply Cancel reply

Search