Editing Template:Swaggbox/doc

{{Template styles|Template:Swaggbox/styles.css}}
=== Usage ===
Swaggboxes can be used for both dedicated templates and for single-use templates on pages. 

Below is a basic Swaggbox example:
<pre>{{Swaggbox
|style=background: linear-gradient(#c0c0c0, lightgray); border: 1px solid #6e6e6e;
|image1=[[File:Color wheel.png|60px|link=Neutralplier]]
|image2=[[File:Color wheel.png|50px|link=Neutralplier]]
|line1=[[File:Color wheel.png|24px|link=]] '''This page is Color wheel''' [[File:Color wheel.png|24px|link=]]
|line2=It's not very Color wheel o algo
}}</pre>
===Description===
<templatedata>
{
  "description": "A meta-template for making header templates that look good, consistently sized, and follows modern CSS practices.",
  "format": "block",
  "params": {
    "style": {
      "label": "CSS styling",
      "description": "Allows you to define styling with CSS, defaults only apply if no style nor class is defined. Don't forget your trailing semi-colons between CSS statements!",
      "type": "content",
      "suggested": true,
      "default": "border: 1px solid #aaa; background: #ededed;"
    },
    "image1": {
      "label": "Image (Left)",
      "description": "Defines what image should be placed on the left side.",
      "type": "content",
      "suggested": true
    },
    "image2": {
      "label": "Image (Right)",
      "description": "Defines what image should be placed on the right side.",
      "type": "content"
    },
    "line1": {
      "label": "Top message line",
      "description": "The large message at the top.",
      "type": "content",
      "suggested": true,
      "default": "'''Example text'''"
    },
    "line1_style": {
      "label": "Line 1 CSS styling",
      "description": "Appends CSS styling to line 1.",
      "type": "content"
    },
    "line2": {
      "label": "Bottom message line",
      "description": "The smaller explanatory message at the bottom.",
      "type": "content",
      "suggested": true
    },
    "line2_style": {
      "label": "Line 2 CSS styling",
      "description": "Appends CSS styling to line 2.",
      "type": "content"
    },
    "content": {
      "label": "Content override",
      "description": "Overrides the default line1 and line2 system for you to manually decide how the lines should be placed/styled.",
      "type": "content"
    },
    "rootContent": {
      "label": "Root content",
      "description": "Allows you to place content in the root of the soybox. Should generally not be used except for effects that are positioned absolutely.",
      "type": "content"
    },
    "class": {
      "label": "Class",
      "description": "Allows you to append class names for use with <templatestyles>, be sure to follow the Template Manual of Style regarding class names.",
      "type": "string"
    },
    "halfWidth": {
      "label": "Half Width",
      "description": "Makes the template half as wide. (From 40rem to 28rem)",
      "type": "boolean"
    }
  }
}
</templatedata>
===Classes===
This template has custom classes which you can use to have your template follow a certain style guide, such as with Page Issue Headers.

{| class="wikitable"
|-
! Class Name !! Use
|-
| <code style="text-wrap: nowrap; border-left: 0.75rem solid #52d85b;">page-issue ok</code> || For templates that indicate the article is good and well written.
|-
| <code style="text-wrap: nowrap; border-left: 0.75rem solid #5457e5;">page-issue info</code> || For templates that indicate the article has minor issues the reader needs to be aware about, such as with articles lacking images and for confusing and controversial articles.
|-
| <code style="text-wrap: nowrap; border-left: 0.75rem solid #FF9D00;">page-issue warning</code> || For templates that indicate the article has substantial issues such as [[wikipedia:Link rot|link rot]], being biased, or sounding like AI slop. 
|-
| <code style="text-wrap: nowrap; border-left: 0.75rem solid #e23639;">page-issue critical</code> || For templates that indicate the article has critical issues that could risk it being deleted or has unverifiable information due to dead links.
|-
| <code>line1</code> || Allows you to override the styling of the first line of text.
|-
| <code>line2</code> || Allows you to override the styling of the second line of text.
|}
=== Notes ===
* On screens less than 400px wide, the <code><nowiki>{{{image2}}}</nowiki></code> will not render due to the text wrapping in an illegible manner.
[[Category:Metatemplates]]
<noinclude>[[Category:Template documentation pages]]</noinclude>