Differences

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

--- plugin:wrap:extensions [2019-08-24 23:40] – trailjeep
+++ plugin:wrap:extensions [2024-04-07 03:16] (current) – [Checklist with numbered and unnumbered list items] 45.83.220.205
@@ Line 5: / Line 5: @@
 These are some extensions to the [[..|Wrap Plugin]] created by users. Add these to your template’s screen.css.
-\\
-\\
 ===== Padding =====
@@ Line 32: / Line 31: @@
 Usage: ''%%<div vert_space></div>%%''
-\\
-\\
 ===== HTML5 columns =====
@@ Line 65: / Line 62: @@
 </code>
-\\
-\\
 ===== Full width images =====
@@ Line 83: / Line 78: @@
-\\
-\\
 ===== Evenly spaced boxes =====
 Create multiple wrap boxes of equal height, spaced evenly across the page. This is less error-prone and better looking than using x%, left/right, half or third or quarter. It won't work in IE 9 or lower.   --- [[user>zioth|zioth]] //2018-11-08//
 <code css>
-&.wrap_even_widths {
+.plugin_wrap.wrap_even_widths {
   display: flex;
@@ Line 108: / Line 102: @@
     <div box>Box3</div>
   </div>
-\\
-\\
 ===== Content Nice Boxes =====
-**[[http://deseng.ryerson.ca/dokuwiki/wiki:content_blocks_with_wrap|Examples]]**
+**[[http://deseng.ryerson.ca/dokuwiki/wiki:content_blocks_with_wrap|Examples]]** <sup>[[https://web.archive.org/web/20190825163214/http://deseng.ryerson.ca/dokuwiki/wiki:content_blocks_with_wrap|Archived]] on 25 August 2019</sup>
 I've found a nice (I think) way to use WRAP to make content boxes suitable to make announcements, some types of alerts, floating notes, etc. The general look is rather like content boxes on the Wikipedia main page.
@@ Line 229: / Line 222: @@
 --- [[user>florious|florious]] //2019-03-19 15:09//
-\\
-\\
 ===== Change format of any ordered list =====
@@ Line 315: / Line 305: @@
 </file>
-\\
-\\
 ===== Simpler boxes =====
@@ Line 422: / Line 410: @@
 ===== Replace the Note Plugin =====
-If you want the wrap plugin to handle the syntax of the [[plugin:note|Note Plugin]], then add this file in the syntax directory of the wrap plugin (''lib/plugins/wrap/syntax/''). When you're done, you can remove the note plugin. ''<note>...</note>'' will be handled by the wrap plugin. There is no need to rewrite your pages.
+If you want the wrap plugin to handle the syntax of the [[plugin:note|Note Plugin]], then add this file in the syntax directory of the wrap plugin (''lib/plugins/wrap/syntax/''). When you're done, you can remove the note plugin. ''%%<note>...</note>%%'' will be handled by the wrap plugin. There is no need to rewrite your pages.
 <code php syntax/divnote.php>
@@ Line 434: / Line 422: @@
  * @author     Schplurtz Le Déboulonné <schplurtz arob laposte dot net>
  */
-require_once(dirname(__FILE__).'/div.php');
 class syntax_plugin_wrap_divnote extends syntax_plugin_wrap_div {
@@ Line 467: / Line 453: @@
 ===== Poems =====
-Nice display of poems - replace [[doku>plugin:plaintext]] / [[doku>plugin:poem]]  --- [[user>trailjeep]] //2019-08-24//
+Nice display of poems --- replace [[plugin:plaintext]] / [[plugin:poem]]  --- [[user>trailjeep]] //2019-08-24//
   <wrap poem>
@@ Line 475: / Line 461: @@
   </wrap>
-  span.wrap_poem { display: block; margin: 2em auto; padding: 1em 2em; width: max-content; max-width: 90%; white-space: pre-wrap; background-color: #333; border: unset; border-radius: 1em; text-align: center; }
+<code css>
-Bonus - if [[doku>plugin:icons]] installed
+span.wrap_poem {
-  span.wrap_poem:before { font-family: fontawesome; font-size: 2em; content: "\f299"; float: left; }
+  display: block;
+  margin: 2em auto;
+  padding: 1em 2em;
+  width: max-content;
+  max-width: 90%;
+  white-space: pre-wrap;
+  background-color: #333;
+  color:#fff;
+  border: unset;
+  border-radius: 1em;
+  text-align: center;
+}
+</code>
+Bonus --- if [[plugin:icons]] installed
+<code css>
+span.wrap_poem:before {
+  font-family: fontawesome;
+  font-size: 2em;
+  content: "\f299";
+  float: left;
+}
+</code>
+===== Wikipedia type hatnote =====
+Plugin Wrap can be used to add [[https://en.wikipedia.org/wiki/Wikipedia:Hatnote|hatnotes]], indented text under a header used to add, for instance, main article links.
+<file css userstyle.css>
+.wrap_hatnote {
+  padding-left: 1.6em;
+  font-style: italic;
+}
+.wrap_hatnote em, .wrap_hatnote i {
+  font-style: normal;
+}
+</file>
+ --- [[user>erk70|erk70]] //2022-05-15 19:18//
+===== Checklist with numbered and unnumbered list items =====
+By creating a list of items, the WRAP plugin can be used to show them as checklist items. Use an ordered list item (''-'') to show an outstanding item (an empty check box) and an unordered list item (''*'') to show a finished checklist item (a ticked box).
+The simplest version might not work with older browsers:
+<file css userstyle.css>
+.wrap_checklist ol {
+  list-style-type: "☐ ";
+}
+.wrap_checklist ul {
+  list-style-type: "☑ ";
+}
+</file>
+This version does, but seems to have some bugs related to multilevel lists. (In this example, I also greyed out and struck through the finished item, but you can remove that by not including the last rule).
+<file css userstyle.css>
+.wrap_checklist ol, .wrap_checklist ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0px 0px;
+}
+.wrap_checklist ol li, .wrap_checklist ul li {
+  padding: 5px 0;
+  display: flex;
+}
+.wrap_checklist ol li:before, .wrap_checklist ul li:before {
+  margin-right: 5px;
+}
+.wrap_checklist ol li:before {
+  content: "☐";
+}
+.wrap_checklist ul li:before {
+  content: "☑";
+}
+.wrap_checklist ul li {
+  color: #999;
+  text-decoration: line-through;
+}
+</file>
+Example of a list:
+<code>
+<WRAP checklist>
+  - Item to do
+  * Done item
+</WRAP>
+</code>
+ --- [[user>erk70|erk70]]
-\\
-\\
 ===== See also =====
   * [[plugin:data:list_of_employees|DokuWiki usecase: List of employees]]