Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
You must create an account or log in to edit.

Template:Character Relationship Box: Difference between revisions

Template page
Content deleted Content added
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(46 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly><templatestyles src="Character Relationship Box/styles.css"/><div class="character-relationship-box" style="--template-arg-background:{{{background|var(--color-surface-1)}}};--template-arg-color:{{{color|var(--color-amaranth-legacy-scope)}}};--template-arg-border-color:{{{border-color|var(--template-arg-color)}}};--template-arg-border-image:{{{border-image|unset}}};--template-arg-section-color:{{{section-color|var(--template-arg-color)}}};">
[[Category:META: Templates: LordSkorne7]]
[[File:{{{image}}}|128px|right]]
<includeonly>
<span
class="character-relationship-box"
style="
border: 2px solid {{{border-color|#df0049}}};
background-color: {{{background-color|#2b2b2b}}};
color: {{{text-color|#e0e0e0}}};
font-family: 'Varela Round', sans-serif;
width: {{{width|auto}}};
text-align: {{{align|left}}};
"
>
<span class="character-relationship-text">
<span class="character-relationship-header" style="color: {{{header-color|#df0049}}}; font-size: {{{header-size|1.5em}}};">
{{{hearts|♥♥♥♥♥}}} {{{name|Character Name}}}
</span>
<span class="character-relationship-subinfo">
<b>Relationship:</b> {{{relationship|None}}}<br>
<b>Meeting Date:</b> {{{meeting-date|Unknown}}}<br>
<b>Meeting Location:</b> {{{meeting-location|Unknown}}}<br>
<b>Met Through:</b> {{{met-through|Unknown}}}
</span>
<span class="character-relationship-description">
{{{description|Relationship description goes here.}}}
</span>
</span>
<span class="character-relationship-image" style="display:{{{image-display|inline-block}}}; margin-left:15px;">
[[File:{{{image|}}}|{{{image-size|100px}}}]]
</span>
</span>
</includeonly>


<span class="character-relationship-box-hearts" style="--template-arg-heart-color:{{{heart-color|var(--template-arg-color)}}};">{{yesno|{{yesno-yes|{{{hearts-display}}}}}|yes={{#switch:{{{hearts|5}}}
<noinclude>
| 1 = {{{heart-type|♥}}}{{{empty-heart-type|♡}}}{{{empty-heart-type|♡}}}{{{empty-heart-type|♡}}}{{{empty-heart-type|♡}}}
| 2 = {{{heart-type|♥}}}{{{heart-type|♥}}}{{{empty-heart-type|♡}}}{{{empty-heart-type|♡}}}{{{empty-heart-type|♡}}}
| 3 = {{{heart-type|♥}}}{{{heart-type|♥}}}{{{heart-type|♥}}}{{{empty-heart-type|♡}}}{{{empty-heart-type|♡}}}
| 4 = {{{heart-type|♥}}}{{{heart-type|♥}}}{{{heart-type|♥}}}{{{heart-type|♥}}}{{{empty-heart-type|♡}}}
| 5 = {{{heart-type|♥}}}{{{heart-type|♥}}}{{{heart-type|♥}}}{{{heart-type|♥}}}{{{heart-type|♥}}}
| default = {{{heart-type|♥}}}{{{heart-type|♥}}}{{{heart-type|♥}}}{{{heart-type|♥}}}{{{heart-type|♥}}}
}}<nowiki> </nowiki>}}{{{name}}}</span>

<span class="character-relationship-box-label">Relationship: </span> {{{relationship}}}

<span class="character-relationship-box-label">Meeting Date: </span> {{{meeting-date}}}

<span class="character-relationship-box-label">Meeting Location: </span> {{{meeting-location}}}

<span class="character-relationship-box-label">Met Through: </span> {{{met-through}}}

<span class="character-relationship-box-label">Description:</span>
<div class="character-relationship-box-description">
{{{description}}}
</div>
</div></includeonly><noinclude>
<templatedata>
<templatedata>
{
{
"description": "Displays a character relationship box with hearts, name, relationship info, description, and optional image, customizable with colors, width, alignment, and more.",
"description": "Creates a customizable character relationship box with proper side-by-side positioning for image and text, optional hearts, and dynamic labels.",
"params": {
"params": {
"background": { "label": "Background", "type": "string", "default": "linear-gradient(180deg, #2e0e19 0%, #1c070f 100%)" },
"name": {
"label": "Character Name",
"border-color": { "label": "Border Color", "type": "string", "default": "#137dc4" },
"type": "string",
"section-color": { "label": "Section Label Color", "type": "string", "default": "#c7b5e5" },
"heart-color": { "label": "Heart Color", "type": "string", "default": "#a38bd3" },
"default": "Character Name"
"heart-type": { "label": "Heart Symbol", "type": "string", "default": "♥" },
},
"hearts": { "label": "Number of Hearts", "type": "number", "default": "5" },
"hearts": {
"label": "Hearts (♥/♡)",
"hearts-display": { "label": "Custom Hearts Display", "type": "string" },
"type": "string",
"name": { "label": "Name next to Hearts", "type": "string", "default": "Hope" },
"default": "♥♥♥♥♥"
"image": { "label": "Image File Name", "type": "string", "default": "Glypht.png" },
"relationship": { "label": "Relationship", "type": "string", "default": "Light of His Life!" },
},
"meeting-date": { "label": "Meeting Date", "type": "string" },
"relationship": {
"label": "Relationship",
"meeting-location": { "label": "Meeting Location", "type": "string" },
"type": "string",
"met-through": { "label": "Met Through", "type": "string" },
"description": { "label": "Description", "type": "string" }
"default": "None"
},
"meeting-date": {
"label": "Meeting Date",
"type": "string",
"default": "Unknown"
},
"meeting-location": {
"label": "Meeting Location",
"type": "string",
"default": "Unknown"
},
"met-through": {
"label": "Met Through",
"type": "string",
"default": "Unknown"
},
"description": {
"label": "Description",
"type": "string",
"default": "Relationship description goes here."
},
"image": {
"label": "Image Filename",
"type": "string",
"default": ""
},
"image-size": {
"label": "Image Size",
"type": "string",
"default": "100px"
},
"image-display": {
"label": "Image Display",
"type": "string",
"default": "inline-block",
"description": "Use 'inline-block' to show an image, 'none' to hide."
},
"border-color": {
"label": "Border Color",
"type": "string",
"default": "#df0049"
},
"background-color": {
"label": "Background Color",
"type": "string",
"default": "#2b2b2b"
},
"text-color": {
"label": "Text Color",
"type": "string",
"default": "#e0e0e0"
},
"header-color": {
"label": "Header Color",
"type": "string",
"default": "#df0049"
},
"header-size": {
"label": "Header Size",
"type": "string",
"default": "1.5em"
},
"width": {
"label": "Width",
"type": "string",
"default": "auto"
},
"align": {
"label": "Text Align",
"type": "string",
"default": "left"
}
}
}
}
}
</templatedata>
</templatedata>

==Examples==
<syntaxhighlight lang="wikitext" copy>
{{Character Relationship Box
|background=linear-gradient(180deg, #2e0e19 0%, #1c070f 100%)
|color=#137dc4
|hearts-display=no
|name=Example
|image=Glypht.png
|relationship=Cool
|meeting-date=2025
|meeting-location=Amaranthia
|met-through=Amaranth Legacy
|description=Glyph t
}}
</syntaxhighlight>
{{Character Relationship Box
|background=linear-gradient(180deg, #2e0e19 0%, #1c070f 100%)
|color=#137dc4
|hearts-display=no
|name=Example
|image=Glypht.png
|relationship=Cool
|meeting-date=2025
|meeting-location=Amaranthia
|met-through=Amaranth Legacy
|description=Glyph t
}}

<syntaxhighlight lang="wikitext" copy>
{{Character Relationship Box
|background=linear-gradient(180deg, #2e0e19 0%, #1c070f 100%)
|color=#137dc4
|hearts=3
|heart-color=green
|name=Example
|image=Glypht.png
|relationship=Cool
|meeting-date=2025
|meeting-location=Amaranthia
|met-through=Amaranth Legacy
|description=Glyph t
}}
</syntaxhighlight>
{{Character Relationship Box
|background=linear-gradient(180deg, #2e0e19 0%, #1c070f 100%)
|color=#137dc4
|hearts=3
|heart-color=green
|name=Example
|image=Glypht.png
|relationship=Cool
|meeting-date=2025
|meeting-location=Amaranthia
|met-through=Amaranth Legacy
|description=Glyph t
}}

==Credits==
Significantly based upon relationship boxes from [https://numbersstory.com/ Numbers Story] by [https://numbersstory.com/fun/secretlore/about Marvin]

[[Category:Templates: LordSkorne7]]
[[Category:Templates: tesinormed]]
</noinclude>
</noinclude>

Latest revision as of 00:51, May 25, 2025

Creates a customizable character relationship box with proper side-by-side positioning for image and text, optional hearts, and dynamic labels.

Template parameters[Edit template data]

ParameterDescriptionTypeStatus
Backgroundbackground

no description

Default
linear-gradient(180deg, #2e0e19 0%, #1c070f 100%)
Stringoptional
Border Colorborder-color

no description

Default
#137dc4
Stringoptional
Section Label Colorsection-color

no description

Default
#c7b5e5
Stringoptional
Heart Colorheart-color

no description

Default
#a38bd3
Stringoptional
Heart Symbolheart-type

no description

Default
Stringoptional
Number of Heartshearts

no description

Default
5
Numberoptional
Custom Hearts Displayhearts-display

no description

Stringoptional
Name next to Heartsname

no description

Default
Hope
Stringoptional
Image File Nameimage

no description

Default
Glypht.png
Stringoptional
Relationshiprelationship

no description

Default
Light of His Life!
Stringoptional
Meeting Datemeeting-date

no description

Stringoptional
Meeting Locationmeeting-location

no description

Stringoptional
Met Throughmet-through

no description

Stringoptional
Descriptiondescription

no description

Stringoptional

Examples

{{Character Relationship Box
|background=linear-gradient(180deg, #2e0e19 0%, #1c070f 100%)
|color=#137dc4
|hearts-display=no
|name=Example
|image=Glypht.png
|relationship=Cool
|meeting-date=2025
|meeting-location=Amaranthia
|met-through=Amaranth Legacy
|description=Glyph t
}}

Example

Relationship: Cool

Meeting Date: 2025

Meeting Location: Amaranthia

Met Through: Amaranth Legacy

Description:

Glyph t

{{Character Relationship Box
|background=linear-gradient(180deg, #2e0e19 0%, #1c070f 100%)
|color=#137dc4
|hearts=3
|heart-color=green
|name=Example
|image=Glypht.png
|relationship=Cool
|meeting-date=2025
|meeting-location=Amaranthia
|met-through=Amaranth Legacy
|description=Glyph t
}}

♥♥♥♡♡ Example

Relationship: Cool

Meeting Date: 2025

Meeting Location: Amaranthia

Met Through: Amaranth Legacy

Description:

Glyph t

Credits

Significantly based upon relationship boxes from Numbers Story by Marvin