Template:Round: Difference between revisions

From Zelda Dungeon Wiki
Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.
(Examples)
(fixed a few typos and simplified the logic)
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{#vardefine:pos|{{#switch:{{lc:{{{1|}}}}}
<onlyinclude>{{#switch: {{lc:{{{1|}}}}}
|#default={{{1|}}}
| #default = border-radius: {{{1|20}}}px; -moz-border-radius: {{{1|20}}}px; -webkit-border-radius: {{{1|20}}}px; -khtml-border-radius: {{{1|20}}}px; -icab-border-radius: {{{1|20}}}px; -o-border-radius: {{{1|20}}}px;
|tl=topleft
| tl | topleft | top-left | top left = border-top-left-radius: {{{2|20}}}px; -moz-border-radius-topleft: {{{2|20}}}px; -webkit-border-top-left-radius: {{{2|20}}}px; -khtml-border-top-left-radius: {{{2|20}}}px; -icab-border-top-left-radius: {{{2|20}}}px; -o-border-top-left-radius: {{{2|20}}}px;
|topleft=topleft
| t | top = border-top-left-radius: {{{2|20}}}px; -moz-border-radius-topleft: {{{2|20}}}px; -webkit-border-top-left-radius: {{{2|20}}}px; -khtml-border-top-left-radius: {{{2|20}}}px; -icab-border-top-left-radius: {{{2|20}}}px; -o-border-top-left-radius: {{{2|20}}}px; border-top-right-radius: {{{2|20}}}px; -moz-border-radius-topright: {{{2|20}}}px; -webkit-border-top-right-radius: {{{2|20}}}px; -khtml-border-top-right-radius: {{{2|20}}}px; -icab-border-top-right-radius: {{{2|20}}}px; -o-border-top-right-radius: {{{2|20}}}px;
|top-left=topleft
| tr | topright | top-right | top right = border-top-right-radius: {{{2|20}}}px; -moz-border-radius-topright: {{{2|20}}}px; -webkit-border-top-right-radius: {{{2|20}}}px; -khtml-border-top-right-radius: {{{2|20}}}px; -icab-border-top-right-radius: {{{2|20}}}px; -o-border-top-right-radius: {{{2|20}}}px;
|top left=topleft
| l | left = border-top-left-radius: {{{2|20}}}px; -moz-border-radius-topleft: {{{2|20}}}px; -webkit-border-top-left-radius: {{{2|20}}}px; -khtml-border-top-left-radius: {{{2|20}}}px; -icab-border-top-left-radius: {{{2|20}}}px; -o-border-top-left-radius: {{{2|20}}}px; border-bottom-left-radius: {{{2|20}}}px; -moz-border-radius-bottomleft: {{{2|20}}}px; -webkit-border-bottom-left-radius: {{{2|20}}}px; -khtml-border-bottom-left-radius: {{{2|20}}}px; -icab-border-bottom-left-radius: {{{2|20}}}px; -o-border-bottom-left-radius: {{{2|20}}}px;
|t=top
| n | normal = border-radius: {{{2|20}}}px; -moz-border-radius: {{{2|20}}}px; -webkit-border-radius: {{{2|20}}}px; -khtml-border-radius: {{{2|20}}}px; -icab-border-radius: {{{2|20}}}px; -o-border-radius: {{{2|20}}}px;
|top=top
| r | right = border-top-right-radius: {{{2|20}}}px; -moz-border-radius-topright: {{{2|20}}}px; -webkit-border-top-right-radius: {{{2|20}}}px; -khtml-border-top-right-radius: {{{2|20}}}px; -icab-border-top-right-radius: {{{2|20}}}px; -o-border-top-right-radius: {{{2|20}}}px; border-bottom-right-radius: {{{2|20}}}px; -moz-border-radius-bottomright: {{{2|20}}}px; -webkit-border-bottom-right-radius: {{{2|20}}}px; -khtml-border-bottom-right-radius: {{{2|20}}}px; -icab-border-bottom-right-radius: {{{2|20}}}px; -o-border-bottom-right-radius: {{{2|20}}}px;
|tr=topright
| bl | bottomleft | bottom-left | bottom left = border-bottom-left-radius: {{{2|20}}}px; -moz-border-radius-bottomleft: {{{2|20}}}px; -webkit-border-bottom-left-radius: {{{2|20}}}px; -khtml-border-bottom-left-radius: {{{2|20}}}px; -icab-border-bottom-left-radius: {{{2|20}}}px; -o-border-bottom-left-radius: {{{2|20}}}px;
|topright=topright
| b | bottom = border-bottom-left-radius: {{{2|20}}}px; -moz-border-radius-bottomleft: {{{2|20}}}px; -webkit-border-bottom-left-radius: {{{2|20}}}px; -khtml-border-bottom-left-radius: {{{2|20}}}px; -icab-border-bottom-left-radius: {{{2|20}}}px; -o-border-bottom-left-radius: {{{2|20}}}px; border-bottom-right-radius: {{{2|20}}}px; -moz-border-radius-bottomright: {{{2|20}}}px; -webkit-border-bottom-right-radius: {{{2|20}}}px; -khtml-border-bottom-right-radius: {{{2|20}}}px; -icab-border-bottom-right-radius: {{{2|20}}}px; -o-border-bottom-right-radius: {{{2|20}}}px;
|top-right=topright
| br | bottomright | bottom-right | bottom right = border-bottom-right-radius: {{{2|20}}}px; -moz-border-radius-bottomright: {{{2|20}}}px; -webkit-border-bottom-right-radius: {{{2|20}}}px; -khtml-border-bottom-right-radius: {{{2|20}}}px; -icab-border-bottom-right-radius: {{{2|20}}}px; -o-border-bottom-right-radius: {{{2|20}}}px;
|top right=topright
}}</onlyinclude>
|l=left
|left=left
|r=right
|right=right
|bl=bottomleft
|bottomleft=bottomleft
|bottom-left=bottomleft
|bottom left=bottomleft
|b=bottom
|bottom=bottom
|br=bottomright
|bottomright=bottomright
|bottom-right=bottomright
|bottom right=bottomright
}}}}<!--  
-->{{#switch:{{#var:pos}}
|#default=border-radius: {{{1|20}}}px; -moz-border-radius: {{{1|20}}}px; -webkit-border-radius: {{{1|20}}}px; -khtml-border-radius: {{{1|20}}}px; -icab-border-radius: {{{1|20}}}px; -o-border-radius: {{{1|20}}}px
|topleft=border-top-left-radius: {{{2|20}}}px; -moz-border-radius-topleft: {{{2|20}}}px; -webkit-border-top-left-radius: {{{2|20}}}px; -khtml-border-top-left-radius: {{{2|20}}}px; -icab-border-top-left-radius: {{{2|20}}}px; -o-border-top-left-radius: {{{2|20}}}px;
|top=border-top-left-radius: {{{2|20}}}px; -moz-border-radius-topleft: {{{2|20}}}px; -webkit-border-top-left-radius: {{{2|20}}}px; -khtml-border-top-left-radius: {{{2|20}}}px; -icab-border-top-left-radius: {{{2|20}}}px; -o-border-top-left-radius: {{{2|20}}}px; border-top-right-radius: {{{2|20}}}px; -moz-border-radius-topright: {{{2|20}}}px; -webkit-border-top-right-radius: {{{2|20}}}px; -khtml-border-top-right-radius: {{{2|20}}}px; -icab-border-top-right-radius: {{{2|20}}}px; -o-border-top-right-radius: {{{2|20}}}px;
|topright=border-top-right-radius: {{{2|20}}}px; -moz-border-radius-topright: {{{2|20}}}px; -webkit-border-top-right-radius: {{{2|20}}}px; -khtml-border-top-right-radius: {{{2|20}}}px; -icab-border-top-right-radius: {{{2|20}}}px; -o-border-top-right-radius: {{{2|20}}}px;
|left=border-top-left-radius: {{{2|20}}}px; -moz-border-radius-topleft: {{{2|20}}}px; -webkit-border-top-left-radius: {{{2|20}}}px; -khtml-border-top-left-radius: {{{2|20}}}px; -icab-border-top-left-radius: {{{2|20}}}px; -o-border-top-left-radius: {{{2|20}}}px; border-bottom-left-radius: {{{2|20}}}px; -moz-border-radius-bottomleft: {{{2|20}}}px; -webkit-border-bottom-left-radius: {{{2|20}}}px; -khtml-border-bottom-left-radius: {{{2|20}}}px; -icab-border-bottom-left-radius: {{{2|20}}}px; -o-border-bottom-left-radius: {{{2|20}}}px;
|normal=border-radius: {{{2|20}}}px; -moz-border-radius: {{{2|20}}}px; -webkit-border-radius: {{{2|20}}}px; -khtml-border-radius: {{{2|20}}}px; -icab-border-radius: {{{2|20}}}px; -o-border-radius: {{{2|20}}}px
|right=border-top-right-radius: {{{2|20}}}px; -moz-border-radius-topright: {{{2|20}}}px; -webkit-border-top-right-radius: {{{2|20}}}px; -khtml-border-top-right-radius: {{{2|20}}}px; -icab-border-top-right-radius: {{{2|20}}}px; -o-border-top-right-radius: {{{2|20}}}px; border-bottom-right-radius: {{{2|20}}}px; -moz-border-radius-bottomright: {{{2|20}}}px; -webkit-border-bottom-right-radius: {{{2|20}}}px; -khtml-border-bottom-right-radius: {{{2|20}}}px; -icab-border-bottom-right-radius: {{{2|20}}}px; -o-border-bottom-right-radius: {{{2|20}}}px;
|bottomleft=border-bottom-left-radius: {{{2|20}}}px; -moz-border-radius-bottomleft: {{{2|20}}}px; -webkit-border-bottom-left-radius: {{{2|20}}}px; -khtml-border-bottom-left-radius: {{{2|20}}}px; -icab-border-bottom-left-radius: {{{2|20}}}px; -o-border-bottom-left-radius: {{{2|20}}}px;
|bottom=border-bottom-left-radius: {{{2|20}}}px; -moz-border-radius-bottomleft: {{{2|20}}}px; -webkit-border-bottom-left-radius: {{{2|20}}}px; -khtml-border-bottom-left-radius: {{{2|20}}}px; -icab-border-bottom-left-radius: {{{2|20}}}px; -o-border-bottom-left-radius: {{{2|20}}}px; border-bottom-right-radius: {{{2|20}}}px; -moz-border-radius-bottomright: {{{2|20}}}px; -webkit-border-bottom-right-radius: {{{2|20}}}px; -khtml-border-bottom-right-radius: {{{2|20}}}px; -icab-border-bottom-right-radius: {{{2|20}}}px; -o-border-bottom-right-radius: {{{2|20}}}px;
|bottomright=border-bottom-right-radius: {{{2|20}}}px; -moz-border-radius-bottomright: {{{2|20}}}px; -webkit-border-bottom-right-radius: {{{2|20}}}px; -khtml-border-bottom-right-radius: {{{2|20}}}px; -icab-border-bottom-right-radius: {{{2|20}}}px; -o-border-bottom-right-radius: {{{2|20}}}px;}}<noinclude>


