Template:Responsive Character Page: Difference between revisions

From Holocron - Star Wars Combine
Jump to navigation Jump to search
Alani Myrtel (talk | contribs)
No edit summary
Alani Myrtel (talk | contribs)
test
Line 16: Line 16:
             background-color: {{#if:{{{background-color|}}}|{{{background-color}}}|rgba(0, 0, 0, .2)}};
             background-color: {{#if:{{{background-color|}}}|{{{background-color}}}|rgba(0, 0, 0, .2)}};
             padding: .5em;">
             padding: .5em;">
{{#if:{{{main-content|}}}|{{{main-content}}}}}
{{#if:{{{main-content|}}}|<div>{{{main-content}}}</div>}}
</div <!--resp-content-left-->>
</div <!--resp-content-left-->>
<div class="resp-content-right"
<div class="resp-content-right"

Revision as of 20:59, 11 August 2023


This article is in the process of an expansion or major restructuring, and is not yet complete. Do not make generic Holocron edits.
If this page has not been edited in several weeks, please remove this template.


Usage

{{Template:Responsive Character Page
| backdrop-color = optional, defaults to 'none'.
| background-color = optional, defaults to 'rgba(#000000, .2)'.
| character-infobox-width = required, preferably in pixels (since character images are sized in pixels, account for table margins, paddings and/or borders!). Works best with infoboxes flexed to 100% width.
| main-content = optional, defaults to an empty string. This is the content shown left of the character infobox (or below on mobile).
| character-infobox = required
| filler-content = optional, defaults to an empty string. This is a filler box mainly meant for desktop view. This is the content shown below the character infobox (both on mobile and on desktop).
}}

It is recommended to place the __TOC__ magic word inside the main-content field to force the Table of Contents of the page to render inside the template. Otherwise, it will most likely render above the template. Use the __NOTOC__ magic word if you want to stop the Table of Contents to render altogether.

Examples

Try and view these examples both on mobile and desktop view via the F12 menu. See here (archived: March 24th 2023) to see how to.

No background color specified

This is the main content without any specified background color.
{{{name}}}
{{{image}}}
Biographical Information
Race {{{race}}}
Physical Description
Gender {{{gender}}}
Political Information
Affiliation {{{affiliation}}}
 
 


No background color specified and with filler content

This is the main content with extra filler.
{{{name}}}
{{{image}}}
Biographical Information
Race {{{race}}}
Physical Description
Gender {{{gender}}}
Political Information
Affiliation {{{affiliation}}}
 
 

This is some optional filler content.


Background color specified

This is the main content with extra filler. The background-color parameter is set to rgba(50, 0, 0, .5).
{{{name}}}
{{{image}}}
Biographical Information
Race {{{race}}}
Physical Description
Gender {{{gender}}}
Political Information
Affiliation {{{affiliation}}}
 
 

This is some optional filler content.


Backdrop color specified

This is the main content with extra filler. The backdrop-color parameter is set to rgba(0, 0, 0, .2).
{{{name}}}
{{{image}}}
Biographical Information
Race {{{race}}}
Physical Description
Gender {{{gender}}}
Political Information
Affiliation {{{affiliation}}}
 
 

This is some optional filler content.