DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:wrap:extensions

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. — ziothzioth

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. — ziothzioth

2015-10-14

.plugin_wrap .wrap_vert_space { height: 15px; }

Usage: <div vert_space></div>

HTML5 columns

Create multi-column layout for text. These look better than the built-in column support, but do not work in Internet Explorer 8 and below. — ziothzioth

2015-10-14

&.wrap_columns2 {
    clear: both;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}
&.wrap_columns3 {
    clear: both;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
&.wrap_columns4 {
    clear: both;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
&.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? — ziothzioth

2015-10-14

&.wrap_full_width_img img {
    max-width: 100%;
}

Usage:

<div full_width_img>{{some_image.jpg}}</div>

OR

<WRAP full_width_img>{{some_image.jpg}}</WRAP>

Content Boxes

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.

Because it's rather long, I didn't want to paste it all here. Please refer to http://deseng.ryerson.ca/dokuwiki/wiki:content_blocks_with_wrap for full description including examples and CSS needed for WRAP.

  • 24 Nov 2015: User Zioth spotted insufficient permissions on my page. Fixed.

FilSalustriFilSalustri

2015-11-24 02:12

Change format of any ordered list

https://forum.dokuwiki.org/thread/12782

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
</WRAP>
userstyle.css
div.dokuwiki div.wrap_list-deep ol {
  list-style-type: none;
}
 
div.dokuwiki div.wrap_list-deep > ol {
  counter-reset: leva 0; /* set to one lower than intended value of first list item */
}
 
div.dokuwiki div.wrap_list-deep ol li div.li::before {
  counter-increment: leva;
  content: counter(leva) ". ";
  color: inherit;
  font-weight: bold;
}
/* ~~~~~~ */
 
div.dokuwiki div.wrap_list-deep ol ol {
  list-style-type: none;
}
 
div.dokuwiki div.wrap_list-deep > ol ol {
  counter-reset: levb 0; /* set to one lower than intended value of first list item */
}
 
div.dokuwiki div.wrap_list-deep ol li li div.li::before {
  counter-increment: levb;
  content: counter(leva) "." counter(levb) ". ";
  color: inherit;
  font-weight: bold;
}
 
/* ~~~~~~ */
 
div.dokuwiki div.wrap_list-deep ol ol ol {
  list-style-type: none;
}
 
div.dokuwiki div.wrap_list-deep > ol ol ol {
  counter-reset: levc 0; /* set to one lower than intended value of first list item */
}
 
div.dokuwiki div.wrap_list-deep ol ol ol div.li::before {
  counter-increment: levc;
  content: counter(leva) "." counter(levb) "." counter(levc) ". ";
  color: inherit;
  font-weight: bold;
}

See also

plugin/wrap/extensions.txt · Last modified: 2017-10-29 21:50 by Aleksandr