Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

User:Evon R'al/Wiki coding notes: Difference between revisions

From EVE University Wiki
m Add heading for the notes section.
Add flex box code.
 
(34 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Tocright}}
{{Tocright}}
== Notes ==
== Notes ==
=== Signatures ===
Usage: --<Signature>
{| class="wikitable"
|-
!Description!!Markup!!Result
|-
| Signature plus timestamp
| <nowiki>~~~~</nowiki>
| [[User:Evon R&#39;al|Evon R&#39;al]] ([[User talk:Evon R&#39;al|talk]]) 16:54, 7 December 2021 (UTC)
|-
| Signature alone
| <nowiki>~~~</nowiki>
| [[User:Evon R&#39;al|Evon R&#39;al]] ([[User talk:Evon R&#39;al|talk]])
|-
| Timestamp alone
| <nowiki>~~~~~</nowiki>
| 16:54, 7 December 2021 (UTC)
|}
Futher reading:
* [[wikipedia:Help:Signatures]]
* [[mediawikiwiki:Help:Signatures]]
=== Skill templates dependency tree ===
* {{T|GetSkillLink}} [[Image:Tick.png|link=]]
** {{T|Skill}} [[Image:Tick.png|link=]]
*** {{T|GetSkillAlpha}} [[Image:Tick.png|link=]]
*** {{T|GetSkillMult}} [[Image:Tick.png|link=]]
*** {{T|GetSkillPrice}} [[Image:Tick.png|link=]]
== Citizen skin ==
* [[MediaWiki:Citizen-footer-desc]]
* [[MediaWiki:Citizen-footer-tagline]]
Design-tokens notes:
<div style="display : flex; flex-wrap: wrap; gap: 1.5em;">
<div style="background-color: var(--background-color-warning-subtle);">
--background-color-warning-subtle
Mainly to emphasize table headers
</div>
<div style="background-color: var(--background-color-base); max-width: 15em;">
--background-color-base
Use to return to base color when parent element has another color.
</div>
<div style="background-color: var(--background-color-neutral);">
--background-color-neutral
</div>
<div style="background-color: var(--background-color-destructive-subtle);">
--background-color-destructive-subtle
</div>
<div style="background-color: var(--background-color-error);">
--background-color-error
</div>
</div>
<div style="display : flex; flex-wrap: wrap; gap: 1.5em;">
<div style="color: var(--color-error);">
--color-error
</div>
<div style="color: var(--color-warning);">
--color-warning
</div>
<div style="color: var(--color-content-added);">
--color-content-added
</div>
<div style="background-color: var(--background-color-neutral);color: var(--color-inverted-fixed);">
--color-inverted-fixed
</div>
<div style="color: var(--color-base);">
--color-base
</div>
</div>
<div style="display : flex; flex-wrap: wrap; gap: 1.5em;">
<div style="font-size: var(--font-size-small);">
--font-size-small
</div>
<div style="font-size: var(--font-size-medium);">
--font-size-medium
</div>
<div style="color: var(--font-size-large);">
--font-size-large
</div>
</div>
[[User:Bates Larsson|Bates]]' message about design-tokens [[https://discord.com/channels/301496390066896896/706641916460007434/1371844304263315558 Discord]]
Elmara Olth-Semah link to codex [https://discord.com/channels/301496390066896896/706641916460007434/1372274609335832687 Discord] (design-tokens). Direct [https://doc.wikimedia.org/codex/latest/design-tokens/color.html codex]
== Flex box ==
<pre>
<div style="display : flex; flex-wrap: wrap; gap: 1.5em;">
<div> </div>
<div> </div>
</div>
</pre>
== Wiki mark-up ==
=== Linking ===
See also: [[mediawikiwiki:Help:Links]]
Links are case sensitive, with the exception of the first character.
==== Space or underscore ====
The wiki software automatically changes spaces to underscores (_), in the resulting html link, in internal and inter wiki links. So <nowiki>[[Relic_and_data_sites]]</nowiki> ([[Relic_and_data_sites]]) and <nowiki>[[Relic and data sites]]</nowiki> ([[Relic and data sites]]) are equivalent. Eliminating the need to change the underscore version into a piped link for nice readability, providing a "cleaner" source. The use of spaces is preferred.
==== Link end trick ====
{{Note box|'''Link end "trick"''' (Word-ending links)
Putting text directly connecting to the closing ]] results in that text being added to the displayed text.<br>
<code><nowiki>[[Venture]]s</nowiki></code> results in [[Venture]]s while the link still goes to Venture.<br>
<code><nowiki>[[Venture]]abunchofletters</nowiki></code> results in [[Venture]]abunchofletters while the link still goes to Venture.
For more details see: [[mediawikiwiki:Help:Links]]
|italics= no}}
==== Piped link ====
A piped link is an internal or [[#interwiki link|interwiki]] link where the link target and link label are both specified. Piped links should be used sparingly, if a wiki redirect is available it should be used instead.
==== Internal link ====
Internal (and intrawiki) links check the existence of the target page. If the page doesn't exist, is misspelled or the case is incorrect the link turns [[red link|red]].
'''Syntax:''' <code><nowiki>[[<namespace>:<page name>#<anchor>|<label>]]</nowiki></code>
:; Namespace : The namespace of the page, separated from the Page name by a colon(:). Default is the main namespace. Options: User, Template, etc. Namespace is NOT case sensitive.
:; Page name : The name of the page<ref name="main">In the main namespace called article</ref>. Page name is case sensitive with the exception of the first letter.
:; Anchor : To an ID somewhere inside a page. Anchor must be preceded by a #. Headings have an automatic ID identical to the header name. ID can be added manually by using {{T|Anchor}} or adding an <code>ID=</code> manually. ID's must be unique. Anchor's are case sensitive.
:; Label : The text that appears visible. Only needed when different from the linking(target) part. the label is preceded by the pipe(|) symbol
'''Usage:'''
:; Page name only : Using the page name only links to a page<ref name="main" /> in the main namespace with display identical to page name:<br>
<code><nowiki>[[Venture]]</nowiki></code> results in [[Venture]]<br>
As the first letter is not case sensitive <code><nowiki>[[venture]]</nowiki></code> also results in a valid link [[venture]]
:; Namespace and Page name : To go to a page outside the main namespace the namespace needs to be added to the link
<code><nowiki>[[User:Evon R'al]]</nowiki></code> gives [[User:Evon R'al]]<br>
<code><nowiki>[[UniWiki:Manual of Style]]</nowiki></code> gives [[UniWiki:Manual of Style]]
:; Page name and Anchor : Using a Page name and an Anchor gets to a specific location within a page.
:: Using an Anchor only, leads to a specific location within the page.
<code><nowiki>[[combat site#Expeditions]]</nowiki></code> gives [[combat site#Expeditions]]<br>
The existence of the page is still checked, but the existence of the anchor is not.<br>
Note: If a non existing anchor is used the link goes to the top of the page.<br>
<code><nowiki>[[combat site#no exist]]</nowiki></code> gives [[combat site#no exist]], leading to the top of the combat site page
<code><nowiki>[[#Signatures]]</nowiki></code> gives [[#Signatures]] leading to the Signatures heading on this page.
:; Page name and label
<code><nowiki>[[Venture|Venture]]</nowiki></code> results in [[Venture|Venture]]. More then double the amount of typing for the same result as when using a page name only link and more cluttered reading in the source.<br>
But when doing this: <code>Example of a <nowiki>[[Venture|mining]]</nowiki> frigate</code>, we get "Example of a [[Venture|mining]] frigate" leading to the Venture article.
The use of label is particularly useful when namespaces or anchors are used. To increase readability.<br>
<code><nowiki>[[User:Evon R'al|Evon R'al]]</nowiki>'s user page</code> gives [[User:Evon R'al|Evon R'al]]'s user page<br>
<code>A link to <nowiki>[[combat site#Expeditions|Expeditions]]</nowiki></code> gives "A link to [[combat site#Expeditions|Expeditions]]".
{{Note|While not particularly useful the link end trick will work.}}
{{Note box|'''Pipe trick''':
The pipe trick uses the pipe character ("{{!}}") to save typing the label of a piped link for several kinds of wiki links. This can avoid potentially making an error while typing the label.<br>
The basic rule when the pipe trick is used is that an (initial) namespace prefix, a final part beginning with a comma, or a final parenthesis is suppressed in the rendering of the link.<br>
The expansion of the text happens when saving. The expansion is also visible when previewing the edit making it possible to check if it gives the desired result.
Example's:
Typing <code><nowiki>[[User:Evon R'al|]]</nowiki></code> will produce <nowiki>[[User:Evon R'al|Evon R'al]]</nowiki>.<br>
<code><nowiki>[[Guardian's Gala (2020)|]]</nowiki></code> gives <nowiki>[[Guardian's Gala (2020)|Guardian's Gala]]</nowiki>
For more details see [[wikipedia:Help:Pipe trick]] and [[metawikipedia:Help:Piped link]]
|italics= no}}
===== Special cases =====
; File namespace
<code><nowiki>[[File:Helpicon.png]]</nowiki></code> gives [[File:Helpicon.png]] the file embedded at the location of the link.<br>
To get a link to the file page the namespace needs to be preceded by a colon (:)<br>
<code><nowiki>[[:File:Helpicon.png]]</nowiki></code> gives [[:File:Helpicon.png]] a link to the file page.<br>
<code><nowiki>[[:File:Evon R'al.jpg]]</nowiki></code> gives [[:File:Evon R'al.jpg]]<br>
A label can be used like <code><nowiki>[[:File:Evon R'al.jpg|Evon R'al]]</nowiki></code> to change the presentation: The file page of [[:File:Evon R'al.jpg|Evon R'al]]'s portrait.<br>
For parameters to influence size and/or placement of a file see [[Mediawikiwiki:Help:Images]]
; Media namespace : Is a virtual namespace which gives a direct link to a file.
<code><nowiki>[[Media:Evon R'al.jpg]]</nowiki></code> gives [[Media:Evon R'al.jpg]] (follow the link to see the difference)<br>
A label can be used: <code><nowiki>[[Media:Evon R'al.jpg|portrait]]</nowiki></code> to get Evon R'al's [[Media:Evon R'al.jpg|portrait]].
; Category namespace
<code><nowiki>[[Category:Pilots]]</nowiki></code> gives a link to the Category category and the Pilots category in a separate box at the bottom of the page.<br>
To get a link to the Pilots category page in the text use <code><nowiki>[[:Category:Pilots]]</nowiki></code> which gives [[:Category:Pilots]]
* [https://wiki.eveuniversity.org/api.php?action=query&meta=siteinfo&siprop=namespaces&format=xml List of namespaces (In raw XML)]
==== Interwiki link ====
Interwiki links are internal-style links to other websites using an "interwiki prefix". For a list of valid interwiki prefixes see [[Special:interwiki]].
Interwiki links are made by using the interwiki prefix as the first parameter in an internal link.
A interwiki link to MediaWiki's help page about links looks like <code><nowiki>[[Mediawikiwiki:Help:Links]]</nowiki></code> which gives [[Mediawikiwiki:Help:Links]]
The [[#link end trick|link end trick]] and the pipe trick, described at internal links, work for interwiki links just as-well. And use of a label to change the presentation of a link also works.
==== External link ====
External links are rendered different from internal and interwiki links. On the UNI Wiki the links have a marker at the end. The exact marker depends on if the link is HTTP of HTTPS.
The most basic form for an external link is to just put in the raw link, like <code><nowiki>https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al</nowiki></code> which produces https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al. While it works as a link it does not look particularly nice.
More control over the link can be reached by using single square braces.<br>
'''Syntax:''' <code>[URL label]</code>
; URL : the full URL of the link
; label : the text visible in the page (optional)
The wiki parser uses the first space it encounters as the divider between the URL and the label.
* Without using a label <code><nowiki>[https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al]</nowiki></code> produces [https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al]. The wiki parser automatically adds a number as the label.
* Using a label <code><nowiki>[https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al Evon R'al's user page]</nowiki></code> produces [https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al Evon R'al's user page].
* Finally the external link rendering can be suppressed by using the CSS class {{Co|wheat|plainlinks}} making the link look like an internal one. <code><nowiki><span class="plainlinks">[https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al Evon R'al's user page]</span></nowiki></code> produces <span class="plainlinks">[https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al Evon R'al's user page]</span>
=== Formula presentation ===
UniWiki uses the extension <s>[[:Mediawikiwiki:Extension:SimpleMathJax|SimpleMathJax]]</s> [[:Mediawikiwiki:Extension:Math|Math]]  for the presentation of formulas. The formula to be presented needs to be encased with the tags <nowiki><math></nowiki> and <nowiki></math></nowiki>. <math>\tex</math> or <math>\LaTeX</math> markup can be used. Errors will be marked as&nbsp;<math>\sqrt</math>
To display a formula the following markup can be used:
{| class="wikitable" style="text-align: center;"
|-
! Source !! MathJax presentation || Notes
|-
| X^n || <math> X^n </math> || exponentiation ?<br> superscript
|-
| a \times b || <math> a \times b </math> || multiplication
|-
| a / b || <math>a / b</math> || division
|-
| \frac {a} {b} ||<math> \frac {a} {b} </math> || division/fraction
|-
| \displaystyle \frac{a}{b} || <math> \displaystyle \frac {a} {b} </math> || division/fraction
|-
| \sqrt {X} || <math>\displaystyle \sqrt {X} </math> || square root
|-
| \sqrt [n] {X} || <math> \sqrt [n] {X} </math> || root
|-
| a + b || <math> a + b </math> || addition
|-
| a - b || <math> a - b </math> || abstraction
|-
| V_{max} ||<math> V_{max} </math> || subscript
|-
| \text{text} ||<math> \text{text} </math> || roman text
|-
| text || <math> text </math> || italic text
|-
| \color{blue} b ||<math> \color{blue} b </math> || color
|-
| \color{blue} \text{Blue} || <math> \color{blue} \text{Blue} </math> ||
|-
| { \color{blue} b } X || <math> { \color{blue} b } X </math> || partial color
|-
| \sin || <math> \sin </math> ||
|-
| \cos || <math> \cos </math> ||
|-
| \tan || <math> \tan </math> ||
|-
| \ln || <math> \ln </math> || natural logarithm
|-
| \log || <math> \log </math> || logarithm
|-
| \infty || <math> \infty </math> || Infinity
|-
| \pi || <math> \pi </math> || pi
|-
| \displaystyle \left( \frac {a} {b} \right) || <math> \displaystyle \left( \frac {a} {b} \right) </math> ||
|-
| \left( \frac {a} {b} \right) || <math> \left( \frac {a} {b} \right) </math> || Works with (, [, < and { (needs to be escaped \{ )
|-
| ( \frac {a} {b} ) || <math> ( \frac {a} {b} ) </math> || See ( hight difference with previous
|-
|  a \n b \\ c  || <math> a \\ b \\ c </math> || newline within a <nowiki><math></nowiki> block
|-
| &#92; begin{align}<br>
a & = b \times c \\<br>
b \times c & = a<br>
&#92;end{align}
| <math> \begin{align}
a & = b \times c \\
b \times c & = a
\end{align} </math> || Align on &
|}
See also:
* [[UniWiki:Manual of Style/Mathematics]]
* [https://docs.mathjax.org/en/latest/index.html MathJax]
* [https://docs.mathjax.org/en/latest/input/tex/index.html MathJax Tex and LaTeX support]
* [[:Wikipedia:Help:Displaying a formula]]
* [[:Wikipedia:Wikipedia:Manual of Style/Mathematics]]
* [[:Wikipedia:MathML]]
* [[UniWiki:Editing commands visual guide#Math]]
== CSS ==
See also:
* [https://www.w3schools.com/css W3 schools tutorial]
* [https://www.w3schools.com/cssref W3 schools reference]
* [https://developer.mozilla.org/en-US/docs/Web/CSS mdn web docs reference]
* [[:Wikipedia:Wikipedia:TemplateStyles|Wikipedia projects page TemplateStyles]]
=== CSS location ===
; External style sheet : A separate file with CSS definitions. Loaded into the page with a HTML link in the head section of the page.
; Internal style sheet : On the page in the style element of the head section
; Inline CSS : By using the style attribute of an HTML element.
For external and Internal style sheets the order in which they are called in a page is relevant, the last one "wins".
=== Cascading order ===
What style will be used when there is more than one style specified for an HTML element?
* Browser default
** Internal and external style sheet. In the order they are entered on the page.
*** Inline CSS
When an individual CSS property is used more than once the last occurrence "wins".
== HTML and CSS entities ==
{|
|-
!  !! HTML || CSS !! Description
|-
| &#9658; || &amp;#9658; || \25BA || black right-pointing pointer
|-
| &#9668; || &amp;#9668; || \25C4 || black left-pointing pointer
|-
| &#9675; || &amp;#9675; || \25CB || white circle
|-
| &#9678; || &amp;#9678; || \25CE || bullseye
|-
| &#9679; || &amp;#9679; || \25CF || black circle
|}
See also:
* [https://www.w3schools.com/html/html_entities.asp W3 schools tutorial]
* [https://www.htmlsymbols.xyz/ HTML Symbols - Unicode symbols, entities and codes]


== Code snippets ==
== Code snippets ==
=== Small stuf ===
=== Small stuff ===
No more mineable asteroids in missons:
No more mineable asteroids in missons:
{{Code|<nowiki>Various mission site locations have had mineable asteroids replaced with cosmetic asteroids. (30/03/2020)
{{Code|<nowiki>Various mission site locations have had mineable asteroids replaced with cosmetic asteroids. (30/03/2020)
Line 14: Line 356:
|<nowiki>{{hatnote|This article details the Level ?, <Faction> version of this mission. For other variants, see [[<Mission>|<Mission> (disambiguation)]].}}
|<nowiki>{{hatnote|This article details the Level ?, <Faction> version of this mission. For other variants, see [[<Mission>|<Mission> (disambiguation)]].}}
</nowiki>}}
</nowiki>}}
==== Text color in EVE chat ====
Red {{Co|#ff0000|ff0000}}
Green 1 {{Co|#a3fc80|a3fc80}}<br>
Green 2 {{Co|#48ff00|48ff00}}
Blue {{Co|#80d8fc|80d8fc}}


=== MessageBox with logo ===
=== MessageBox with logo ===
Line 83: Line 433:
|-
|-
|Minmatar||Hydrogen
|Minmatar||Hydrogen
|}
Wiki markup table with class="sortable" and special markings
<nowiki>class= data-sort-type="number"?? | data-sort-value="24" | unsortable | sortbottom </nowiki>
{| class="wikitable sortable"
|-
! Text !! Number 1 !! Number 2 !! Number 3 !! class="unsortable" | Number 4
|-
| Een || 1 || +1 || data-sort-value="3" | 1 || 1
|-
| Twee || 2 || +2 || data-sort-value="1" | 2 || 2
|-
| Tien || 10 || +10 || data-sort-value="2" | 10 || 10
|-
| Min tien || -10 ||-10 || data-sort-value="5" | -10 || -10
|- class="sortbottom"
| Vijf || 5 || 5 || 5 || 5
|}
|}


Line 110: Line 478:
|Minmatar||Hydrogen
|Minmatar||Hydrogen
|}
|}
=== Collapsible div ===
Found in {{T|SkillQueue}}<br>
Key: Classes mw-collapsible, mw-collapased and mw-collapsible-content
<pre>
<nowiki>
<div class="mw-collapsible" style="border: 2px solid white; padding: 0.5em;">
Content of outer div.
<div class="mw-collapsible-content">
Content of inner div.
</div>
</div>
</nowiki>
</pre>
Results in:
<div class="mw-collapsible" style="border: 2px solid white; padding: 0.5em;">
Content of outer div.
<div class="mw-collapsible-content">
Content of inner div.
</div>
</div>


== References ==
== References ==