Template:Sidebox: Difference between revisions

From Step Mods | Change The Game
mNo edit summary
mNo edit summary
 
(9 intermediate revisions by one other user not shown)
Line 1: Line 1:
<includeonly><div class="sideBox" style="width:{{{width|300}}}px; float:{{{1}}};  text-align:{{{contentAlign|justify}}};"><span class="sideBoxHeader" >'''{{{2}}}'''</span><br><hr>{{{3}}}</div></includeonly><noinclude>__NOTOC__[[Category:Instruction Templates]]
{{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 ==
== 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.


=== Required Parameters ===
=== Required Parameters ===
<span class="salmontx">'''header'''</span> - The heading or title
: '''Values'''
:: Default: n/a, <code>title=Title Text</code>


; <nowiki>{{{1}}}</nowiki>
<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>
: Second unmarked parameter defines the Header text for the box.
 
; <nowiki>{{{3}}}</nowiki>
: Third unmarked parameter defines the content for the box.


=== Optional Parameters ===
=== Optional Parameters ===
; contentAlign
<span class="salmontx">'''width'''</span> - Sets the % width of the sidebox
: Default= justify
: '''Values'''
: Controls the alignment of the default text within the box.
:: Default: <code>width=50</code>
:* 1-100 (always use 10%-50% )


; width
<span class="salmontx">'''float'''</span> - Sets the direction the sidebox floats
: Default= 300
: '''Values'''
: Width of the box in pixels.
:: Default: <code>float=right</code>
:* left
:* ''right''


== Examples ==
== Examples ==
: '''Code:''' <code><nowiki>{{Sidebox|right|This is a heading|This is my sidebar with as much text as I could quickly write.}}</nowiki></code>
===Default Call===
The simplest call returns defaults for the template.
: '''Code:'''  
<pre>{{Sidebox
|title=This is a heading
|text=This is my sidebar with as much text as I could quickly write.}}
</pre>
: '''Result:'''
: '''Result:'''
{{Sidebox|right|This is a heading|This is my sidebar with as much text as I could quickly write.}}
{{Sidebox
{{clear}}
|title=This is a heading
|text=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?


: '''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}}
{{clear}}



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

Forum Topic

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:

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]

Info-Logo.png

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:

Related Templates[edit source]

None