Template
Interface template

Lbox

From Dogcraft Wiki

(approach #1)
 
mNo edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>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.
<includeonly><templatestyles src="Lbox/styles.css" />{{Box
|class=lbox
|style=box-shadow: 0 2px 3px rgba(85, 85, 85, 0.2), 0 0 0 1px rgba(85, 85, 85, 0.2); transition: box-shadow ease-in-out 0.2s; border-radius:5px; min-width:15%;
|headerstyle=height:calc(30% - 0.6em);
|width={{{width|25%}}}
|height={{{height|400px}}}
|link={{{link|{{{title|}}}}}}
|title={{{title|}}}
|titlecolor={{{titlecolor|white}}}
|image={{{image|}}}
|content={{{content|}}}
|footer={{{footer|}}}
}}</includeonly><noinclude>
{{TemplateStyles}}
==Linked box template==
The linked box or '''lbox''' template is a specialized version of {{tt|Box}} It is an interface template for creating containers that also serve as links, useful for navigation. Used across the wiki on various pages, such as the main page. Please check the template parameters before use!


This template is only transcluding a specific configuration of {{tt|Box}} with added CSS.


<div style="display:flex; gap:10px; justify-content:center;">
{{LBox|title=Survival Railway Network}}
{{LBox|title=Nether Transport Network}}
{{LBox|title=Road & Horse Network}}
{{LBox|title=Other Railway Network}}
{{LBox|title=Connected Seas Coalition}}
</div>


</noinclude><includeonly><div class="lbox" style="color:{{{textcolor|#000}}}; background-color:{{{background|#E9EDEF}}}; height:{{{height|400px}}}; max-width:{{{width|25%}}}; overflow:clip; box-shadow:2px 0 3px 0 rgba(85, 85, 85, 0.25), 2px 0 4px 0 #5555552e; border-radius:0px; position:relative;">{{Header|{{{title|Title}}}|margin=margin:0 0 5px 0;}}
===Example(s)===
<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 [[SRN|<span class="lbox-overlay" style="position:absolute; width:100%; height:100%; top:0; left:0;"></span>]]}}}</p>
====No image====
</div><includeonly>
<pre style="white-space:pre-line;"><nowiki>{{lbox
|title=Survival 4
|width=300px
|height=370px
|content=The fourth dogcraft survival world, running from 1<sup>st</sup> April 2020 to 14<sup>th</sup> March 2022. This was the first time survival was split into multiple interconnected worlds, which were called Husky and Beagle. These worlds ran on versions 1.15.2 to 1.17.
}}</nowiki></pre> generates: {{lbox
|title=Survival 4
|width=300px
|height=370px
|content=The fourth dogcraft survival world, running from 1<sup>st</sup> April 2020 to 14<sup>th</sup> March 2022. This was the first time survival was split into multiple interconnected worlds, which were called Husky and Beagle. These worlds ran on versions 1.15.2 to 1.17.
}}
 
 
====With image====
<pre style="white-space:pre-line;"><nowiki>{{lbox
|title=Survival 4
|width=300px
|height=370px
|image=Grand Central Station - Shepherd.png
|content=The fourth dogcraft survival world, running from 1<sup>st</sup> April 2020 to 14<sup>th</sup> March 2022. This was the first time survival was split into multiple interconnected worlds, which were called Husky and Beagle. These worlds ran on versions 1.15.2 to 1.17
|footer=This is a footer
}}</nowiki></pre> generates: {{lbox
|title=Survival 4
|width=300px
|height=370px
|image=Grand Central Station - Shepherd.png
|content=The fourth dogcraft survival world, running from 1<sup>st</sup> April 2020 to 14<sup>th</sup> March 2022. This was the first time survival was split into multiple interconnected worlds, which were called Husky and Beagle. These worlds ran on versions 1.15.2 to 1.17.
|footer=This is a footer
}}
 
 
===Flexbox layout example===
For more complex layouts, this template can be used together with a flexbox container.
<pre><nowiki><div style="display:flex; gap:10px; justify-content:center;" class="flex-mobile-wrap">
{{LBox|title=Survival Railway Network|width=none}}
{{LBox|title=Nether Transport Network|width=none}}
{{LBox|title=Road & Horse Network|width=none}}
{{LBox|title=Other Railway Network|width=none}}
{{LBox|title=Connected Seas Coalition|width=none}}
</div></nowiki></pre> generates:
<div style="display:flex; gap:10px; justify-content:center; transform: scale(.5) translate(-50%,-50%); height:200px;" class="flex-mobile-wrap">
{{LBox|title=Survival Railway Network|width=none}}
{{LBox|title=Nether Transport Network|width=none}}
{{LBox|title=Road & Horse Network|width=none}}
{{LBox|title=Other Railway Network|width=none}}
{{LBox|title=Connected Seas Coalition|width=none}}
</div>''This example has been scaled down''
 
