Proposal for Official Use of the Border Template

[Just_a_Random_Butler]

Hello. I've been planning to make this way back then, but have only recently started working on it. And I was a bit lazy, so the posting of this thread was delayed several times.

---

As the title suggests, I will be introducing the Border template:

Border

vsbattles.fandom.com

Just like the <div> tags people use, the Border template is designed to enhance the visual organization of your content by displaying it within a bordered line. This provides a clear visual indicator to separate sections on a page using a visible border feature. Additionally, the template is useful for conserving space on article pages, particularly when you have a lengthy list, which can be presented with a border + scroll feature. The goal of the template is that it should be easy to use and remember.

I created it to complement tabbers, offering clear visual distinctions between sections within the tabber and those outside of it. Using this template in conjunction with tabbers is highly recommended for effective organization and visual clarity.

It is easily customizable, allowing users to decide whether they want to include a scroll feature or make the border visible. I designed it with differing user preferences in mind.

My proposals are as follows:

• Officially approve the usage of Template:Border for the separation of a page's content.
• Replace the usage of border <div> tags with Template:Border.

By the way, I want to clarify that I'm not saying this template should be mandatory or should be used by everyone. My suggestion is that this template should be formally permitted, and users can choose to use it.

Reasons why I made this and why use this?

---

• I created this template not only for the reasons outlined in the Concept section but also because many users use different <div> styles. This can cause problems when others copy these styles without realizing they were designed for specific profiles and might not work correctly elsewhere. For example, a scrolling <div> could hide tabbers if the tabber headers are placed underneath it.
  
  To be clear, I'm just highlighting pages with these issues and acknowledging that the mistakes I'm talking about are actually pretty common. The misuse of these styles is causing me frustration due to the constant need for corrections. Here are a few examples:

https://vsbattles.fandom.com/wiki/Andrius?oldid=8667549​

https://vsbattles.fandom.com/wiki/Enerjak?oldid=8621324​

https://vsbattles.fandom.com/wiki/Zenkaizer?oldid=8623667​

• The template is much shorter than <div> tags and is highly customizable, this template is versatile and suitable for use in P&A sections, statistics sections, and intelligence sections. Instead of using this:
  

  <div style="width:{{{width|100%}}}; -moz-border-radius-topleft:0.5em; border:1px solid #AAAAAA; background:transparent;">
  </div>

  or this:
  

  <div class="scrollable" style="overflow:auto; max-height:600px; width:{{{width|100%}}}; -moz-border-radius-topleft:0.5em; border:1px solid #AAAAAA; padding-left:0.5em; background:transparent;">
  </div>

  
  You can just use this which does the same thing:
  

  {{Border|Scroll=Yes|Visible=Yes|Content=
  }}

  
  However, please note that while this template is effective when used with tabbers for multiple keys, it should not be used to house multiple keys on its own.
  
  
• Just like <div> tags, this template can be used in a statistics section with a tabber to clearly mark the boundary between tabber content and content outside the tabber. For instance, some pages have tabbers only for the Attack Potency section, while others extend them to include the Durability section, which can be confusing without using this template or <div> tags. This template can help address that issue by providing a clear visual separation, just like <div> tags do.
  
  
• When using type 2 tabbers, nesting <div> tags can cause the borders to overlap, resulting in a darker appearance on some sections of the border. This template includes a parameter for controlling border visibility, ensuring that overlaps are not a problem. For example, see here, you can see the difference between the template border and the <div> tag border.

Template Usage / Usage Instructions

---

Parameters:

• Scroll: [Yes/No] Enables the scroll feature of the template. Default value is No.
• Visible: [Yes/No] Makes the line border visible. Default value is Yes.
• Content: Refers to the content displayed by the template on the page. While the template has some failsafes to function without explicitly mentioning this parameter, it is recommended to include it in the template's usage for clarity, completeness and to avoid unexpected template behaviors.

Optional Parameter:

• Padding: [Yes/No] The left and right padding is set to 0.5em when the value is Yes. If set to No, the padding becomes 0.0em. The default value is Yes, and this parameter can be omitted, in which case it will default to Yes.

{{Border|Scroll=Yes|Visible=Yes|Content=This is a scrollable box with a visible border.}}
{{Border|Scroll=No|Visible=Yes|Content=This is a non-scrollable box with a visible border.}}
{{Border|Scroll=Yes|Visible=No|Content=This is a scrollable box with no border.}}

