BuFaTa ET Wiki

Das Wiki der Bundesfachschaftentagung Elektrotechnik

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Du befindest dich hier: start » wiki » plg_wrap
wiki:plg_wrap

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

wiki:plg_wrap [11.05.2013 22:02] – angelegt Sebastian Wienforthwiki:plg_wrap [19.07.2015 09:33] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 5: Zeile 5:
 An uppercase **%%<WRAP>%%** (or alternatively **%%<block>%%** or **%%<div>%%**) creates a **''div''** and should be used for **"big"** containers, **surrounding** paragraphs, lists, tables, etc. An uppercase **%%<WRAP>%%** (or alternatively **%%<block>%%** or **%%<div>%%**) creates a **''div''** and should be used for **"big"** containers, **surrounding** paragraphs, lists, tables, etc.
  
-  <WRAP classes width :language> +<code> 
-  "big" content +<WRAP classes #id width :language> 
-  </WRAP> +"big" content 
-   +</WRAP> 
-  or + 
-  <block classes width :language> +or 
-  "big" content +<block classes #id width :language> 
-  </block> +"big" content 
-   +</block> 
-  or + 
-  <div classes width :language> +or 
-  "big" content +<div classes #id width :language> 
-  </div>+"big" content 
 +</div> 
 +</code>
  
 A lowercase **%%<wrap>%%** (or alternatively **%%<inline>%%** or **%%<span>%%**) creates a **''span''** and should be used for **"small"** containers, **inside** paragraphs, lists, tables, etc. A lowercase **%%<wrap>%%** (or alternatively **%%<inline>%%** or **%%<span>%%**) creates a **''span''** and should be used for **"small"** containers, **inside** paragraphs, lists, tables, etc.
  
-  <wrap classes width :language>"small" content</wrap> +<code> 
-   +<wrap classes #id width :language>"small" content</wrap> 
-  or + 
-  <inline classes width :language>"small" content</inline> +or 
-   +<inline classes #id width :language>"small" content</inline> 
-  or + 
-  <span classes width :language>"small" content</span>+or 
 +<span classes #id width :language>"small" content</span> 
 +</code>
  
 :!: Please note, some things **won't work with lowercase spans**: :!: Please note, some things **won't work with lowercase spans**:
Zeile 35: Zeile 39:
 if the according wrap isn't floated as well. if the according wrap isn't floated as well.
  
 +A shorthand of uppercase **%%<WRAP />%%** and lowercase **%%<wrap />%%** are available if the container is empty or unnecessary.
 +
 +<code>
 +<WRAP classes #id />
 +or
 +<block classes #id />
 +or
 +<div classes #id />
 +</code>
 +
 +and
 +<code>
 +<wrap classes #id />
 +or
 +<inline classes #id />
 +or
 +<span classes #id />
 +</code>
  
 ===== Classes and Styles ===== ===== Classes and Styles =====
Zeile 44: Zeile 66:
   <WRAP column 30%>...content...</WRAP>   <WRAP column 30%>...content...</WRAP>
  
-<WRAP column 30%> +The example below uses the following structure:
-//**__Emulated Big Headline__**//+
  
-You can emulate a big headline with italic, bold and underlined text, e.g. +<code> 
-<code>//**__Emulated Big Headline__**//</code> +<WRAP group>
- +
-//**Emulated Small Headline**//+
  
-A smaller headline uses no underlining, e.g. +<WRAP third column>...content...</WRAP> 
-<code>//**Emulated Small Headline**//</code>+<WRAP third column>...content...</WRAP> 
 +<WRAP third column>...content...</WRAP>
  
-If you need text that is bold and italic, simply use it the other way around: 
-<code>**//No Headline//**</code> 
 </WRAP> </WRAP>
 +</code>
 +
  
