plugin:wrap:extensions
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
plugin:wrap:extensions [2018-11-09 05:02] – zioth | plugin:wrap:extensions [2024-04-07 03:16] (current) – [Checklist with numbered and unnumbered list items] 45.83.220.205 | ||
---|---|---|---|
Line 4: | Line 4: | ||
These are some extensions to the [[..|Wrap Plugin]] created by users. Add these to your template’s screen.css. | These are some extensions to the [[..|Wrap Plugin]] created by users. Add these to your template’s screen.css. | ||
+ | |||
===== Padding ===== | ===== Padding ===== | ||
Line 78: | Line 79: | ||
===== Evenly spaced boxes ===== | ===== 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. | 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. | ||
<code css> | <code css> | ||
- | &.wrap_even_widths { | + | .plugin_wrap.wrap_even_widths { |
- | display: flex; | + | display: flex; |
- | .plugin_wrap { | + | |
- | flex: 1; | + | flex: 1; |
- | &: | + | |
- | margin-right: | + | margin-right: |
- | } | + | } |
- | } | + | } |
} | } | ||
</ | </ | ||
Line 101: | Line 103: | ||
</ | </ | ||
+ | ===== Content Nice Boxes ===== | ||
- | ===== Content Boxes ===== | + | **[[http:// |
I've found a nice (I think) way to use WRAP to make content boxes suitable to make announcements, | I've found a nice (I think) way to use WRAP to make content boxes suitable to make announcements, | ||
Line 111: | Line 114: | ||
--- [[user> | --- [[user> | ||
+ | |||
+ | <file css userstyle.css> | ||
+ | |||
+ | /* CONTAINER CLASS FOR ANNOUNCEMENTS & DEFAULT COLOURS*/ | ||
+ | .dokuwiki div.wrap_announcement { | ||
+ | padding: 10px 10px 0px; | ||
+ | margin-bottom: | ||
+ | overflow: hidden; | ||
+ | background-color: | ||
+ | border: 2px solid #bbbbbb; | ||
+ | } | ||
+ | |||
+ | /* DEFAULT COLOURS & MODS FOR HEADINGS IN ANNOUNCEMENTS. */ | ||
+ | .dokuwiki div.wrap_announcement h2, | ||
+ | .dokuwiki div.wrap_announcement h3, | ||
+ | .dokuwiki div.wrap_announcement h4, | ||
+ | .dokuwiki div.wrap_announcement h5, | ||
+ | .dokuwiki div.wrap_announcement h6 { | ||
+ | padding: 5px 10px 0px; | ||
+ | margin: -10px -10px 10px; | ||
+ | border: 0; | ||
+ | color: #000000; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | /* ANNOUNCEMENT COLORS */ | ||
+ | .dokuwiki div.wrap_green { | ||
+ | background-color: | ||
+ | border: 2px solid #DEF2CF; | ||
+ | } | ||
+ | .dokuwiki div.wrap_blue { | ||
+ | background-color: | ||
+ | border: 2px solid #D9E5FD; | ||
+ | } | ||
+ | .dokuwiki div.wrap_orange { | ||
+ | background-color: | ||
+ | border: 2px solid #FEECBD; | ||
+ | } | ||
+ | .dokuwiki div.wrap_red { | ||
+ | background-color: | ||
+ | border: 2px solid #FED1CD; | ||
+ | } | ||
+ | .dokuwiki div.wrap_yellow { | ||
+ | background-color: | ||
+ | border: 2px solid #F8F8B4; | ||
+ | } | ||
+ | .dokuwiki div.wrap_purple { | ||
+ | background-color: | ||
+ | border: 2px solid #FCD9F1; | ||
+ | } | ||
+ | .dokuwiki div.wrap_aqua { | ||
+ | background-color: | ||
+ | border: 2px solid #CEE5EE; | ||
+ | } | ||
+ | |||
+ | /* COLOUR MODS FOR HEADINGS IN ANNOUNCEMENTS. */ | ||
+ | .dokuwiki div.wrap_green h2, | ||
+ | .dokuwiki div.wrap_green h3, | ||
+ | .dokuwiki div.wrap_green h4, | ||
+ | .dokuwiki div.wrap_green h5, | ||
+ | .dokuwiki div.wrap_green h6 | ||
+ | { background-color: | ||
+ | |||
+ | .dokuwiki div.wrap_blue h2, | ||
+ | .dokuwiki div.wrap_blue h3, | ||
+ | .dokuwiki div.wrap_blue h4, | ||
+ | .dokuwiki div.wrap_blue h5, | ||
+ | .dokuwiki div.wrap_blue h6 | ||
+ | { background-color: | ||
+ | |||
+ | .dokuwiki div.wrap_orange h2, | ||
+ | .dokuwiki div.wrap_orange h3, | ||
+ | .dokuwiki div.wrap_orange h4, | ||
+ | .dokuwiki div.wrap_orange h5, | ||
+ | .dokuwiki div.wrap_orange h6 | ||
+ | { background-color: | ||
+ | |||
+ | .dokuwiki div.wrap_red h2, | ||
+ | .dokuwiki div.wrap_red h3, | ||
+ | .dokuwiki div.wrap_red h4, | ||
+ | .dokuwiki div.wrap_red h5, | ||
+ | .dokuwiki div.wrap_red h6 | ||
+ | { background-color: | ||
+ | |||
+ | .dokuwiki div.wrap_yellow h2, | ||
+ | .dokuwiki div.wrap_yellow h3, | ||
+ | .dokuwiki div.wrap_yellow h4, | ||
+ | .dokuwiki div.wrap_yellow h5, | ||
+ | .dokuwiki div.wrap_yellow h6 | ||
+ | { background-color: | ||
+ | |||
+ | .dokuwiki div.wrap_purple h2, | ||
+ | .dokuwiki div.wrap_purple h3, | ||
+ | .dokuwiki div.wrap_purple h4, | ||
+ | .dokuwiki div.wrap_purple h5, | ||
+ | .dokuwiki div.wrap_purple h6 | ||
+ | { background-color: | ||
+ | |||
+ | .dokuwiki div.wrap_aqua h2, | ||
+ | .dokuwiki div.wrap_aqua h3, | ||
+ | .dokuwiki div.wrap_aqua h4, | ||
+ | .dokuwiki div.wrap_aqua h5, | ||
+ | .dokuwiki div.wrap_aqua h6 | ||
+ | { background-color: | ||
+ | |||
+ | </ | ||
+ | |||
+ | --- [[user> | ||
===== Change format of any ordered list ===== | ===== Change format of any ordered list ===== | ||
Line 194: | Line 305: | ||
</ | </ | ||
- | ===== Replace the note plugin | + | ===== Simpler boxes ===== |
- | If you want the wrap plugin to handle the syntax of the [[plugin: | + | No icon, just colors. |
+ | |||
+ | |< | ||
+ | <WRAP center round box 60%> | ||
+ | bloc simple | ||
+ | </ | ||
+ | |||
+ | <WRAP center round info 60%> | ||
+ | bloc information | ||
+ | </ | ||
+ | |||
+ | <WRAP center round tip 60%> | ||
+ | bloc astuce | ||
+ | </ | ||
+ | |||
+ | <WRAP center round important 60%> | ||
+ | bloc important | ||
+ | </ | ||
+ | |||
+ | <WRAP center round alert 60%> | ||
+ | bloc alerte | ||
+ | </ | ||
+ | |||
+ | <WRAP center round help 60%> | ||
+ | bloc aide | ||
+ | </ | ||
+ | |||
+ | <WRAP center round download 60%> | ||
+ | bloc téléchargement | ||
+ | </ | ||
+ | |||
+ | <WRAP center round todo 60%> | ||
+ | bloc à faire | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <code css userstyle.css.snippet> | ||
+ | /* | ||
+ | * plugin wrap boxes (and plugin note compat mode of wrap) | ||
+ | */ | ||
+ | div.dokuwiki { | ||
+ | div.plugin_wrap { | ||
+ | & | ||
+ | /* Inspired by hugo template seen on https:// | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | margin-top: 2rem; | ||
+ | margin-bottom: | ||
+ | padding: 20px 25px; | ||
+ | border-radius: | ||
+ | text-align: left; | ||
+ | width: auto !important; | ||
+ | background-image: | ||
+ | min-height: initial; | ||
+ | p: | ||
+ | margin: 0; | ||
+ | } | ||
+ | & | ||
+ | /* From hugo template seen on https:// | ||
+ | border-left: | ||
+ | background: #fdf7f7; | ||
+ | color: #b52b27; | ||
+ | } | ||
+ | & | ||
+ | /* From hugo template seen on https:// | ||
+ | border-left: | ||
+ | background: #fcf8f2; | ||
+ | color: #c97500; | ||
+ | } | ||
+ | & | ||
+ | border-left: | ||
+ | background: #f4ffee; | ||
+ | color: #57aa16; | ||
+ | } | ||
+ | & | ||
+ | border-left: | ||
+ | background: #fffded; | ||
+ | color: #b6a91a; | ||
+ | } | ||
+ | & | ||
+ | border-left: | ||
+ | background: #f5f7fa; | ||
+ | color: #195ab3; | ||
+ | } | ||
+ | & | ||
+ | border-left: | ||
+ | background: #f1eef4; | ||
+ | color: #7625b1; | ||
+ | } | ||
+ | & | ||
+ | border-left: | ||
+ | background: #f5f9f7; | ||
+ | color: #1aaf73; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | --- [[user> | ||
+ | |||
+ | ===== Replace the Note Plugin ===== | ||
+ | |||
+ | If you want the wrap plugin to handle the syntax of the [[plugin: | ||
<code php syntax/ | <code php syntax/ | ||
Line 208: | Line 422: | ||
* @author | * @author | ||
*/ | */ | ||
- | |||
- | require_once(dirname(__FILE__).'/ | ||
class syntax_plugin_wrap_divnote extends syntax_plugin_wrap_div { | class syntax_plugin_wrap_divnote extends syntax_plugin_wrap_div { | ||
Line 230: | Line 442: | ||
); | ); | ||
- | function handle($match, | + | function handle($match, |
if( $state === DOKU_LEXER_ENTER || $state === DOKU_LEXER_EXIT ) | if( $state === DOKU_LEXER_ENTER || $state === DOKU_LEXER_EXIT ) | ||
$match=preg_replace( $this-> | $match=preg_replace( $this-> | ||
Line 238: | Line 450: | ||
// vim: ai: | // vim: ai: | ||
</ | </ | ||
+ | |||
+ | ===== Poems ===== | ||
+ | |||
+ | Nice display of poems --- replace [[plugin: | ||
+ | |||
+ | <wrap poem> | ||
+ | line 1 | ||
+ | line 2 | ||
+ | line 3 | ||
+ | </ | ||
+ | |||
+ | <code css> | ||
+ | span.wrap_poem { | ||
+ | display: block; | ||
+ | margin: 2em auto; | ||
+ | padding: 1em 2em; | ||
+ | width: max-content; | ||
+ | max-width: 90%; | ||
+ | white-space: | ||
+ | background-color: | ||
+ | color:#fff; | ||
+ | border: unset; | ||
+ | border-radius: | ||
+ | text-align: center; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Bonus --- if [[plugin: | ||
+ | |||
+ | <code css> | ||
+ | span.wrap_poem: | ||
+ | font-family: | ||
+ | font-size: 2em; | ||
+ | content: " | ||
+ | float: left; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Wikipedia type hatnote ===== | ||
+ | |||
+ | Plugin Wrap can be used to add [[https:// | ||
+ | |||
+ | <file css userstyle.css> | ||
+ | .wrap_hatnote { | ||
+ | padding-left: | ||
+ | font-style: italic; | ||
+ | } | ||
+ | .wrap_hatnote em, .wrap_hatnote i { | ||
+ | font-style: normal; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | --- [[user> | ||
+ | |||
+ | |||
+ | |||
+ | ===== 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 ('' | ||
+ | |||
+ | 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: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 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 { | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | .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: | ||
+ | } | ||
+ | .wrap_checklist ol li:before { | ||
+ | content: " | ||
+ | } | ||
+ | .wrap_checklist ul li:before { | ||
+ | content: " | ||
+ | } | ||
+ | .wrap_checklist ul li { | ||
+ | color: #999; | ||
+ | text-decoration: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Example of a list: | ||
+ | |||
+ | < | ||
+ | <WRAP checklist> | ||
+ | |||
+ | - Item to do | ||
+ | * Done item | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | --- [[user> | ||
+ | |||
===== See also ===== | ===== See also ===== | ||
* [[plugin: | * [[plugin: | ||
+ |
plugin/wrap/extensions.1541736170.txt.gz · Last modified: 2018-11-09 05:02 by zioth