Difference between revisions of "Template:PortalButton/Documentation"
test>Cesdeva (→ Parameters: lowercase) |
test>Cesdeva (Updating documentation) |
||
| Line 72: | Line 72: | ||
</p> | </p> | ||
</div> | </div> | ||
| + | </br> | ||
| + | <div style="background-color:yellow"> | ||
| + | ''' Multiple buttons:''' | ||
| + | </div> | ||
| + | <p style="margin:20px"> | ||
| + | <div style="background-color:#e5ffe8"> | ||
| − | === <u> | + | For instances where multiple buttons are required to sit together (perhaps in inline-block), there exists a set of extra parameters. |
| + | |||
| + | To enable, set <code>|multi=yes</code>. | ||
| + | |||
| + | This will activate the default values for <code>|display=</code> and <code>|adjust=</code>. | ||
| + | </p> | ||
| + | </br> | ||
| + | <div style="background-color:#bbeac1"> | ||
| + | ''' The full list of extra parameters:''' | ||
| + | </div> | ||
| + | '''|multi=''' (default no) | ||
| + | </br> | ||
| + | '''|display=''' (default is inline-block) | ||
| + | </br> | ||
| + | '''|adjust=''' (sets relative positioning, default 5%) | ||
| + | <div style="background-color:#bbeac1"> | ||
| + | ''' To create an inline-block grid:''' | ||
| + | </div> | ||
| + | <p style="margin:20px"> | ||
| + | Just place PortalButton templates directly below each other in the markup. | ||
| + | </p> | ||
| + | ''' Example:''' | ||
| + | <pre> | ||
| + | {{PortalButton|multi=yes}} | ||
| + | {{PortalButton|multi=yes}} | ||
| + | {{PortalButton|multi=yes}} | ||
| + | {{PortalButton|multi=yes}} | ||
| + | {{PortalButton|multi=yes}} | ||
| + | {{PortalButton|multi=yes}} | ||
| + | </pre> | ||
| + | </div> | ||
| + | |||
| + | === <u>Individual button examples</u>=== | ||
<!-- No templates to avoid local loop--> | <!-- No templates to avoid local loop--> | ||
<div id="content" style="position:relative;width:25%;float:left;background-color:green;border:2px solid black;border-radius:10px;overflow:hidden;margin:10px;clear:both"> | <div id="content" style="position:relative;width:25%;float:left;background-color:green;border:2px solid black;border-radius:10px;overflow:hidden;margin:10px;clear:both"> | ||
Revision as of 19:27, 26 May 2018
This is a documentation page, and not a template.
Documentation
This template is in Alpha-testing
The Portal Button template is designed to provide a rounded-edge wrapper for intra-wiki linked images; giving the appearance of a 'button' to users. Utilisation of purpose-made graphics can add further semantic meaning. The wrapper incorporates the CSS overflow:hidden attribute, which in combination with the width attribute will crudely 'crop' images. Normal image sizing syntax is optional but will be overidden horizontally by the value in the |width parameter.
Parameters
|width= (Div width, default is 25%)
|float= (left or right, default none)
|background-c= (color, default #efefef)
|border-w= (Border width, default 2px)
|border-t= (Border type, default solid)
|border-c= (Border color, default #efefef)
|border-r= (Border radius, default 20px)
|margin= (Margin around div, default 5px)
|overflow= (Overflow, default hidden)
|image= (File name, default PButton2.jpg)
|image-t= (Type, default frameless)
|link= (Target, default Portal:Contents/)
|image-s= (Image size; pair with |Width)
|text-c= (Font color, default #FFFF)
|font-wt= (Font weight, default none, options are bold and italics.)
|text= (Add text below image, centered)
To transclude the template, copy and paste the following text:
{{PortalButton
|width=
|float=
|background-c
|border-w=
|border-t
|border-c=
|border-r=
|margin=
|overflow=
|image=
|link=
|image-s=
|text-c=
|font-wt=
|text=
}}
Be sure to remove any parameters you don't fill, otherwise rendering will be affected.
Multiple buttons:
For instances where multiple buttons are required to sit together (perhaps in inline-block), there exists a set of extra parameters.
To enable, set |multi=yes.
This will activate the default values for |display= and |adjust=.
The full list of extra parameters:
|multi= (default no)
|display= (default is inline-block)
|adjust= (sets relative positioning, default 5%)
To create an inline-block grid:
Just place PortalButton templates directly below each other in the markup.
Example:
{{PortalButton|multi=yes}}
{{PortalButton|multi=yes}}
{{PortalButton|multi=yes}}
{{PortalButton|multi=yes}}
{{PortalButton|multi=yes}}
{{PortalButton|multi=yes}}
Individual button examples
File:Overlookingcheshire2.jpg Geography
File:Brayheadcross.jpg Religion