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

Add custom CSS class to your shortcode:

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

Then, navigate to Dashboard → Shortcodes → Settings and paste the following code into the Custom CSS code field:

/* Spoiler Title */
.su-spoiler.my-custom-spoiler > .su-spoiler-title {

	/* 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;

}

You can play with the code above to adjust colors or to add some extra styling.