Joepedia

Template:Box: Difference between revisions

← Older edit
VisualWikitext
No edit summary
No edit summary
 
(10 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;"><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;}}
     <!-- Link div -->
    <!-- Title -->
     {{#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>}}
     <div style="color: {{{title-color|var(--color-base)}}}; font-weight: bold; line-height: 50px;"><big>{{{title}}}</big></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 15: 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>
Retrieved from "https://wiki.jads.stream/wiki/Template:Box"