==Purpose==
==Purpose==
Line 42: Line 16:


==Usage==
==Usage==
For basic usage, type: {{Desc|Optional|Degree of Rounding}}
For basic usage, type: {{Usage|Radius of Rounding}}
{{Parameter|Degree of Rounding|The amount to round the corners, in terms of pixels in pure number (no letters). A higher number results in a more extreme curve.|Optional|20}}
{{Usage/Param|Radius of Rounding|The amount to round the corners, in terms of pixels in pure number (no letters). A higher number results in a more extreme curve.|optional|20}}


This code is intended to be placed in the coding for div tags or in tables. The code can format the div tag, a whole table, or an indiviual cell. The code is expected to be used as '''<nowiki>style="{{round}}"</nowiki>''', the "style" portion is not included in the template to allow for additional style modifications.
This code is intended to be placed in the coding for div tags or in tables. The code can format the div tag, a whole table, or an indiviual cell. The code is expected to be used as '''<nowiki>style="{{Round}}"</nowiki>''', the "style" portion is not included in the template to allow for additional style modifications.


The template can be used in a more complex manner with: {{desc|Optional|Type of Rounding|Degree of Rounding}}
===Advanced Usage===
The template can be used in a more complex manner with: {{Usage|Type of Rounding|Radius of Rounding}}


