(Trick: Pure CSS) Styling the Spoiler Tag by Wellwisher
Inspired by the ole twitter spoiler/ sensitive tag:
What you will achieve in 10 seconds or less:
Before:
After:
Tutorial
Step 1: Navigate to Admin Profile > Administration
Step 2: Then click on Appearance > Custom Styles > Click on "Edit Custom CSS"
Step 3: Paste the following CSS code, Done!:
/* Style Spoiler Tag by Wellwisher START*/
span.spoiler {
background-color: #E8ECF3 !important;
color: transparent;
display: block;
padding: 10px 20px;
border-radius: 4px;
HEIGHT: 43PX;
OVERFLOW: HIDDEN;
user-select: none;
}
span.spoiler::before {
content: 'This media may contain sensitive material. [ View ]';
color: #667C99;
margin: 0 auto;
display: table;
transition: All 0.2s ease-in-out;
margin-bottom: 20px;
}
span.spoiler:hover {
background-color: #D7DFEA !important;
cursor: pointer;
font-size: calc(14px - 1%)!important;
}
/* Style Spoiler Tag by Wellwisher END */
09/05/2024 - Updated CSS code to address minor bugs
