User:Ayjayaredii/Wiki Help - Revision history

Ayjayaredii: /* Basic Wiki Tables */ updated

2025-09-07T13:31:17Z

Basic Wiki Tables: updated

← Older revision		Revision as of 07:31, 7 September 2025
Line 447:		Line 447:

	<div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>		<div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>
	<pre style="~~background-color: #F8F8F8;~~ border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{\| class="wikitable"		<pre style="border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{\| class="wikitable"
	\|-		\|-
	\| A1 \|\| B1 \|\| C1 \|\| D1 \|\| E1		\| A1 \|\| B1 \|\| C1 \|\| D1 \|\| E1
Line 478:		Line 478:

	<div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>		<div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>
	<pre style="~~background-color: #F8F8F8;~~ border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{\| class="wikitable"		<pre style="border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{\| class="wikitable"
	\|-		\|-
	! 1st !! 2nd !! 3rd !! 4th !! 5th		! 1st !! 2nd !! 3rd !! 4th !! 5th
Line 514:		Line 514:

	<div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>		<div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>
	<pre style="~~background-color: #F8F8F8;~~ border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{\| class="wikitable"		<pre style="border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{\| class="wikitable"
	\|-		\|-
	! colspan="5" \| 1st		! colspan="5" \| 1st
Line 540:		Line 540:

	<div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>		<div style="width: 100%; overflow: hidden;"> <div style="float: left; text-align: left; width: 49%;"> <p>Code Example:</p>
	<pre style="~~background-color: #F8F8F8;~~ border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{\| class="wikitable"		<pre style="border: 1px dashed gray; padding: 5px; overflow: auto;"><nowiki>{\| class="wikitable"
	\|-		\|-
	\| rowspan="3"\| A \|\| B1 \|\| C1 \|\| D1 \|\| E1		\| rowspan="3"\| A \|\| B1 \|\| C1 \|\| D1 \|\| E1

Ayjayaredii: /* Styling with CSS */ fix box example

2025-09-07T13:27:55Z

Styling with CSS: fix box example

Ayjayaredii: /* - Division */ updated

2025-09-07T13:24:18Z

- Division: updated

← Older revision		Revision as of 07:24, 7 September 2025
Line 166:		Line 166:
	'''Code'''		'''Code'''
	<br>		<br>
	<code><nowiki><div style="~~background-color: #F8F8F8;~~ padding: 10px; border-radius: 5px;">This content is within a custom div box.</div></nowiki></code>		<code><nowiki><div style=" padding: 10px; border-radius: 5px;">This content is within a custom div box.</div></nowiki></code>
	<br>		<br>
	'''Result'''		'''Result'''
	<div style="~~background-color: #F8F8F8;~~ padding: 10px; border-radius: 5px;">This content is within a custom div box.</div>		<div style=" padding: 10px; border-radius: 5px;">This content is within a custom div box.</div>
	</div>		</div>
	{{clear}}		{{clear}}

	<div style="width: 100%; overflow: hidden;"> <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">		<div style="width: 100%; overflow: hidden;"> <div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">

	=== ''<nowiki><span></nowiki>'' - Span ===		=== ''<nowiki><span></nowiki>'' - Span ===
	'''Purpose:''' A generic inline container tag used to group small fragments of text or other inline elements. Like <nowiki>`<div>`</nowiki>, it has no inherent visual formatting but is useful for applying CSS styles to a specific piece of text without starting a new line.		'''Purpose:''' A generic inline container tag used to group small fragments of text or other inline elements. Like <nowiki>`<div>`</nowiki>, it has no inherent visual formatting but is useful for applying CSS styles to a specific piece of text without starting a new line.

Ayjayaredii: /* Basic Wiki Tables */ added another example

2025-07-12T23:13:22Z

Basic Wiki Tables: added another example

@@ Line 534: / Line 534: @@
                  |-
                  | A3 || B3 || C3 || D3 || E3
                  |}
              </div>

Ayjayaredii: /* Basic Wiki Markup */ updated

2025-07-12T23:05:55Z

Basic Wiki Markup: updated

← Older revision		Revision as of 17:05, 12 July 2025
Line 112:		Line 112:
	</div>		</div>
	</div>		</div>
	~~{clear}~~

	<div style="width: 100%; overflow: hidden;">		<div style="width: 100%; overflow: hidden;">
Line 132:		Line 132:
	</div>		</div>
	</div>		</div>
	~~{clear}~~


	== Editing Syntax ==		== Editing Syntax ==

Ayjayaredii: /* Styling with CSS */ fix box example

2025-07-12T23:03:09Z

Styling with CSS: fix box example

← Older revision		Revision as of 17:03, 12 July 2025
Line 420:		Line 420:
	\| Defines how an element's total width and height are calculated (whether padding and border are included in the specified `width`/`height`). `border-box` is often preferred for layout.		\| Defines how an element's total width and height are calculated (whether padding and border are included in the specified `width`/`height`). `border-box` is often preferred for layout.
	\| <code><nowiki>style="box-sizing: border-box;"</nowiki></code>		\| <code><nowiki>style="box-sizing: border-box;"</nowiki></code>
	\| <div style="width: 100px; padding: 20px; border: 5px solid red; background-color: #f0f0f0; box-sizing: border-box;">Box content. (This box is 100px wide, including padding/border)</div>		\| <div style="width: 100px; padding: 20px; border: 5px solid red; background-color: #f0f0f0; box-sizing: border-box;">Box content. (This box is 100px wide, including padding border)</div>
	\|}		\|}
	</div>		</div>