With the available types being:
With the available types being:
Line 62: Line 37:
Here is an example of how the various types look:
Here is an example of how the various types look:
{| class=wikitable" style="{{round}}; padding: 5px" border=1
{| class=wikitable" style="{{round}}; padding: 5px" border=1
| style="{{round|topleft}}; padding: 5px" | '''topleft'''
| align=right style="{{round|topleft}}; padding: 5px" | '''topleft'''
| style="{{round|top}}; padding: 5px" | '''top'''
| align=center style="{{round|top}}; padding: 5px" | '''top'''
| style="{{round|topright}}; padding: 5px" | '''topright'''
| align=left style="{{round|topright}}; padding: 5px" | '''topright'''
|-
|-
| style="{{round|left}}; padding: 5px" | '''left'''
| align=right style="{{round|left}}; padding: 5px" | '''left'''
| style="{{round}}; padding: 5px" | '''normal'''
| align=center style="{{round}}; padding: 5px" | '''normal'''
| style="{{round|right}}; padding: 5px" | '''right'''
| align=left style="{{round|right}}; padding: 5px" | '''right'''
|-
|-
| style="{{round|bottomleft}}; padding: 5px" | '''bottomleft'''
| align=right style="{{round|bottomleft}}; padding: 5px" | '''bottomleft'''
| style="{{round|bottom}}; padding: 5px" | '''bottom'''
| align=center style="{{round|bottom}}; padding: 5px" | '''bottom'''
| style="{{round|bottomright}}; padding: 5px" | '''bottomright'''
| align=left style="{{round|bottomright}}; padding: 5px" | '''bottomright'''
|}
|}
{{Cat|Formatting Templates}}
{{Cat|Formatting Templates}}
</noinclude>

Latest revision as of 22:03, October 4, 2012

border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; -icab-border-radius: 20px; -o-border-radius: 20px;

Purpose

This template adds the coding to round corners in tables and boxes for all possible internet browsers.

Usage

For basic usage, type: {{Round| Radius of Rounding }}

  • Radius of Rounding — The amount to round the corners, in terms of pixels in pure number (no letters). A higher number results in a more extreme curve. (Optional. Default: 20)

This code is intended to be placed in the coding for div tags or in tables. The code can format the div tag, a whole table, or an indiviual cell. The code is expected to be used as style="{{Round}}", the "style" portion is not included in the template to allow for additional style modifications.

Advanced Usage

The template can be used in a more complex manner with: {{Round| Type of Rounding | Radius of Rounding }}

With the available types being:

  • topleft
  • top
  • topright
  • left
  • normal
  • right
  • bottomleft
  • bottomright

Example

Here is an example of how the various types look:

topleft top topright
left normal right
bottomleft bottom bottomright