Difference between revisions of "Template:Sign"

From GodWiki
Jump to: navigation, search
m (Moved the logic for detecting emoji parameter to prevent rendering of empty span β€” even without contents, the 300% size vertically stretched narrow signs 😊)
(Tags: Mobile edit, Mobile web edit)
(Complete rewrite. This template now outputs a proper HTML table with proper styling, not the stupid weird <p> styling that's so easy to break. If this causes problems, will undo.)
Line 1: Line 1:
βˆ’
{|style="clear: both; width: {{{width|100%}}}; border-color:{{{outerbordercolor|#AAB}}} {{{outerbordercolor|#AAB}}} {{{outerbordercolor|#AAB}}} {{{bordercolor|#999}}}; border-style: solid; border-width: 1px 1px 1px 10px; padding: 4px; margin: 1px auto {{{interval|0.2rem}}} auto; vertical-align: middle; background-color: {{{bgcolor|#fefefe}}}; text-align: left; {{{style|}}};"
+
<table style="clear: both; width: {{{width|100%}}}; border-color: {{{outerbordercolor|#AAB}}}; border-left-color: {{{bordercolor|#999}}}; border-style: solid; border-width: 1px 1px 1px 10px; padding: 4px; margin: 1px auto {{{interval|0.2rem}}} auto; vertical-align: middle; background-color: {{{bgcolor|#fefefe}}}; text-align: left; {{{style|}}};"><tr>
βˆ’
|width="1%" height="{{{height|auto}}}" style="padding-right:8px; vertical-align: {{{image-align|middle}}}" | {{#if:{{{emoji|}}}|<span style="font-size: {{{emojiwidth|300%}}};">{{{emoji|}}}<span>
+
<td width="1%" {{#if: {{{title|}}}|rowspan="2"}} height="{{{height|auto}}}" style="padding-right:8px; vertical-align: {{{image-align|middle}}}; {{#if: {{{emoji|}}}|font-size: 300%;}}">{{#if: {{{emoji|}}}
βˆ’
|[[Image:{{{img|Important.png}}}|{{{imgwidth|64px}}}|link={{{link|File:{{{img}}}}}}|]]}}
+
  |{{{emoji|}}}
βˆ’
|style="vertical-align: middle"|{{#if: {{{title|}}} |<p style="color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.17em; font-weight: bold; line-height: 1.6; margin-top: 0.1em; margin-bottom: 0; padding-top: 0; padding-bottom: 0;">{{{title}}}</p>}} {{{text|Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est libero, tristique vel, vestibulum a, aliquam sit amet, nisl. Curabitur suscipit euismod sapien. Nullam ligula. }}}
+
  |[[File:{{{img|Important.png}}}|{{{imgwidth|64px}}}|link={{{link|File:{{{img|Important.png}}}}}}]]
βˆ’
|}<noinclude>
+
}}</td>{{#if:{{{title|}}}|<td style="vertical-align: middle; color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.17em; font-weight: bold; line-height: 1.6; margin-top: 0.1em; margin-bottom: 0; padding-top: 0; padding-bottom: 0;">{{{title}}}</td></tr><tr>}}
 +
<td>{{{text|Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est libero, tristique vel, vestibulum a, aliquam sit amet, nisl. Curabitur suscipit euismod sapien. Nullam ligula.}}}</td></tr></table><noinclude>
 
{{doc}}
 
{{doc}}
 
[[Category:Templates|{{PAGENAME}}]] [[Category:Hatnote templates|{{PAGENAME}}]]
 
[[Category:Templates|{{PAGENAME}}]] [[Category:Hatnote templates|{{PAGENAME}}]]
 
</noinclude>
 
</noinclude>

Revision as of 07:13, 28 October 2020

Important.png Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est libero, tristique vel, vestibulum a, aliquam sit amet, nisl. Curabitur suscipit euismod sapien. Nullam ligula.
[view] [edit] [history] [refresh]
πŸ“š Documentation

Parameters

Global parameters

|title= 
Optional - The title in bold of the sign (default: no title)
|text= or first unnamed parameter 
Required - The text content of the sign (default: a mess of lorem ipsum)
|bgcolor=Valid CSS color string 
Optional - The background color (default: #fefefe)
|bordercolor=Valid CSS color string 
Optional - The color of the left border (default: #999)
|outerbordercolor=Valid CSS color string 
Optional - The color of the top, right and bottom borders (default: #AAB)

Picture parameters

|img=filename 
Optional - An image filename (default: Important.png)
|imgwidth=Valid width in px pixel units 
Optional - For non-standard images. (default: 64px)
|image-align= 
Optional - Override image vertical-align parameter: top, bottom, etc. (default: middle)
|link=Name of the targeted page 
Optional - the link of the picture of the |img parameter become the specified target.
  • If the parameter is not called at all in the template, the link will be File:<filename> by default.
  • If the parameter is called but no target is provided (link=), the linking will be turn off.
|emoji=Any emoji 
Optional - Display an emoji instead of the image.
  • If an emoji is used, the picture will not be displayed even if |img= is used.
|emojiwidth=X% 
Optional - The width of the emoji in percent (default: 300%)

Advanced parameters

|height= 
Optional - the height of the template in CSS units (rem, em, px, etc.) (default: auto)
|width= 
Optional - the width of the template in CSS units (rem, em, px, etc.) (default: 100%)
|interval= 
Optional - the bottom margin for the sign template in CSS units (rem, em, px, etc.) (default: 0.2rem)
|style= 
Optional - any general CSS style parameters to be added to the table style. Takes valid CSS. End with a semicolon (;), DO NOT include quotation marks.

Examples

{{Sign 
| title = What a nice example!
| text = [[User:Spode|Spode]] is clearly a genius
| bgcolor = #abcdef
| img = Imbox notice.png
| outerbordercolor = red
| bordercolor = green
| width = 50%
}}

Results in:

Imbox notice.pngWhat a nice example!
Spode is clearly a genius




{{Sign 
| title = Another example
| link= Template:Sign/Documentation
| text = The picture will link to the documentation of this template
| bgcolor = silver
| outerbordercolor = black
| bordercolor = purple
| width = 50%
}}


Results in:

Important.pngAnother example
The picture's link will lead to the documentation of this template.


{{Sign 
| title = No link example
| link= 
| text = The picture's linking is desactivated with <code>link=</code>
| bgcolor = MediumSeaGreen
| outerbordercolor = black
| bordercolor = red
| width = 50%
}}

Results in:

Important.pngNo link example
The picture's linking is desactivated with link=


{{Sign 
| title = Emoji example
| emoji = 🐈
| img = Example.jpg
| text = Despite the image parameter being used, only the cat emoji is displayed.
| bgcolor = Salmon
| outerbordercolor = black
| bordercolor = Blue
| width = 50%
}}

Results in:

🐈Emoji example
Despite the image parameter being used, only the cat emoji is displayed.