Differences

This shows you the differences between two versions of the page.

--- res:plugins:spoiler-tags [2022/10/15 23:12] – [Description] fraenkiman
+++ res:plugins:spoiler-tags [2026/04/08 18:57] (current) – [Demo] fraenkiman
@@ Line 1: / Line 1: @@
 ===== Spoiler Tags =====
-Author: [[https://www.clockworkknight.com|Tongara]]
+Author: [[https://www.clockworkknight.com|Tongara]], revised by [[https://frank-web.dedyn.io|Fraenkiman]]
 ==== Description ====
@@ Line 17: / Line 17: @@
 {{:res:plugins:tongara:spoiler_with_spoiler_title_opened.png?300|}}
-You can style the spoiler very easily by editing the spoiler.css file found in the plugin's /res folder. The code uses HTML5's "<details>" and "<summary>" elements, making it very easy to create hidden content on websites.
+You can style the spoiler very easily by editing the //spoilertags.css// file found in the plugin's /res folder. The code uses HTML5's "<details>" and "<summary>" elements, making it very easy to create hidden content on websites.
+Example:
+<code css>details > summary {
+    list-style-type: none;
+    color: #B83C32; /* Colors of the font of the spoiler title */
+    font-weight: bold; /* Font style of the spoiler title */
+    text-decoration: none;
+    cursor: pointer;
+}
+details > summary:hover {
+    text-decoration: underline;
+}
+details > summary::before {
+    /* === Image as expand sign; size is not scalable === */
+    content: url(../../../fp-plugins/spoilertags/img/expand_right.png);
+    /* vertical-align: top; */
+}
+details[open] > summary::before {
+    /* === Image as expand sign; size is not scalable === */
+    content: url(../../../fp-plugins/spoilertags/img/expand_down.png);
+    /* vertical-align: top; */
+}
+details {
+    display: block; /* Do not deactivate */
+    padding: 5px;
+    /* === Framing of the hidden content inside the spoiler tag === */
+    border: #ccc solid 1px;
+    border-radius: 3px;
+}
+details:hover {
+    /* === Framing of the hidden content inside the spoiler tag === */
+    border: #999 solid 1px;
+}
+details[open] > summary {
+    margin-bottom: 5px;
+    /* === italic font of spoiler title when expanded === */
+    font-style: italic;
+}
+</code>
-==== Demo ====
-[[https://www.clockworkknight.com/flat/?x=entry:entry200306-031247|]]
 ==== Download ====
-{{ res:plugins:tongara:spoilertags1_0_1.zip |}}
+{{ res:plugins:tongara:spoilertags1_0_3.zip |}}
 **Support**
@@ Line 30: / Line 75: @@
 === Changelog: ===
+== 2022-12-18 (V1.0.3) ==
+  * Added: css-file v0.2 with some design examples
+== 2022-12-14 (V1.0.2) ==
+  * Fixed: The plugin crashes when the BBCode plugin is not enabled. Thanks to Arvid for the hint
 == 2022-10-15 (V1.0.1) ==
   * Added polyfill-JavaScript for IE and Edge in the body
   * Added Instructions