===Template data===
<templatedata>
{
"params": {
"width": {
"label": "Maximum width",
"description": "Parameter for setting the container's maximum width.",
"example": "300px",
"type": "string",
"default": "25%",
"suggested": true
},
"height": {
"label": "Height",
"description": "Optional parameter for the container's height",
"example": "250px, 18em, 70%",
"type": "string",
"default": "400px",
"suggested": true
},
"link": {
"label": "Link",
"description": "The target page where the container leads upon clicking.",
"example": "Main page",
"type": "wiki-page-name",
"default": "#",
"required": true,
"suggested": true
},
"title": {
"label": "Title",
"description": "The container's title",
"example": "Survival 3",
"type": "string",
"default": "Title",
"required": true,
"suggested": true
},
"titlecolor": {
"label": "Title color",
"description": "Optional parametera for setting title text color, useful when using an image as the header background.",
"example": "black, white",
"type": "string",
"default": "white",
"suggested": true
},
"image": {
"label": "Image",
"description": "For setting an image as the header background.",
"example": "Egg.png",
"type": "wiki-file-name",
"suggested": true
},
"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
}
},
"description": "A specialized version of [[Template:Box]] for creating containers that also serve as links.",
"format": "block",
"paramOrder": [
"title",
"content",
"link",
"width",
"footer",
"image",
"height",
"titlecolor"
]
}
</templatedata>
{{Interface template}}
</noinclude>

Latest revision as of 01:36, 12 July 2022

Linked box template

The linked box or lbox template is a specialized version of {{Box}} It is an interface template for creating containers that also serve as links, useful for navigation. Used across the wiki on various pages, such as the main page. Please check the template parameters before use!

This template is only transcluding a specific configuration of {{Box}} with added CSS.


Example(s)

No image

{{lbox
|title=Survival 4
|width=300px
|height=370px
|content=The fourth dogcraft survival world, running from 1<sup>st</sup> April 2020 to 14<sup>th</sup> March 2022. This was the first time survival was split into multiple interconnected worlds, which were called Husky and Beagle. These worlds ran on versions 1.15.2 to 1.17.
}}

generates:

Survival 4

The fourth dogcraft survival world, running from 1st April 2020 to 14th March 2022. This was the first time survival was split into multiple interconnected worlds, which were called Husky and Beagle. These worlds ran on versions 1.15.2 to 1.17.


With image

{{lbox
|title=Survival 4
|width=300px
|height=370px
|image=Grand Central Station - Shepherd.png
|content=The fourth dogcraft survival world, running from 1<sup>st</sup> April 2020 to 14<sup>th</sup> March 2022. This was the first time survival was split into multiple interconnected worlds, which were called Husky and Beagle. These worlds ran on versions 1.15.2 to 1.17
|footer=This is a footer
}}

generates:

Grand Central Station - Shepherd.png

Survival 4

The fourth dogcraft survival world, running from 1st April 2020 to 14th March 2022. This was the first time survival was split into multiple interconnected worlds, which were called Husky and Beagle. These worlds ran on versions 1.15.2 to 1.17.
This is a footer


Flexbox layout example

For more complex layouts, this template can be used together with a flexbox container.

<div style="display:flex; gap:10px; justify-content:center;" class="flex-mobile-wrap">
{{LBox|title=Survival Railway Network|width=none}}
{{LBox|title=Nether Transport Network|width=none}}
{{LBox|title=Road & Horse Network|width=none}}
{{LBox|title=Other Railway Network|width=none}}
{{LBox|title=Connected Seas Coalition|width=none}}
</div>

generates:

Survival Railway Network

Nether Transport Network

Road & Horse Network

Other Railway Network

Connected Seas Coalition

This example has been scaled down

Template data

A specialized version of [[Template:Box]] for creating containers that also serve as links.

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Titletitle

The container's title

Default
Title
Example
Survival 3
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
Linklink

The target page where the container leads upon clicking.

Default
#
Example
Main page
Page namerequired
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
Heightheight

Optional parameter for the container's height

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

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

Default
white
Example
black, white
Stringsuggested


Background Dragon Slayer - Retriever by Ironboundred