LIMITED TIME DEAL

NOV 27TH – DEC 6TH

🔥 BLACK FRIDAY SALE 🔥

GET ADD-ONS BUNDLE WITH 34% OFF

GET ADD-ONS BUNDLE – FROM ONLY $39

DISCOUNT CODE APPLIED AUTOMATICALLY

Customizing the spoiler shortcode appearance

Table of contents

  1. Spoiler Title
    1. Default state
    2. Hover state
  2. Spoiler Icon
  3. Spoiler Content

In this article, you’ll learn how to customize the appearance of the Spoiler shortcode. Follow the instructions below.

Add custom CSS class to your shortcode:

[su_spoiler class="my-custom-spoiler"] ... [/su_spoiler]

Then, navigate to Dashboard → Shortcodes → Settings and add any of the following snippets to the Custom CSS code field. You can play with the code below to adjust colors or to add some extra styling.

Spoiler Title

Default state

.su-spoiler.my-custom-spoiler > .su-spoiler-title {

	/* Text Size */
	font-size: 21px;

	/* Background Color */
	background: #ff00ff;

	/* Text Color */
	color: #ffffff;

}

Hover state

.su-spoiler.my-custom-spoiler > .su-spoiler-title:hover {

	/* Text Size */
	font-size: 21px;

	/* Background Color */
	background: #ff00ff;

	/* Text Color */
	color: #ffffff;

}

Spoiler Icon

.su-spoiler.my-custom-spoiler > .su-spoiler-title > .su-spoiler-icon {
	
	/* Icon Color */
	color: #00ff00;
	
}

Spoiler Content

.su-spoiler.my-custom-spoiler > .su-spoiler-content {

	/* Text Size */
	font-size: 21px;

	/* Background Color */
	background: #ffff00;

	/* Text Color */
	color: #000000;

}
Helpful?
🤝 Thank you!