User:Cesdeva/sandbox

<noinclude>
<div id="documentation" style="position:relative;width:100%;clear:both;background-color:#bbeac1">

== '''Documentation'''==
<div style="margin:5px;background-color:#e5ffe8;clear:both">
<p style="margin:5px">
<span style="color:red">
This template is in Alpha-testing
</span>
</br>
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.
</p>
</div>
=== <u>Parameters</u>===
<div style="margin:5px;background-color:#e5ffe8;clear:both">
'''|Width=''' (Div width, default is 25%)
</br>
'''|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)
'''|Image=''' (File name, default PBTN.jpg)
</br>
'''|Image-t=''' (Type, default frameless)
</br>
'''|Link=''' (Target, default Portal:Contents/)
'''|Image-s=''' (Image size; pair with |Width)
'''|Text-c=''' (Font color, default #FFFF)

'''|Font-wt=''' (Font weight, default bold)

'''|Text=''' (Add text below image, centered)
</div>

<div style="margin:5px;background-color:#e5ffe8;clear:both">
<p style="margin:5px">
To transclude the template, copy and paste the following  text:
</p>
</div>
<pre>
{{PortalButton
|Width=
|Float=
|Background-c
|Border-w=
|Border-t
|Border-c=
|Border-r=
|Margin=
|Image=
|Link=
|Image-s=
|Text-c=
|Font-wt=
|Text=
}}

<div style="margin:5px;background-color:#e5ffe8;clear:both">
<p style="margin:5px">
Be sure to remove any parameters you don't fill, otherwise rendering will be affected.
</p>
</div>
=== <u>Rendered examples</u>===
<!-- 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">
[[File:Geogdivhills2.jpg|frameless|link=Geography]]
</div>
<div id="content" style="position:relative;width:25%;float:left;background-color:purple;border:2px solid purple;border-radius:10px;overflow:hidden;margin:10px;clear:both">
[[File:Churchdiv2.jpg|frameless|link=Religion]]
</div>
<div id="content" style="position:relative;width:25%;float:left;background-color:green;border:2px solid black;border-radius:10px;overflow:hidden;margin:10px;text-align:center;clear:both">
[[File:Geogdivhills2.jpg|frameless|link=Geography]]
<span style="color:#FFFF;font-weight:bold">Geography</span>
</div>
<div id="content" style="position:relative;width:25%;background-color:purple;border:2px solid purple;border-radius:10px;overflow:hidden;margin:10px;text-align:center;clear:both">
[[File:Churchdiv2.jpg|frameless|link=Geography]]
<span style="color:yellow;font-weight:bold">Religion</span>
</div>
<p style="color:#bad4ff>
 This template was created by  ~~~~
</p>
</div>
</div>
</noinclude>