Ayjayaredii: Updated

2025-07-12T23:00:14Z

Updated

@@ Line 14: / Line 14: @@
 * [[#Editing Syntax|Editing Syntax]]: Covers both standard HTML elements and MediaWiki-specific tags/functions for content structure and processing.
 * [[#Styling with CSS|Styling with CSS]]: Explains how to apply visual properties to elements using CSS.
 == Basic Wiki Markup ==
@@ Line 422: / Line 423: @@
          |}
      </div>
 </div>
 {{clear}}

Ayjayaredii: Updated with basic Syntax guides

2025-07-12T21:47:48Z

Updated with basic Syntax guides

@@ Line 11: / Line 11: @@
 This guide is divided into the following sections:
 * [[#Editing Syntax|Editing Syntax]]: Covers both standard HTML elements and MediaWiki-specific tags/functions for content structure and processing.
 * [[#Styling with CSS|Styling with CSS]]: Explains how to apply visual properties to elements using CSS.
 ----
 == Editing Syntax ==

Ayjayaredii: Updated with CSS tables

2025-07-12T17:03:28Z

Updated with CSS tables

Show changes

Ayjayaredii: Updated

2025-07-12T16:11:52Z

Updated

← Older revision		Revision as of 07:27, 7 September 2025
Line 394:		Line 394:
	\| Sets the width of an element.		\| Sets the width of an element.
	\| <code><nowiki>style="width: 50%;"</nowiki></code>		\| <code><nowiki>style="width: 50%;"</nowiki></code>
	\| <div style="border: 1px solid gray; width: 50%~~; background-color: #f0f0f0~~;">Half-width Box</div>		\| <div style="border: 1px solid gray; width: 50%; ">Half-width Box</div>
	\|-		\|-
	\| '''`margin`'''		\| '''`margin`'''
	\| Creates space outside an element, between its border and other elements. Used with `auto` to center a block element with a defined width.		\| Creates space outside an element, between its border and other elements. Used with `auto` to center a block element with a defined width.
	\| <code><nowiki>style="margin: 0 auto;"</nowiki></code>		\| <code><nowiki>style="margin: 0 auto;"</nowiki></code>
	\| <div style="border: 1px solid gray; width: 50%; margin: 0 auto~~; background-color: #f0f0f0~~;">Centered Box</div>		\| <div style="border: 1px solid gray; width: 50%; margin: 0 auto; ">Centered Box</div>
	\|-		\|-
	\| '''`float`'''		\| '''`float`'''
	\| Positions an element to the left or right, allowing other content to wrap around it.		\| Positions an element to the left or right, allowing other content to wrap around it.
	\| <code><nowiki>style="float: left;"</nowiki></code>		\| <code><nowiki>style="float: left;"</nowiki></code>
	\| <div style="float: left; border: 1px solid gray; padding: 5px; margin-right: 10px~~; background-color: #f0f0f0~~;">Floated Left</div> This text wraps.		\| <div style="float: left; border: 1px solid gray; padding: 5px; margin-right: 10px; ">Floated Left</div> This text wraps.
	\|-		\|-
	\| '''`clear`'''		\| '''`clear`'''
	\| Forces an element to move below (clear) any preceding floated elements.		\| Forces an element to move below (clear) any preceding floated elements.
	\| <code><nowiki>style="clear: both;"</nowiki></code>		\| <code><nowiki>style="clear: both;"</nowiki></code>
	\| <div style="float: left; border: 1px solid gray; padding: 5px; margin-right: 10px~~; background-color: #f0f0f0~~;">Floated Left</div><div style="clear: both; border: 1px solid gray; padding: 5px; margin-top: 10px~~; background-color: #f0f0f0~~;">Cleared Below</div>		\| <div style="float: left; border: 1px solid gray; padding: 5px; margin-right: 10px; ">Floated Left</div><div style="clear: both; border: 1px solid gray; padding: 5px; margin-top: 10px; ">Cleared Below</div>
	\|-		\|-
	\| '''`display`'''		\| '''`display`'''
	\| Specifies how an element is displayed (e.g., `block`, `inline`, `flex`). `flex` is powerful for complex layouts.		\| Specifies how an element is displayed (e.g., `block`, `inline`, `flex`). `flex` is powerful for complex layouts.
	\| <code><nowiki>style="display: flex;"</nowiki></code>		\| <code><nowiki>style="display: flex;"</nowiki></code>
	\| <div style="border: 1px solid gray; padding: 5px; display: flex; justify-content: space-around~~; background-color: #f0f0f0~~;"><span>Item 1</span><span>Item 2</span></div>		\| <div style="border: 1px solid gray; padding: 5px; display: flex; justify-content: space-around; "><span>Item 1</span><span>Item 2</span></div>
	\|-		\|-
	\| '''`box-sizing`'''		\| '''`box-sizing`'''
	\| Defines how an element's total width and height are calculated (whether padding and border are included in the specified `width`/`height`). `border-box` is often preferred for layout.		\| Defines how an element's total width and height are calculated (whether padding and border are included in the specified `width`/`height`). `border-box` is often preferred for layout.
	\| <code><nowiki>style="box-sizing: border-box;"</nowiki></code>		\| <code><nowiki>style="box-sizing: border-box;"</nowiki></code>
	\| <div style="width: 100px; padding: 20px; border: 5px solid red; ~~background-color: #f0f0f0;~~ box-sizing: border-box;">Box content. (This box is 100px wide, including padding border)</div>		\| <div style="width: 100px; padding: 20px; border: 5px solid red; box-sizing: border-box;">Box content. (This box is 100px wide, including padding border)</div>
	\|}		\|}
	</div>		</div>

← Older revision		Revision as of 10:11, 12 July 2025
Line 99:		Line 99:
	<div style="width: 100%; overflow: hidden;">		<div style="width: 100%; overflow: hidden;">
	<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">		<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
	<h1>''<nowiki><includeonly></nowiki> & <nowiki><noinclude></nowiki>'' - Transclusion</h1>		<h3>''<nowiki><includeonly></nowiki> & <nowiki><noinclude></nowiki>'' - Transclusion</h3>
	<p> '''Purpose:''' Sets the condition on a template page that will either be displayed or not when viewing the template when transclusion to a page itself directly using the <nowiki>{{{template:page}}}</nowiki> function.</p>		<p> '''Purpose:''' Sets the condition on a template page that will either be displayed or not when viewing the template when transclusion to a page itself directly using the <nowiki>{{{template:page}}}</nowiki> function.</p>
	<h2>''<nowiki><includeonly></nowiki>'' Only Include </h2>		<h4>''<nowiki><includeonly></nowiki>'' Only Include </h4>
	<h4>'''Purpose:'''</h4><p> Content wrapped in <nowiki><includeonly></nowiki> tags on a template page will '''only''' be processed and displayed when that template is ''transcluded'' (used) on another page. It will '''not''' be visible when viewing the template page itself directly.</p>		<p>'''Purpose:'''</h4><p> Content wrapped in <nowiki><includeonly></nowiki> tags on a template page will '''only''' be processed and displayed when that template is ''transcluded'' (used) on another page. It will '''not''' be visible when viewing the template page itself directly.</p>
	<h4>'''Syntax:'''</h4> <code><nowiki><includeonly></nowiki>Content for transclusion only<nowiki></includeonly></nowiki></code>		<p>'''Syntax:'''</h4> <code><nowiki><includeonly></nowiki>Content for transclusion only<nowiki></includeonly></nowiki></code>
	<h2>''<nowiki><noinclude></nowiki>'' No Include </h2>		<h4>''<nowiki><noinclude></nowiki>'' No Include </h4>
	<h4>'''Purpose:'''</h4> <p>Content wrapped in <nowiki><noinclude></nowiki> tags on a template page will '''only''' be processed and displayed when viewing the template page itself directly. It will '''not''' be included or displayed when the template is ''transcluded'' onto another page.</p>		<p>'''Purpose:'''</h4> <p>Content wrapped in <nowiki><noinclude></nowiki> tags on a template page will '''only''' be processed and displayed when viewing the template page itself directly. It will '''not''' be included or displayed when the template is ''transcluded'' onto another page.</p>
	<h4>'''Syntax:'''</h4> <code><nowiki><noinclude></nowiki>Documentation and categories for the template.<nowiki></noinclude></nowiki></code>		<p>'''Syntax:'''</h4> <code><nowiki><noinclude></nowiki>Documentation and categories for the template.<nowiki></noinclude></nowiki></code>
	</div>		</div>
	</div>		</div>
Line 115:		Line 115:
	<div style="width: 100%; overflow: hidden;">		<div style="width: 100%; overflow: hidden;">
	<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">		<div style="border: 2px solid black; padding: 10px; width: auto; border-radius:15px; text-align: center; font-size: 1em; margin: 0 auto; box-sizing: border-box;">
	<h2>Common Text & Formatting Tags</h2>		<h3>Common Text & Formatting Tags</h3>
	<p>These HTML tags are used for basic text formatting and structural elements. While MediaWiki has its own simplified markup for bold, italic, and horizontal rules, these HTML tags offer alternatives and are useful when you need to embed styling directly within more complex HTML structures.</p>		<p>These HTML tags are used for basic text formatting and structural elements. While MediaWiki has its own simplified markup for bold, italic, and horizontal rules, these HTML tags offer alternatives and are useful when you need to embed styling directly within more complex HTML structures.</p>