Difference between revisions of "Template:Panel"

From Hydrogenaudio Knowledgebase
Jump to: navigation, search
m (Added option for "blue")
m (CSS update.)
 
(4 intermediate revisions by one user not shown)
Line 1: Line 1:
<div class="plainlinks" style="background-color: {{#switch: {{{color}}} | red = #f8c9ca | green = #d0f1de | blue = #ddeaff | yellow = #fbec74 | #f0f0f0 }}; border-left: 0.5em solid {{#switch: {{{color}}} | red = #fba3a4 | green = #007d50 | blue = #0072b3 | yellow = #cbbd30 | #c0c0c0 }}; color: #000; display: table; margin-bottom: 0.5em; padding: 0.5em 1em;">{{{1}}}</div><noinclude>
+
<div class="plainlinks" style="background-color: {{#switch: {{{color}}} | red = #f8c9ca | green = #d0f1de | blue = #ddeaff | yellow = #fff4ce | #f0f0f0 }}; border: none; border-left: 0.5em solid {{#switch: {{{color}}} | red = #fba3a4 | green = #007d50 | blue = #0072b3 | yellow = #ffb900 | #c0c0c0 }}; border-radius: 0.25rem; color: #000; display: table; margin: 0.4em 0 0.5em 0; padding: 0.25em 1em;">
 +
{{#if:{{{title|}}}|<p style="margin-bottom: -0.25rem;">'''{{{title}}}'''</p>|}}
 +
{{{1}}}
 +
</div><noinclude>
 
==Documentation==
 
==Documentation==
 
Creates a colored panel that can be used to pull out important information.
 
Creates a colored panel that can be used to pull out important information.
Line 6: Line 9:
 
===Input===
 
===Input===
 
<pre>{{panel|Sample text.}}
 
<pre>{{panel|Sample text.}}
{{panel|Sample text.|color=red}}
+
{{panel|title=Warning|Sample text.|color=red}}
 
{{panel|Sample text.|color=green}}
 
{{panel|Sample text.|color=green}}
 
{{panel|Sample text.|color=blue}}
 
{{panel|Sample text.|color=blue}}
Line 12: Line 15:
 
===Output===
 
===Output===
 
{{panel|Sample text.}}
 
{{panel|Sample text.}}
{{panel|Sample text.|color=red}}
+
{{panel|title=Warning|Sample text.|color=red}}
 
{{panel|Sample text.|color=green}}
 
{{panel|Sample text.|color=green}}
 
{{panel|Sample text.|color=blue}}
 
{{panel|Sample text.|color=blue}}
 
{{panel|Sample text.|color=yellow}}
 
{{panel|Sample text.|color=yellow}}
 
</noinclude>
 
</noinclude>

Latest revision as of 08:25, 11 June 2022

Documentation

Creates a colored panel that can be used to pull out important information.

It currently accepts three lowercase color variables: red, green, blue, yellow

Input

{{panel|Sample text.}}
{{panel|title=Warning|Sample text.|color=red}}
{{panel|Sample text.|color=green}}
{{panel|Sample text.|color=blue}}
{{panel|Sample text.|color=yellow}}

Output