Template
Interface template

Box

From Dogcraft Wiki

m (-)
mNo edit summary
 
(22 intermediate revisions by the same user not shown)
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|}}}|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>




in flexbox:
==Box template==
<div style="display:flex; gap:5px; justify-content:center;" class="flex-mobile-wrap">
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=Survival Railway Network|width=none}}
{{Box|title=Nether Transport Network|width=none}}
{{Box|title=Nether Transport Network|width=none}}
Line 10: Line 41:
{{Box|title=Other Railway Network|width=none}}
{{Box|title=Other Railway Network|width=none}}
{{Box|title=Connected Seas Coalition|width=none}}
{{Box|title=Connected Seas Coalition|width=none}}
</div>
</div></div>
</noinclude><includeonly><div class="{{{class|}}}" style="color:{{{textcolor|#000}}}; background-color:{{{background|#E9EDEF}}}; height:{{{height|400px}}}; max-width:{{{width|25%}}}; overflow:clip; {{{style|}}} {{#if:{{{link|}}}|position:relative;|}}">{{Header|{{{title|Title}}}|margin=margin:0 0 5px 0;}}
 
<p style="padding:0 0.5em 0.2em 0.5em; overflow:auto;">{{{content|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}}}{{#if: {{{link|}}}|[[{{{link|Main_Page}}}|<span class="{{{linkclass|}}}" style="position:absolute; width:100%; height:100%; top:0; left:0;"></span>]]|}}</p>
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.
</div><includeonly>
<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

I am an example box!
This is the footer
{{Box
|width=300px
|title=Showcase
|content=I am an example box!
|footer=This is the footer
}}

generates:

Box with image header

Grand Central Station - Shepherd.png

Showcase

I am an example box!
This is the footer
{{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

This example has been scaled down

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.

Help Editing Make an Article

Wiki News

  • 20.png 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 20.png 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.

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Titletitle

The container's title

Default
Title
Example
Featured articles
Stringrequired
Contentcontent

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
Stringrequired
Maximum widthwidth

Parameter for setting the container's maximum width.

Default
25%
Example
300px
Stringsuggested
Footerfooter

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.
Stringsuggested
Imageimage

For setting an image as the header background.

Example
Egg.png
Filesuggested
Image alt textimagealttext

For setting image alt text

Example
A picture of an egg
Stringsuggested
Heightheight

Optional parameter for the container's height

Default
400px
Example
250px, 18em, 70%
Stringsuggested
Title colortitlecolor

Optional parameter for setting title text color, useful when using an image as the header background.

Default
white
Example
black, white
Stringsuggested
Text colortextcolor

Optional parameter for setting content text color

Default
#000
Example
red, #8b0024
Stringoptional
Background colorbackground

Optional parameter for setting the background color of the content area and footer

Default
#e9edef
Example
blue, #0000ff
Stringoptional
Classclass

Used to add CSS classes

Example
phonefullscreen vdesktop lbox
Stringoptional
Idid

Used to add a (unique!) CSS id.

Example
featured-article-container
Stringoptional
Stylestyle

Optional parameter for setting further CSS.

Example
width: 200px; margin:0.2em;
Stringoptional
Header stylesheaderstyle

Optional parameter for setting CSS on the header.

Stringoptional
Linklink

Turns the container into a link. See [[Template:Lbox]] for implementation.

Default
#
Example
Main page
Page nameoptional
Link classlinkclass

no description

Stringoptional


Background Valentine's Day Event 2024 by TheWhiteTigerNL