Template

Box

From Dogcraft Wiki

m (Undo revision 25797 by Domino)
Tag: Undo
(proper documentation + templatedata)
Line 1: Line 1:
<noinclude>
<includeonly><div class="{{{class|}}}" id="{{{id|}}}" style="display:flex; flex-direction:column; color:{{{textcolor|#000}}}; background-color:{{{background|#E9EDEF}}}; height:{{{height|400px}}}; max-width:{{{width|25%}}}; overflow:clip; {{{style|}}} {{#if:{{{link|}}}|position:relative;|}}">{{#if:{{{image|}}}
{{Box
|<div style="max-height:33%; overflow:clip; display:flex; align-items:center; justify-content:center; position:relative; background:#8b0024;">[[File:{{{image|Blank.png}}}|borderless|600px|{{{imagealttext|}}}]]<h3 style="position:absolute; color:{{{titlecolor|white}}}; width:100%; padding:0.3em 0.4em; height:100%; display:flex; align-items:center; justify-content:center; text-align:center;">{{{title|Title}}}</h3></div>
|width=none
|{{Header|{{{title|Title}}}|margin=margin:0 0 5px 0; {{{headerstyle|}}} }}}}
|title=Did you know...
<div style="padding:0 0.5em 0.2em 0.5em; overflow:{{#if:{{{link|}}}|clip|auto}}; height:100%;">{{{content|}}}</div>{{#if: {{{footer|}}}
|content={{Did you know}}
|<div style="padding:0 0.5em 0.3em 0.5em; overflow:clip;">{{{footer|}}}</div>|}}
}}
{{#if: {{{link|}}}|[[{{{link|#}}}|<span class="{{{linkclass|}}}" style="position:absolute; width:100%; height:100%; top:0; left:0;"></span>]]|}}</div><includeonly><noinclude>
 
 
==Box template==
This is an interface template for creating basic containers with a header, content and an optional footer. Used across the wiki on various pages, such as the [[Main_Page|main page]]. Please check the [[#Template data|template parameters]] before use!
 
===Examples===
====Basic box====
<div style="float:right">{{Box|width=300px|title=Showcase|content=I am an example box!|footer=This is the footer}}</div>
<pre><nowiki>{{Box
|width=300px
|title=Showcase
|content=I am an example box!
|footer=This is the footer
}}</nowiki></pre> generates:
{{clear}}
 
====Box with image header====
<div style="float:right">{{Box|title=Showcase|image=Grand Central Station - Shepherd.png|content=I am an example box!|footer=This is the footer|style=float:right;}}</div>
<pre><nowiki>{{Box
|title=Showcase
|image=Grand Central Station - Shepherd.png
|content=I am an example box!
|footer=This is the footer
}}</nowiki></pre> generates:
{{clear}}
 
====Linked box====
''Please see [[Template:Lbox]].''
 
====Inside a flexbox====
<div style="float:right; max-width:400px;text-align:right;">''This example has been scaled down''<div style="display:flex; gap:5px; justify-content:center;transform: scale(.5) translate(25%, -50%);" class="flex-mobile-wrap">
{{Box|title=Survival Railway Network|width=none}}
{{Box|title=Nether Transport Network|width=none}}
{{Box|title=Road & Horse Network|width=none}}
{{Box|title=Other Railway Network|width=none}}
{{Box|title=Connected Seas Coalition|width=none}}
</div></div>


The Box template works well with flexbox containers for creating more complex layouts. Make sure to set <code>|width=none</code> (or an explicit value if desired) to avoid unexpected behavior.
<pre><nowiki><div style="display:flex; gap:5px; justify-content:center;" class="flex-mobile-wrap">
{{Box|title=Survival Railway Network|width=none}}
{{Box|title=Nether Transport Network|width=none}}
{{Box|title=Road & Horse Network|width=none}}
{{Box|title=Other Railway Network|width=none}}
{{Box|title=Connected Seas Coalition|width=none}}
</div></nowiki></pre> generates:
{{clear}}


{{Box
====A more complex example====
|width=none
<div style="float:right">{{Box|width=300px|title=About the Dogcraft Wiki|content=<center>
<h4>Edit the Wiki</h4>
<span class="vdesktop">[https://dogcraft.net/u/login?return=/wiki/Main%20Page Sign in] to your Dogcraft account to make a page! Write about your base, a project, or edit an existing page to add more information.
<br></span>
[[Dogcraft Wiki:Guidelines|{{Clickable button | 1= Help Editing| color=white }}]] [[Dogcraft Wiki:Create an Article|{{Clickable button | 1= Make an Article| color=blue }}]]</center>|footer=<hr style="margin:0em;"><center>
<h4>Wiki News</h4></center>
{{:Main Page/NewsScroll}}}}</div>
<pre style="white-space:pre-line;"><nowiki>{{Box
|width=300px
|title=About the Dogcraft Wiki
|title=About the Dogcraft Wiki
|content=<center>
|content=<center>
Line 18: Line 72:
<h4>Wiki News</h4></center>
<h4>Wiki News</h4></center>
{{:Main Page/NewsScroll}}
{{:Main Page/NewsScroll}}
}}
}}</nowiki></pre> generates:
 
{{clear}}
 
in flexbox:
<div style="display:flex; gap:5px; justify-content:center;" class="flex-mobile-wrap">
{{Box|title=Survival Railway Network|width=none}}
{{Box|title=Nether Transport Network|width=none}}
{{Box|title=Road & Horse Network|width=none}}
{{Box|title=Other Railway Network|width=none}}
{{Box|title=Connected Seas Coalition|width=none}}
</div>


 
===Template data===
{{Box|title=Connected Seas Coalition|image=Grand Central Station - Shepherd.png}}
<templatedata>
 
{
 
"params": {
</noinclude><includeonly><div class="{{{class|}}}" id="{{{id|}}}" style="display:flex; flex-direction:column; color:{{{textcolor|#000}}}; background-color:{{{background|#E9EDEF}}}; height:{{{height|400px}}}; max-width:{{{width|25%}}}; overflow:clip; {{{style|}}} {{#if:{{{link|}}}|position:relative;|}}">{{#if:{{{image|}}}
"class": {
|<div style="max-height:33%; overflow:clip; display:flex; align-items:center; justify-content:center; position:relative; background:#8b0024;">[[File:{{{image|Blank.png}}}|borderless|600px|{{{imagecaption|}}}]]<h3 style="position:absolute; color:{{{titlecolor|white}}}; width:100%; padding:0.3em 0.4em; height:100%; display:flex; align-items:center; justify-content:center; text-align:center;">{{{title|Title}}}</h3></div>
"label": "Class",
|{{Header|{{{title|Title}}}|margin=margin:0 0 5px 0; {{{headerstyle|}}} }}}}
"description": "Used to add CSS classes",
<div style="padding:0 0.5em 0.2em 0.5em; overflow:{{#if:{{{link|}}}|clip|auto}}; height:100%;">{{{content|}}}</div>{{#if: {{{footer|}}}
"example": "phonefullscreen vdesktop lbox",
|<div style="padding:0 0.5em 0.3em 0.5em; overflow:clip;">{{{footer|}}}</div>|}}
"type": "string"
{{#if: {{{link|}}}|[[{{{link|#}}}|<span class="{{{linkclass|}}}" style="position:absolute; width:100%; height:100%; top:0; left:0;"></span>]]|}}</div><includeonly>
},
"id": {
"label": "Id",
"description": "Used to add a (unique!) CSS id.",
"example": "featured-article-container",
"type": "string"
},
"textcolor": {
"label": "Textcolor",
"description": "Optional parameter for setting content text color",
"example": "red, #8b0024",
"type": "string"
},
"background": {
"label": "Background color",
"description": "Optional parameter for setting the background color of the content area and footer ",
"example": "blue, #0000ff",
"type": "string"
},
"height": {
"label": "Height",
"description": "Optional parameter for the container's height",
"example": "400px",
"type": "string",
"suggested": true
},
"width": {
"label": "Maximum width",
"description": "Parameter for setting the container's maximum width.",
"example": "300px",
"type": "string",
"default": "25%",
"suggested": true
},
"style": {
"label": "Style",
"description": "Optional parameter for setting further CSS.",
"example": "width: 200px; margin:0.2em;",
"type": "string"
},
"link": {
"label": "Link",
"description": "Turns the container into a link. See [[Template:Lbox]] for implementation.",
"example": "Main page",
"type": "wiki-page-name"
},
"image": {
"label": "Image",
"description": "For setting an image as the header background.",
"example": "Egg.png",
"type": "wiki-file-name",
"suggested": true
},
"imagealttext": {
"label": "Image alt text",
"description": "For setting image alt text",
"example": "A picture of an egg",
"type": "string",
"suggested": true
},
"titlecolor": {
"label": "Title color",
"description": "Optional parameter for setting title text color, useful when using an image as the header background.",
"example": "black, white",
"type": "string",
"suggested": true
},
"title": {
"label": "Title",
"description": "The container's title",
"example": "Featured articles",
"type": "string",
"required": true,
"suggested": true
},
"headerstyle": {
"label": "Header styles",
"description": "Optional parameter for setting CSS on the header.",
"type": "string"
},
"content": {
"label": "Content",
"description": "The container's content. This may be almost anything that can go on a normal page, such as wikitext, files, links, other templates, html, etc.",
"example": "Lorem ipsum",
"type": "string",
"required": true,
"suggested": true
},
"footer": {
"label": "Footer",
"description": "The content of the footer. Use this if you always want to display something at the bottom of the box.",
"example": "Created on 2023. Jan. 32.",
"type": "string",
"suggested": true
},
"linkclass": {
"label": "Link class",
"type": "string"
}
},
"description": "Creates a basic container. Used in the interface and as a part of more complex containers.",
"paramOrder": [
"title",
"content",
"width",
"footer",
"image",
"imagealttext",
"height",
"titlecolor",
"textcolor",
"background",
"class",
"id",
"style",
"headerstyle",
"link",
"linkclass"
],
"format": "block"
}
</templatedata>
</noinclude>

Revision as of 23:59, 10 July 2022

This page was last modified on 10 July 2022, at 23:59. (2 years ago)
Background Dragon Slayer - Retriever by Ironboundred

© Copyright Dogcraft 2012 - 2024

• Dogcraft is not affiliated with or endorsed by Mojang or Microsoft •

Website by Owen Diffey

FAQs Punishments Rules Contact Terms and Privacy Policy Wiki Disclaimer