Template:Sidebox: Difference between revisions

Latest revision as of 04:58, October 5, 2023

Purpose & Usage[edit source]

This template creates a left or right floating "sidebox." It is generally desirable to call the {{clear}} template after it to clear the float.

Required Parameters[edit source]

header - The heading or title

Values

Default: n/a, title=Title Text

text - The body text

Values

Default: n/a, body=body text ...

Optional Parameters[edit source]

width - Sets the % width of the sidebox

Values

Default: width=50

1-100 (always use 10%-50% )

float - Sets the direction the sidebox floats

Values

Default: float=right

left
right

Examples[edit source]

Default Call[edit source]

The simplest call returns defaults for the template.

Code:

{{Sidebox
|title=This is a heading
|text=This is my sidebar with as much text as I could quickly write.}}

Result:

This is a heading

This is my sidebar with as much text as I could quickly write.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Optional Call[edit source]

NOTE

Use {{clear}} when using this template near headings or other markup that should clear the Sidebox.

Code:

{{Sidebox
|width=75
|float=left
|title=This is a heading
|text=This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write.}}
{{clear}}

Result:

This is a heading

This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write.

Related Templates[edit source]

None

@@ Line 1: / Line 1: @@
-<includeonly><div style="width:{{{width|300}}}px; float:{{{1}}}; font-size:.95em; border:1px solid #4F5860; overflow:hidden; border-radius:5px; box-shadow:0px 0px 20px 20px #292B2C inset; padding:10px; text-align:justify; background:transparent; margin:10px 30px;"><span style="font-size:1.25em; color:{{{headerColor|#9BC1D5}}};">'''{{{2}}}'''</span><br><hr>{{{3}}}</div></includeonly><noinclude>__NOTOC__
+{{TOC}}<includeonly><div class="sideBox float-lg-{{{float|right}}} text-justify" style="width:{{{width|50}}}%;"><p class="sideBoxHeader" >'''{{{title}}}'''</p><hr>{{{text}}}</div></includeonly><noinclude>__NOTOC__[[Category:Instruction Templates]][[Category:Formatting Templates]][[Category:Layout Templates]][https://stepmodifications.org/forum/topic/19102-sidebox/ '''Forum Topic''']
 == Purpose & Usage ==
-{{fc|#e6b69e|Create a left or right floating sidebox.}}
+This template creates a left or right floating "sidebox." It is generally desirable to call the <code><nowiki>{{clear}}</nowiki></code> template after it to clear the float.
-=== Parameters ===
+=== Required Parameters ===
+<span class="salmontx">'''header'''</span> - The heading or title
+: '''Values'''
+:: Default: n/a, <code>title=Title Text</code>
-; <nowiki>{{{1}}}</nowiki> {{CustomTag|color=red|tag=Required}}
+<span class="salmontx">'''text'''</span> - The body text
-: First unmarked parameter defines the float position of the box.
+: '''Values'''
-: Accepts: left || right
+:: Default: n/a, <code>body=body text ...</code>
-; <nowiki>{{{2}}}</nowiki> {{CustomTag|color=red|tag=Required}}
+=== Optional Parameters ===
-: Second unmarked parameter defines the Header text for the box.
+<span class="salmontx">'''width'''</span> - Sets the % width of the sidebox
+: '''Values'''
-; <nowiki>{{{3}}}</nowiki> {{CustomTag|color=red|tag=Required}}
+:: Default: <code>width=50</code>
-: Third unmarked parameter defines the content text for the box.
+:* 1-100 (always use 10%-50% )
-; width
-: Default= 300
-: Width of the box in pixels.
-; headerColor
-: Default= #9BC1D5
-: Defines the color of the Header text.
+<span class="salmontx">'''float'''</span> - Sets the direction the sidebox floats
+: '''Values'''
+:: Default: <code>float=right</code>
+:* left
+:* ''right''
 == Examples ==
-<!--
+===Default Call===
-'''Code:'''
+The simplest call returns defaults for the template.
-<pre>{{TEMPLATE NAME AND ARGUMENTS}}</pre>
+: '''Code:'''
-'''Result:'''
+<pre>{{Sidebox
-{{TEMPLATE NAME AND ARGUMENTS}}
+|title=This is a heading
--->
+|text=This is my sidebar with as much text as I could quickly write.}}
+</pre>
-'''Code:'''
+: '''Result:'''
-<pre>{{Sidebox|right|This is a heading|This is my sidebar with as much text as I could quickly write.}}</pre>
+{{Sidebox
-'''Result:'''
+|title=This is a heading
-{{Sidebox|right|This is a heading|This is my sidebar with as much text as I could quickly write.}}
+|text=This is my sidebar with as much text as I could quickly write.}}
-{{clear}}
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-'''Code:'''
+===Optional Call===
-<pre>{{Sidebox|left|width=600|This is a heading|This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write.}}</pre>
+{{Alert|text=Use <code><nowiki>{{clear}}</nowiki></code> when using this template near headings or other markup that should clear the Sidebox.}}
-'''Result:'''
+: '''Code:'''
-{{Sidebox|left|width=600|This is a heading|This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write.}}
+<pre>{{Sidebox
+|width=75
+|float=left
+|title=This is a heading
+|text=This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write.}}
+{{clear}}</pre>
+:<dt>Result:</dt>
+::{{Sidebox
+|width=75
+|float=left
+|title=This is a heading
+|text=This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write. This is my sidebar with as much text as I could quickly write.}}
 {{clear}}
-== See Also ==
+== Related Templates ==
 <!--
 *[[:RELATED TEMPLATE NAME AND ARGUMENTS]]