Jump to content

Template:Box: Difference between revisions

From Joepedia
← Older edit
VisualWikitext
No edit summary
No edit summary
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<div style="box-shadow: 0 0 0.2em #999999; border-radius: 0.2em; margin: 0.5em 0.5em 1em 0.5em; background: {{{background-content-color|#f8f9fa}}}; {{{style|}}};">
<div class="{{{class|}}}" style="display: block; box-shadow: 0 0 0.2em #999999; border-radius: 0.2em; margin: 0.5em 0.5em 1em 0.5em; background: {{{background-content-color|var(--background-color-base)}}}; {{{style|}}};">
   <!-- CSS for icon and background -->
   <!-- Title Box -->
   <div style="background: {{{background-title-color|#eaecf0}}}; border-radius: 0.2em 0.2em 0 0; padding: 0.5em 1em 0.5em 1em;; display: flex; align-items: center;">
   <div style="background: {{{background-title-color|var(--background-color-neutral)}}}; border-radius: 0.2em 0.2em 0 0; padding: 0.5em 1em 0.5em 1em; display: flex; align-items: center; {{#if:{{{center|}}}|justify-content: space-between;}}">
     {{#if:{{{icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 50px;">[[File:{{{icon}}}|50px|left|link=|alt=]]</span>&#32;}}
    <!-- Icon -->
     <div style="color: {{{title-color|#000000}}}; font-weight: bold; line-height: 50px; {{#if:{{{center}}}|text-align: center;}}"><big>{{{title}}}</big></div>
     {{#if:{{{icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 50pxm;">[[File:{{{icon}}}|50px|left|link=|alt=]]</span>&#32;}}
    {{#if:{{{trailingIcon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-right: 0.5em; line-height: 50px;">[[File:{{{trailingIcon}}}|50px|left|link=|alt=]]</span>&#32;}}
    <!-- Title -->
     <!-- Link div -->
     <div style="color: {{{title-color|var(--color-base)}}}; font-weight: bold; line-height: 50px;"><big>{{{title}}}</big></div>
     {{#if:{{{link|}}}|<div style="float: right; font-size: 0.7em;">[[{{{link}}}|<span style="color: {{{link-color|{{{title-color|#000000}}}}}};">{{{Link-text|{{{link-text|Link}}}}}}</span>]]</div>}}
     <!-- Link -->
     {{#if:{{{link|}}}|<div style="float: right; font-size: 0.7em;">[[{{{link}}}|<span style="color: {{{link-color|{{{title-color|var(--color-progressive)}}}}}};">{{{Link-text|{{{link-text|Link}}}}}}</span>]]</div>}}
    <!-- Trailing Icon -->
    {{#if:{{{trailing-icon|}}}|<span style="opacity: 0.8; display: flex; align-items: center; margin-left: 0.5em; line-height: 50px;">[[File:{{{trailing-icon}}}|50px|left|link=|alt=]]</span>&#32;}}
   </div>
   </div>
   <!-- CSS for the content -->
   <!-- Content Box -->
   <div style="padding: 1em; padding-left: 1em;">
   <div style="padding: 1em; padding-left: 1em; color: var(--color-base);">
<!---->{{{content}}}{{clr}}
<!---->{{{content}}}{{clr}}
   </div>
   </div>
Line 16: Line 19:
<templatedata>
<templatedata>
{
{
"params": {
"params": {
"title": {
"title": {
"label": "Title",
"label": "Title",
"description": "Title of the box.",
"description": "Title of the box.",
"example": "Selection",
"example": "Selection",
"type": "string",
"type": "string",
"required": true
"required": true
},
},
"content": {
"content": {
"label": "Content",
"label": "Content",
"description": "Content of the box.",
"description": "Content of the box.",
"example": "{{clr}}{{Template:Box/Sample}}",
"example": "{{clr}}{{Template:Box/Sample}}",
"type": "content",
"type": "content",
"required": true
"required": true
},
},
"link": {
"link": {
"label": "Link",
"label": "Link",
"description": "Wikipedia page title for editing the content.",
"description": "Wikipedia page title for editing the content.",
"example": "Template:Box/Sample",
"example": "Template:Box/Sample",
"type": "wiki-page-name",
"type": "wiki-page-name",
"suggested": true
"suggested": true
},
},
"icon": {
"icon": {
"label": "Icon",
"label": "Icon",
"description": "Name of an icon file.",
"description": "Name of an icon file.",
"example": "Circle-icons-chat.svg",
"example": "Circle-icons-chat.svg",
"type": "wiki-file-name"
"type": "wiki-file-name"
},
},
"title-color": {
"title-color": {
"label": "Title color",
"label": "Title color",
"description": "Hexadecimal color code of the title text.",
"description": "CSS color of the title text.",
"example": "#339966",
"example": "#339966",
"type": "string",
"type": "string",
"default": "#FFFFFF"
"default": "var(--color-base)"
},
},
"style": {
"style": {
"label": "Style",
"label": "Style",
"description": "Additional CSS style for the container.",
"description": "Additional CSS style for the container.",
"type": "string"
"type": "string"
},
},
"link-color": {
"link-color": {
"label": "Link color",
"label": "Link color",
"description": "Hexadecimal color code of the 'Edit' link.",
"description": "CSS color of the 'Edit' link.",
"example": "#339966",
"example": "#339966",
"type": "string",
"type": "string",
"default": "#999999"
"default": "var(--color-progressive)"
},
},
"background-title-color": {
"background-title-color": {
"label": "Title background color",
"label": "Title background color",
"description": "Hexadecimal color code of the title bar background.",
"description": "CSS color of the title bar background.",
"example": "#447FF5",
"example": "#447FF5",
"type": "string",
"type": "string",
"default": "#339966",
"default": "var(--background-color-base)",
"suggested": true
"suggested": true
},
},
"background-content-color": {
"background-content-color": {
"label": "Content background color",
"label": "Content background color",
"description": "Hexadecimal color code of the box content background.",
"description": "CSS color of the box content background.",
"example": "#339966",
"example": "#339966",
"type": "string",
"type": "string",
"default": "#F8F9FA"
"default": "var(--background-color-base)"
},
},
"Link-text": {
"Link-text": {
"description": "Default title: edit, can be changed",
"description": "Default title: edit, can be changed",
"default": "edit"
"default": "edit"
},
},
"background-color": {},
"background-color": {},
"background-title-color-hover": {
"background-title-color-hover": {
"label": "Title background color on hover",
"label": "Title background color on hover",
"description": "When hovering with the mouse, changes the background color of the title.",
"description": "When hovering with the mouse, changes the background color of the title.",
"default": "{{{background-title-color}}}"
"default": "{{{background-title-color}}}"
},
},
"title-color-hover": {},
"title-color-hover": {},
"flex": {
"flex": {
"label": "Flex",
"label": "Flex",
"description": "Integration into the dynamic column/row grid. The first number indicates the proportion at which the box can expand, the second indicates the proportion at which it can shrink, the third indicates the minimum width in px/em of the box",
"description": "Integration into the dynamic column/row grid. The first number indicates the proportion at which the box can expand, the second indicates the proportion at which it can shrink, the third indicates the minimum width in px/em of the box",
"type": "string",
"type": "string",
"default": "0 1 auto"
"default": "0 1 auto"
},
},
"center": {
"center": {
"label": "Center title",
"label": "Center title",
"description": "If specified, it allows centering the title."
"description": "If specified, it allows centering the title."
}
},
},
"trailing-icon": {
"description": "The box template allows you to highlight something with a coloured box.",
"label": "Trailing Icon",
"paramOrder": [
"description": "An icon to display after, rather than before, the title.",
"title",
"type": "wiki-file-name"
"content",
},
"link",
"class": {
"background-title-color",
"label": "Class",
"icon",
"description": "CSS classes to apply to the box.",
"title-color",
"type": "string",
"style",
"suggestedvalues": [
"link-color",
"ambox",
"background-content-color",
"hatnote",
"Link-text",
"dablink",
"background-color",
"side-box"
"background-title-color-hover",
]
"title-color-hover",
}
"flex",
},
"center"
"description": "The box template allows you to highlight something with a coloured box.",
],
"paramOrder": [
"format": "block"
"title",
"content",
"link",
"background-title-color",
"icon",
"trailing-icon",
"title-color",
"style",
"link-color",
"background-content-color",
"Link-text",
"background-color",
"background-title-color-hover",
"title-color-hover",
"flex",
"center",
"class"
],
"format": "block"
}
}
</templatedata>
</templatedata>
</noinclude>
</noinclude>

Latest revision as of 16:14, 11 February 2025

{{{title}}}


{{{content}}}

The box template allows you to highlight something with a coloured box.

Template parameters[Edit template data]

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Titletitle

Title of the box.

Example
Selection
Stringrequired
Contentcontent

Content of the box.

Example
{{clr}}{{Template:Box/Sample}}
Contentrequired
Linklink

Wikipedia page title for editing the content.

Example
Template:Box/Sample
Page namesuggested
Title background colorbackground-title-color

CSS color of the title bar background.

Default
var(--background-color-base)
Example
#447FF5
Stringsuggested
Iconicon

Name of an icon file.

Example
Circle-icons-chat.svg
Fileoptional
Trailing Icontrailing-icon

An icon to display after, rather than before, the title.

Fileoptional
Title colortitle-color

CSS color of the title text.

Default
var(--color-base)
Example
#339966
Stringoptional
Stylestyle

Additional CSS style for the container.

Stringoptional
Link colorlink-color

CSS color of the 'Edit' link.

Default
var(--color-progressive)
Example
#339966
Stringoptional
Content background colorbackground-content-color

CSS color of the box content background.

Default
var(--background-color-base)
Example
#339966
Stringoptional
Link-textLink-text

Default title: edit, can be changed

Default
edit
Unknownoptional
background-colorbackground-color

no description

Unknownoptional
Title background color on hoverbackground-title-color-hover

When hovering with the mouse, changes the background color of the title.

Default
{{{background-title-color}}}
Unknownoptional
title-color-hovertitle-color-hover

no description

Unknownoptional
Flexflex

Integration into the dynamic column/row grid. The first number indicates the proportion at which the box can expand, the second indicates the proportion at which it can shrink, the third indicates the minimum width in px/em of the box

Default
0 1 auto
Stringoptional
Center titlecenter

If specified, it allows centering the title.

Unknownoptional
Classclass

CSS classes to apply to the box.

Suggested values
ambox hatnote dablink side-box
Stringoptional
Retrieved from "https://wiki.jads.stream/index.php?title=Template:Box&oldid=3934"