Template
Box
From Dogcraft Wiki
mNo edit summary |
mNo edit summary |
||
(29 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
< | <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|}}} | ||
{{ | |<div style="max-height:33%; overflow:clip; display:flex; align-items:center; justify-content:center; position:relative; background:#8b0024;">[[File:{{{image|}}}|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> | ||
|{{Header|{{{title|Title}}}|margin=margin:0 0 5px 0; {{{headerstyle|}}} }}}} | |||
<div style="padding:0 0.5em 0.2em 0.5em; overflow:{{#if:{{{link|}}}|clip|auto}}; height:100%;">{{{content|}}}</div>{{#if: {{{footer|}}} | |||
|<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== | |||
<div style="display:flex; gap:5px; justify-content:center;"> | 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! | ||
{{Box|title=Survival Railway Network}} | |||
{{Box|title=Nether Transport Network}} | ===Examples=== | ||
{{Box|title=Road & Horse Network}} | ====Basic box==== | ||
{{Box|title=Other Railway Network}} | <div style="float:right">{{Box|width=300px|title=Showcase|content=I am an example box!|footer=This is the footer}}</div> | ||
{{Box|title=Connected Seas Coalition}} | <pre><nowiki>{{Box | ||
</div> | |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}} | |||
====A more complex example==== | |||
<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 | |||
|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}} | |||
}}</nowiki></pre> generates: | |||
{{clear}} | |||
===Template data=== | |||
<templatedata> | |||
{ | |||
"params": { | |||
"class": { | |||
"label": "Class", | |||
"description": "Used to add CSS classes", | |||
"example": "phonefullscreen vdesktop lbox", | |||
"type": "string" | |||
}, | |||
"id": { | |||
"label": "Id", | |||
"description": "Used to add a (unique!) CSS id.", | |||
"example": "featured-article-container", | |||
"type": "string" | |||
}, | |||
"textcolor": { | |||
"label": "Text color", | |||
"description": "Optional parameter for setting content text color", | |||
"example": "red, #8b0024", | |||
"type": "string", | |||
"default": "#000" | |||
}, | |||
"background": { | |||
"label": "Background color", | |||
"description": "Optional parameter for setting the background color of the content area and footer ", | |||
"example": "blue, #0000ff", | |||
"type": "string", | |||
"default": "#e9edef" | |||
}, | |||
"height": { | |||
"label": "Height", | |||
"description": "Optional parameter for the container's height", | |||
"example": "250px, 18em, 70%", | |||
"type": "string", | |||
"suggested": true, | |||
"default": "400px" | |||
}, | |||
"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", | |||
"default": "#" | |||
}, | |||
"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, | |||
"default": "white" | |||
}, | |||
"title": { | |||
"label": "Title", | |||
"description": "The container's title", | |||
"example": "Featured articles", | |||
"type": "string", | |||
"required": true, | |||
"suggested": true, | |||
"default": "Title" | |||
}, | |||
"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> | |||
{{Interface template}} |
Latest revision as of 00:01, 12 July 2022
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. Please check the template parameters before use!
Examples
Basic box
Showcase
{{Box |width=300px |title=Showcase |content=I am an example box! |footer=This is the footer }}
generates:
Box with image header
{{Box |title=Showcase |image=Grand Central Station - Shepherd.png |content=I am an example box! |footer=This is the footer }}
generates:
Linked box
Please see Template:Lbox.
Inside a flexbox
Survival Railway Network
Nether Transport Network
Road & Horse Network
Other Railway Network
Connected Seas Coalition
The Box template works well with flexbox containers for creating more complex layouts. Make sure to set |width=none
(or an explicit value if desired) to avoid unexpected behavior.
<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>
generates:
A more complex example
About the Dogcraft Wiki
Edit the Wiki
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.
Wiki News
- XPModder has joined the Wiki Admin team! (30/09/23)
- The "Survival 5 Reflections of the Dogs" event has started, and World Downloads submissions are now open! (13/09/23)
- We've hit 600 pages! The 600th page is Station Competition by eybwam. (12/09/23)
- The Main Page has been refreshed with an improved look! (14/07/2023)
- The Reflections Survival 4 event has ended. (16/03/22)
- We've reached 450 pages with the creation of Spawn Build Challenge 2019! (02/03/22)
- We've launched the Reflections Survival 4 event! (09/01/22)
- We've reached 400 pages! (04/10/21)
- We've reached 350 pages! (11/07/21)
- The Reflections 2020 event has ended. (01/02/21)
- We've reached 300 pages! (10/01/21)
- We've launched the Reflections 2020 event! (02/01/21)
- The Wiki sign-in process has been improved (06/12/20)
- We've reached 275 pages! (06/12/20)
- We've reached 250 pages! (04/07/20)
- We've reached 225 pages! (03/04/20)
- The Dogcraft Wiki now uses Dogcraft.net accounts. (22/03/20)
- We've reached 175 pages! (15/01/20)
- We've reached 150 pages! (03/01/20)
- The Reflecting on 2019 Event has been launched! (02/01/20)
- The Dogcraft Wiki is now official and has moved. (06/09/2019)
- We've reached 125 pages! (05/08/2019)
- We've reached 100 pages! (04/07/2019)
- Navboxes are being added across the wiki (03/18/2019)
- The wiki domain has migrated to *.fandom.com (02/23/2019)
- Darparniox has been made a wiki administrator. (02/17/2019)
- The vote on a wiki merge to make an all-purpose ReNDoG wiki was turned town, solidifying the aim of this wiki. (02/12/2019)
{{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}} }}
generates:
Template data
Creates a basic container. Used in the interface and as a part of more complex containers.
Parameter | Description | Type | Status | |
---|---|---|---|---|
Title | title | The container's title
| String | required |
Content | content | 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.
| String | required |
Maximum width | width | Parameter for setting the container's maximum width.
| String | suggested |
Footer | footer | The content of the footer. Use this if you always want to display something at the bottom of the box.
| String | suggested |
Image | image | For setting an image as the header background.
| File | suggested |
Image alt text | imagealttext | For setting image alt text
| String | suggested |
Height | height | Optional parameter for the container's height
| String | suggested |
Title color | titlecolor | Optional parameter for setting title text color, useful when using an image as the header background.
| String | suggested |
Text color | textcolor | Optional parameter for setting content text color
| String | optional |
Background color | background | Optional parameter for setting the background color of the content area and footer
| String | optional |
Class | class | Used to add CSS classes
| String | optional |
Id | id | Used to add a (unique!) CSS id.
| String | optional |
Style | style | Optional parameter for setting further CSS.
| String | optional |
Header styles | headerstyle | Optional parameter for setting CSS on the header. | String | optional |
Link | link | Turns the container into a link. See [[Template:Lbox]] for implementation.
| Page name | optional |
Link class | linkclass | no description | String | optional |