{{Border|Scroll=Yes|Visible=No|Padding=No|Content=This is a scrollable box with no border and no padding.}}

Recommended:

1. Scroll is recommended when there is a long list, like a long and bulleted P&A section.
2. When there are several keys, separate the keys by tabbers, and then use the template on the contents of each keys. Do not use this template on multiple keys at once.
3. Do not use scroll on statistic tabbers.
4. Do not place a Border template with scrolling enabled above a tabber title (|-|Tabber Title 1=), as scrolling will also affect the title. This is not just the case for the template, but for scrollable div codes.
5. Make sure to always include the Content= parameter whenever possible, as it's standard practice for most templates that have the content= parameter. Unexpected formatting, such as = sign in YouTube links, can cause templates to break if the content= parameter is not explicitly defined. For instance, even the {{Scroll box}} template can malfunction when written like this:
   

   {{Scroll box|
   [https://www.youtube.com/watch?v=OLsdhC9GdXQ Hello]
   }}

Visual Examples (Here's what the template looks like when used):

---

Border (With scroll and visible border)

Spoiler

Code:

{{Border|Scroll=Yes|Visible=Yes|Content=
Content text
}}

Result:

Border (Without scroll and visible border)

Spoiler

Code:

{{Border|Scroll=No|Visible=Yes|Content=
Content text
}}

Result:

Border (With scroll and invisible border)

Spoiler

Code:

{{Border|Scroll=Yes|Visible=No|Content=
Content text
}}

Result:

Practical Usage Examples + Source codes

---

Examples:

Spoiler

P&A Tabber (Tabber Type 1)

Just a Random Butler/BorderExample1

vsbattles.fandom.com

P&A Tabber (Tabber Type 2)

Just a Random Butler/BorderExample2

vsbattles.fandom.com

Statistics Tabber (Tabber Type 1)

Just a Random Butler/BorderExample3

vsbattles.fandom.com

Intelligence

Just a Random Butler/BorderExample4

vsbattles.fandom.com

Intelligence Tabber (Tabber Type 1)

Just a Random Butler/BorderExample5

vsbattles.fandom.com

Source codes:

Spoiler

Tabber Type 1 source code

Just a Random Butler/TabberType1

vsbattles.fandom.com

Tabber Type 2 source code

Just a Random Butler/TabberType2

vsbattles.fandom.com

The Template

---

Here's the template page:

Border

vsbattles.fandom.com

The template page itself includes instructions on its parameters, along with visual examples.

Here's the documentation:

Border/doc

vsbattles.fandom.com

This template is also compatible with VisualEditor and includes custom TemplateData to help new users.

Conclusion: I propose that we should make the use of this template official, and should replace the use of <div> tags that are meant to act as a border for content.

 

[Antvasima]

@AKM sama @DontTalkDT @DarkDragonMedeus @Mr. Bambu @Celestial_Pegasus @Wokistan @Ultima_Reality @Elizhaa @Qawsedf234 @ByAsura @Sir_Ovens @Damage3245 @Starter_Pack @Abstractions @LordGriffin1000 @Colonel_Krukov @SamanPatou @GyroNutz @Firestorm808 @Everything12 @Maverick_Zero_X @Crabwhale @Agnaa @DarkGrath @Dereck03 @Planck69 @Shadowbokunohero @QrowBarr @Crazylatin77 @Zaratthustra @ElixirBlue @Tllmbrg @Nehz_XZX @Therefir @IdiosyncraticLawyer @GarrixianXD @Catzlaflame @Vzearr

What do you think about this?

 

[Crabwhale]

I'm neutral on it. Personally I feel like just good ol' proper spacing accomplishes the same thing, but that's a personal taste as far as I reckon.

I would be absolutely opposed if this were to ever be mandatory however, so let's set that goalpost in some good concrete.

 

[Therefir]

I love it, seems to be working great, −186‎ bytes of space and with the same result.

 

[ByAsura]

I like it.

 

[Elizhaa]

I am fine with the proposals.

 

[Planck69]

Looks good to me.

 

[DarkDragonMedeus]

I'm neutral on it. Personally I feel like just good ol' proper spacing accomplishes the same thing, but that's a personal taste as far as I reckon.

I would be absolutely opposed if this were to ever be mandatory however, so let's set that goalpost in some good concrete.

I have about the same take as this.

 

[Vzearr]

I'm fine with it.