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 [2015-11-24 18:57] – [Content Boxes] FilSalustri | plugin:wrap:extensions [2023-03-13 20:17] (current) – [Content Nice Boxes] From-Russia-with-Love | ||
---|---|---|---|
Line 1: | Line 1: | ||
<- [[plugin: | <- [[plugin: | ||
- | ====== Useful extensions for the Wrap plugin | + | ====== 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. | ||
- | These are some extensions to the [[..|Wrap Plugin]] created by users. Add these to your template' | ||
===== Padding ===== | ===== Padding ===== | ||
Line 35: | Line 36: | ||
<code css> | <code css> | ||
- | &.wrap_columns2 { | + | .plugin_wrap.wrap_columns2 { |
clear: both; | clear: both; | ||
-webkit-column-count: | -webkit-column-count: | ||
Line 41: | Line 42: | ||
column-count: | column-count: | ||
} | } | ||
- | &.wrap_columns3 { | + | .plugin_wrap.wrap_columns3 { |
clear: both; | clear: both; | ||
-webkit-column-count: | -webkit-column-count: | ||
Line 47: | Line 48: | ||
column-count: | column-count: | ||
} | } | ||
- | &.wrap_columns4 { | + | .plugin_wrap.wrap_columns4 { |
clear: both; | clear: both; | ||
-webkit-column-count: | -webkit-column-count: | ||
Line 53: | Line 54: | ||
column-count: | column-count: | ||
} | } | ||
- | &.wrap_columns5 { | + | .plugin_wrap.wrap_columns5 { |
clear: both; | clear: both; | ||
-webkit-column-count: | -webkit-column-count: | ||
Line 66: | Line 67: | ||
<code css> | <code css> | ||
- | &.wrap_full_width_img img { | + | .plugin_wrap.wrap_full_width_img img { |
max-width: 100%; | max-width: 100%; | ||
} | } | ||
</ | </ | ||
| | ||
- | | + | Usage: |
<div full_width_img> | <div full_width_img> | ||
OR | OR | ||
<WRAP full_width_img> | <WRAP full_width_img> | ||
- | ===== Content 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. | ||
+ | |||
+ | <code css> | ||
+ | .plugin_wrap.wrap_even_widths { | ||
+ | display: flex; | ||
+ | |||
+ | .plugin_wrap { | ||
+ | flex: 1; | ||
+ | |||
+ | &: | ||
+ | margin-right: | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Usage: | ||
+ | <div even_widths> | ||
+ | <div box> | ||
+ | <div box> | ||
+ | <div box> | ||
+ | </ | ||
+ | |||
+ | ===== Content | ||
+ | |||
+ | **[[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 85: | 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 ===== | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | < | ||
+ | 1. | ||
+ | 1.1 | ||
+ | 1.2 | ||
+ | 2. | ||
+ | 2.1 | ||
+ | 2.2 | ||
+ | 3. | ||
+ | 3.1 | ||
+ | 3.1.1 | ||
+ | 3.1.2 | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <WRAP list-deep> | ||
+ | - one | ||
+ | - one-one | ||
+ | - one-two | ||
+ | - two | ||
+ | - two-one | ||
+ | - two-two | ||
+ | - three | ||
+ | - three-one | ||
+ | - three-one-one | ||
+ | - three-one-two | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <file css userstyle.css> | ||
+ | div.dokuwiki div.wrap_list-deep ol { | ||
+ | list-style-type: | ||
+ | } | ||
+ | |||
+ | div.dokuwiki div.wrap_list-deep > ol { | ||
+ | counter-reset: | ||
+ | } | ||
+ | |||
+ | div.dokuwiki div.wrap_list-deep ol li div.li:: | ||
+ | counter-increment: | ||
+ | content: counter(leva) ". "; | ||
+ | color: inherit; | ||
+ | font-weight: | ||
+ | } | ||
+ | /* ~~~~~~ */ | ||
+ | |||
+ | div.dokuwiki div.wrap_list-deep ol ol { | ||
+ | list-style-type: | ||
+ | } | ||
+ | |||
+ | div.dokuwiki div.wrap_list-deep > ol ol { | ||
+ | counter-reset: | ||
+ | } | ||
+ | |||
+ | div.dokuwiki div.wrap_list-deep ol li li div.li:: | ||
+ | counter-increment: | ||
+ | content: counter(leva) " | ||
+ | color: inherit; | ||
+ | font-weight: | ||
+ | } | ||
+ | |||
+ | /* ~~~~~~ */ | ||
+ | |||
+ | div.dokuwiki div.wrap_list-deep ol ol ol { | ||
+ | list-style-type: | ||
+ | } | ||
+ | |||
+ | div.dokuwiki div.wrap_list-deep > ol ol ol { | ||
+ | counter-reset: | ||
+ | } | ||
+ | |||
+ | div.dokuwiki div.wrap_list-deep ol ol ol div.li:: | ||
+ | counter-increment: | ||
+ | content: counter(leva) " | ||
+ | color: inherit; | ||
+ | font-weight: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Simpler boxes ===== | ||
+ | |||
+ | 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/ | ||
+ | <?php | ||
+ | /** | ||
+ | * Alternate div syntax component for the wrap plugin | ||
+ | * | ||
+ | * Defines note plugin compatibility < | ||
+ | * | ||
+ | * @license | ||
+ | * @author | ||
+ | */ | ||
+ | |||
+ | class syntax_plugin_wrap_divnote extends syntax_plugin_wrap_div { | ||
+ | |||
+ | protected $entry_pattern = '< | ||
+ | protected $exit_pattern | ||
+ | private $matches=array( | ||
+ | '/ | ||
+ | '/ | ||
+ | '/ | ||
+ | '/ | ||
+ | '/ | ||
+ | ); | ||
+ | private $replacements=array( | ||
+ | '</ | ||
+ | '< | ||
+ | '< | ||
+ | '< | ||
+ | '< | ||
+ | ); | ||
+ | |||
+ | function handle($match, | ||
+ | if( $state === DOKU_LEXER_ENTER || $state === DOKU_LEXER_EXIT ) | ||
+ | $match=preg_replace( $this-> | ||
+ | return parent:: | ||
+ | } | ||
+ | } | ||
+ | // 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> | ||
+ | |||
===== See also ===== | ===== See also ===== | ||
- | * [[plugin: | ||
* [[plugin: | * [[plugin: | ||
+ |
plugin/wrap/extensions.1448387836.txt.gz · Last modified: 2015-11-24 18:57 by FilSalustri