-<WRAP column 30%> +<WRAP group> 
-//**__Different Floating Options__**//+<WRAP third column> 
 +=== Floating Options ===
  
 Normally you would only need the class ''column'', but for more sophisticated uses (not only for columns, but for any other classes, like [[#boxes and notes]] as well) you can have several kinds of "floats": Normally you would only need the class ''column'', but for more sophisticated uses (not only for columns, but for any other classes, like [[#boxes and notes]] as well) you can have several kinds of "floats":
Zeile 68: Zeile 89:
   * **''right''** will let the wrap float right   * **''right''** will let the wrap float right
   * **''center''** will position the wrap in the horizontal center of the page   * **''center''** will position the wrap in the horizontal center of the page
 +
 +A **table** inside a column or box will always be **100% wide**. This makes positioning and sizing tables possible.
  
 </WRAP> </WRAP>
  
-<WRAP column 30%> +<WRAP third column> 
-//**__Widths__**//+=== Widths ===
  
 You can set any valid widths (but only on divs): ''%, px, em, ex, pt, pc, cm, mm, in'', but most of the time you'd only want either You can set any valid widths (but only on divs): ''%, px, em, ex, pt, pc, cm, mm, in'', but most of the time you'd only want either
  
 ^type^e.g.^note^ ^type^e.g.^note^
-^''%''|''30%''|makes sense in a liquid layout| +^''%''|''30%''|makes sense in most cases| 
-^''px''|''420px''|makes sense if your layout has a fixed pixel width or if your container contains images with a certain width| +^''px''|''420px''|makes sense if your container contains images with a certain width| 
-^''em''|''20em''|makes sense if you like your wrap container to grow and shrink with the font size or if your layout is em-based| +^''em''|''20em''|makes sense if you like your wrap container to grow and shrink with the font size|
- +
-A **table** inside a column or box will always be **100% wide**. This makes positioning and sizing tables possible.+
  
 </WRAP> </WRAP>
 +<WRAP third column>
 +=== Width Keywords ===
  
-<wrap em>After using any of the float classes, you might come across something like this, where the following text protrudes into the space where only the floating containers should be ...</wrap>+With certain width keywords you can fit your columns automatically to fill the available horizontal space. Those columns will also react to the screen size, so will be responsive and wrap underneath each other on mobile devices.
  
-<WRAP clear></WRAP>+There are three width keywords. These should not be combined with any other width.
  
-... to prevent that, you should simply add +  * **''half''** fits two columns in a row 
-  <WRAP clear></WRAP> +  * **''third''** fits three columns in a row 
-after your last column.+  * **''quarter''** fits four columns in a row
  
-You **can** use the same options with spans (as each element that floats is automatically a block level element), but it probably doesn't make too much sense. :!: Widths on spans normally do not work (by design), but can make sense, when it is floating.+:!: Attention: In order to work properly, wraps with width keywords need an **additional ''%%<WRAP group>%%'' around a set** of them.
  
-:!: Attention: Widths can cause problems and will often look different and break in some browsers. If you're not a web developer, you might not understand any problems regarding the [[http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug|box model]]. Just try to test your columns in all major browsers and make your widths smaller than you initially think they should be.+</WRAP> 
 + 
 +</WRAP> 
 + 
 +You can use the same options with spans (as each element that floats is automatically a block level element), but it probably doesn't make too much sense. :!: Widths on spans normally do not work (by design), but can make sense, when it is floating. 
 + 
 +:!: Attention: What is the difference between widths and width keywords and when is it best to use which? **Widths** can cause problems and will never fully add up, therefore will break the layout under some circumstances. (See [[http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug|box model]] for a technical explanation.) So, getting widths right will need some fiddling around and testing in various browsers. **Width keywords** on the other hand fit automatically and work better on mobile devices. But the drawback is that they need an extra wrap around them and don't work properly in older browsers (IE8 and under).
  
 All of those options will also work in the [[#boxes and notes]] wraps (see below). All of those options will also work in the [[#boxes and notes]] wraps (see below).
 +
 +=== Old Emulated Headlines ===
 +
 +Every ''%%//**__text like this__**//%%'' or ''%%//**like that**//%%'' will create an "emulated headline" when used within a box or a column. Now that headlines within wraps are supported, they are not needed anymore, but are still supported for backwards-compatibility.
 +
 +If you need text that is bold and italic, simply use it the other way around: ''%%**//No Headline//**%%''
 +
  
 === Multi-columns === === Multi-columns ===
  
 <WRAP col3> <WRAP col3>
-For modern browsers (Firefox, Chrome and Safari) you can use multi-columns. Just use **''%%col2%%''** for 2 columns, **''%%col3%%''** for 3 columns, **''%%col4%%''** for 4 columns and **''%%col5%%''** for 5 columns.+For modern browsers (Firefox, Chrome and Safari, IE10+) you can use multi-columns. Just use **''%%col2%%''** for 2 columns, **''%%col3%%''** for 3 columns, **''%%col4%%''** for 4 columns and **''%%col5%%''** for 5 columns.
  
 :!: Note: Multi-columns don't make sense for spans. :!: Note: Multi-columns don't make sense for spans.
 </WRAP> </WRAP>
 +
 +Don't use this for bigger columns containing more than just text. Use the [[#columns and floats]] mentioned above instead.
  
  
Zeile 140: Zeile 178:
 ==== Boxes and Notes ==== ==== Boxes and Notes ====
  
-<WRAP round box 570px center> +<WRAP round box 500px center> 
-//**__round box 570px center__**//+=== round box 500px center ===
  
   * ''box'' creates a box around the container and uses the colours from the template's ''style.ini'' as default colours (''%%__background_alt__%%'' and ''%%__text__%%'')   * ''box'' creates a box around the container and uses the colours from the template's ''style.ini'' as default colours (''%%__background_alt__%%'' and ''%%__text__%%'')
   * any of the classes ''info'', ''tip'', ''important'', ''alert'', ''help'', ''download'', ''todo'' will add a special note container with a corresponding icon   * any of the classes ''info'', ''tip'', ''important'', ''alert'', ''help'', ''download'', ''todo'' will add a special note container with a corresponding icon
   * the classes ''danger'', ''warning'', ''caution'', ''notice'', ''safety'' use safety colours (and no icons)   * the classes ''danger'', ''warning'', ''caution'', ''notice'', ''safety'' use safety colours (and no icons)
-  * ''round'' can be added to anything with a background colour or a border and will only work in modern browsers (no Internet Explorer)+  * ''round'' can be added to anything with a background colour or a border and will only work in modern browsers (no IE8 and under)
 </WRAP> </WRAP>
  
  
-<WRAP info 220px left> +<WRAP info 300px left> 
-//**Info**//+=== Info ===
   <WRAP info></WRAP>   <WRAP info></WRAP>
 </WRAP> </WRAP>
  
  
-<WRAP tip 220px left> +<WRAP tip 300px left> 
-//**Tip**//+=== Tip ===
   <WRAP tip></WRAP>   <WRAP tip></WRAP>
 </WRAP> </WRAP>
  
  
-<WRAP important 220px left> +<WRAP important 300px left> 
-//**Important**//+=== Important ===
   <WRAP important></WRAP>   <WRAP important></WRAP>
 </WRAP> </WRAP>
  
  
-<WRAP alert 220px left> +<WRAP alert 300px left> 
-//**Alert**//+=== Alert ===
   <WRAP alert></WRAP>   <WRAP alert></WRAP>
 </WRAP> </WRAP>
  
  
-<WRAP round help 220px left> +<WRAP round help 300px left> 
-//**Help**//+=== Help ===
   <WRAP round help></WRAP>   <WRAP round help></WRAP>
 </WRAP> </WRAP>
  
  
-<WRAP download 220px left> +<WRAP download 300px left> 
-//**Download**//+=== Download ===
   <WRAP download></WRAP>   <WRAP download></WRAP>
 </WRAP> </WRAP>
  
  
-<WRAP todo 220px left> +<WRAP todo 300px left> 
-//**Todo**//+=== Todo ===
   <WRAP todo></WRAP>   <WRAP todo></WRAP>
 </WRAP> </WRAP>
  
  
-<WRAP clear></WRAP>+<WRAP clear />
  
  
 **Safety Notes:** **Safety Notes:**
  
-<WRAP danger 27% left> +<WRAP danger 30% left> 
-//**Danger**//+=== Danger ===
   <WRAP danger></WRAP>   <WRAP danger></WRAP>
 </WRAP> </WRAP>
  
-<WRAP warning 27% left> +<WRAP warning 30% left> 
-//**Warning**//+=== Warning ===
   <WRAP warning></WRAP>   <WRAP warning></WRAP>
 </WRAP> </WRAP>
  
-<WRAP caution 27% left> +<WRAP caution 30% left> 
-//**Caution**//+=== Caution ===
   <WRAP caution></WRAP>   <WRAP caution></WRAP>
 </WRAP> </WRAP>
  
-<WRAP round notice 27% left> +<WRAP round notice 30% left> 
-//**Notice**//+=== Notice ===
   <WRAP round notice></WRAP>   <WRAP round notice></WRAP>
 </WRAP> </WRAP>
  
-<WRAP round safety 27% left> +<WRAP round safety 30% left> 
-//**Safety**//+=== Safety ===
   <WRAP round safety></WRAP>   <WRAP round safety></WRAP>
 </WRAP> </WRAP>
  
-<WRAP clear></WRAP>+<WRAP clear />
  
  
Zeile 236: Zeile 274:
  
 :!: This might look ugly in some templates and should be adjusted accordingly. :!: This might look ugly in some templates and should be adjusted accordingly.
 +
 +==== Tabs ====
 +
 +You can create a row of tabs by simply wrapping a list of links in ''%%<WRAP tabs></WRAP>%%''.
 +
 +<WRAP tabs>
 +  * [[Some page]]
 +  * [[example|This page]]
 +  * [[Another page]]
 +</WRAP>
 +
 +  <WRAP tabs>
 +    * [[Some page]]
 +    * [[example|This page]]
 +    * [[Another page]]
 +  </WRAP>
 +
 +:!: Please note, the styling of these tabs depend on the template you are using and not on the wrap plugin. If you only see a list of links and no tabs, please make sure to add "tabs" to the ''noPrefix'' config option and that your template supports at least the 2012-01-25 "Angua" DokuWiki release.
  
 ==== Miscellaneous ==== ==== Miscellaneous ====
 +
 +=== Clear float ===
 +
 +After using any of the float classes, you might come across following text protruding into the space where only the floating containers should be. To prevent that, you should simply add this after your last column:
 +
 +  <WRAP clear />
  
 === Indent === === Indent ===
Zeile 272: Zeile 334:
  
 Just select the text in the spoiler box to be able to read its content. Just select the text in the spoiler box to be able to read its content.
 +
 +=== Button links ===
 +
 +A link that looks like a button: <wrap button>[[wiki:Syntax]]</wrap>
 +
 +  A link that looks like a button: <wrap button>[[wiki:Syntax]]</wrap>
  
 === Hide === === Hide ===
Zeile 283: Zeile 351:
 === Pagebreak === === Pagebreak ===
  
-The following will add a pagebreak: <WRAP pagebreak></WRAP>+The following will add a pagebreak: <WRAP pagebreak />
  
-  The following will add a pagebreak: <WRAP pagebreak></WRAP>+  The following will add a pagebreak: <WRAP pagebreak />
  
 This has no effect on the browser screen. A [[http://reference.sitepoint.com/css/page-break-after|pagebreak]] will force a new page in printouts. This has no effect on the browser screen. A [[http://reference.sitepoint.com/css/page-break-after|pagebreak]] will force a new page in printouts.
Zeile 315: Zeile 383:
  
 <WRAP box 350px right :en> <WRAP box 350px right :en>
-//**__Outer box floats right__**//+===Outer box floats right ===
  
 <WRAP 165px left> <WRAP 165px left>
Zeile 323: Zeile 391:
 Text inside outer right box, but beneath inner left box. Text inside outer right box, but beneath inner left box.
  
-<WRAP clear></WRAP>+<WRAP clear />
  
 <WRAP round tip> <WRAP round tip>
Zeile 334: Zeile 402:
 <code> <code>
 <WRAP box 350px right :en> <WRAP box 350px right :en>
-//**__Outer box floats right__**//+=== Outer box floats right ===
  
 <WRAP 165px left> <WRAP 165px left>
Zeile 342: Zeile 410:
 Text inside outer right box, but beneath inner left box. Text inside outer right box, but beneath inner left box.
  
-<WRAP clear></WRAP>+<WRAP clear />
  
 <WRAP round tip> <WRAP round tip>

Die hier im BuFaTa ET Wiki dargestellten Arbeitsdokumente sind Einzelbeiträge der jeweiligen Autoren und i.d.R. nicht repräsentativ für die BuFaTa ET als Organisation. Veröffentlichte Beschlüsse und Stellungnahmen der BuFaTa ET befinden sich ausschließlich auf der offiziellen Homepage.
wiki/plg_wrap.1368302567.txt.gz · Zuletzt geändert: 11.05.2013 22:02 von Sebastian Wienforth