- [[plugin:wrap|Back to Wrap Plugin Page]]
====== Useful extensions for the Wrap Plugin ======
These are some extensions to the [[..|Wrap Plugin]] created by users. Add these to your template’s screen.css.
===== Padding =====
Add padding to the top, bottom or both. --- [[user>zioth|zioth]] //2015-10-14//
.plugin_wrap .wrap_bottom_pad {
padding-bottom: 40px;
}
.plugin_wrap .wrap_top_pad {
padding-top: 40px;
}
.plugin_wrap .wrap_topbottom_pad {
padding-bottom: 40px;
padding-top: 40px;
}
Just add some vertical space to the page. --- [[user>zioth|zioth]] //2015-10-14//
.plugin_wrap .wrap_vert_space { height: 15px; }
Usage: ''%%
.plugin_wrap.wrap_columns2 {
clear: both;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.plugin_wrap.wrap_columns3 {
clear: both;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.plugin_wrap.wrap_columns4 {
clear: both;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.plugin_wrap.wrap_columns5 {
clear: both;
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
===== Full width images =====
Dokuwiki allows for fixed-width images, but what if you want a really large image to scale down to fill all available space? --- [[user>zioth|zioth]] //2015-10-14//
.plugin_wrap.wrap_full_width_img img {
max-width: 100%;
}
Usage:
.plugin_wrap.wrap_even_widths {
display: flex;
.plugin_wrap {
flex: 1;
&:not(:last-child) {
margin-right: 12px;
}
}
}
Usage:
1.
1.1
1.2
2.
2.1
2.2
3.
3.1
3.1.1
3.1.2
- one
- one-one
- one-two
- two
- two-one
- two-two
- three
- three-one
- three-one-one
- three-one-two
bloc simple
bloc information
bloc astuce
bloc important
bloc alerte
bloc aide
bloc téléchargement
bloc à faire
|{{https://imagizer.imageshack.com/img921/9492/fvR4wt.png}} |
/*
* plugin wrap boxes (and plugin note compat mode of wrap)
*/
div.dokuwiki {
div.plugin_wrap {
&.wrap_center.wrap_round {
/* Inspired by hugo template seen on https://thomas-leister.de/en/mailserver-debian-stretch/ */
margin-left: 40px;
margin-right: 40px;
margin-top: 2rem;
margin-bottom: 2rem;
padding: 20px 25px;
border-radius: 3px;
text-align: left;
width: auto !important;
background-image: initial;
min-height: initial;
p:last-child {
margin: 0;
}
&.wrap_alert {
/* From hugo template seen on https://thomas-leister.de/en/mailserver-debian-stretch/ */
border-left: 10px solid #d9534f;
background: #fdf7f7;
color: #b52b27;
}
&.wrap_important {
/* From hugo template seen on https://thomas-leister.de/en/mailserver-debian-stretch/ */
border-left: 10px solid #fbaf43;
background: #fcf8f2;
color: #c97500;
}
&.wrap_download {
border-left: 10px solid #8dde4e;
background: #f4ffee;
color: #57aa16;
}
&.wrap_tip {
border-left: 10px solid #fff15a;
background: #fffded;
color: #b6a91a;
}
&.wrap_info {
border-left: 10px solid #4f8cdf;
background: #f5f7fa;
color: #195ab3;
}
&.wrap_help {
border-left: 10px solid #c489ef;
background: #f1eef4;
color: #7625b1;
}
&.wrap_todo {
border-left: 10px solid #4bd29c;
background: #f5f9f7;
color: #1aaf73;
}
}
}
}
--- [[user>schplurtz|schplurtz]] //2019-08-21 14:54//
===== 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. ''%%
... syntax
*
* @license GPL 2 (http://www.gnu.org/licenses/gpl.html)
* @author Schplurtz Le Déboulonné
*/
class syntax_plugin_wrap_divnote extends syntax_plugin_wrap_div {
protected $entry_pattern = '(?=.*?)';
protected $exit_pattern = '';
private $matches=array(
'/^<\/note>$/',
'/^$/',
'/^$/',
'/^$/',
'/^$/',
);
private $replacements=array(
'',
'',
'',
'',
'',
);
function handle($match, $state, $pos, Doku_Handler $handler) {
if( $state === DOKU_LEXER_ENTER || $state === DOKU_LEXER_EXIT )
$match=preg_replace( $this->matches, $this->replacements, $match );
return parent::handle($match, $state, $pos, $handler);
}
}
// vim: ai:et:ts=4:sw=4:
===== Poems =====
Nice display of poems --- replace [[plugin:plaintext]] / [[plugin:poem]] --- [[user>trailjeep]] //2019-08-24//
line 1
line 2
line 3
span.wrap_poem {
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;
}
Bonus --- if [[plugin:icons]] installed
span.wrap_poem:before {
font-family: fontawesome;
font-size: 2em;
content: "\f299";
float: left;
}
===== 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.
.wrap_hatnote {
padding-left: 1.6em;
font-style: italic;
}
.wrap_hatnote em, .wrap_hatnote i {
font-style: normal;
}
--- [[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:
.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).
.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;
}
Example of a list:
- Item to do
* Done item
--- [[user>erk70|erk70]]
===== See also =====
* [[plugin:data:list_of_employees|DokuWiki usecase: List of employees]]