Wiki Code Cookbook: Difference between revisions

(84 intermediate revisions by 2 users not shown)

Line 1:

This cookbook is a repository of tips, tricks, and standards for the NETwiki. The intention is to make article writers better at formatting, and to create standards in the NETwiki that users will recognize to help guide them through the content and make it east to read.

=== See also ===

This article only goes over some more obscure/advanced stuff or things we want to call special attention to. There are '''''many''''' MediaWiki articles out there that will help with the basics of formatting in "source mode". A few favorites are:

* [[mediawikiwiki:Manual:FAQ#Basic_usage|Basics]] on page creation and editing in MediaWiki (MediaWiki powers NETwiki).

* [[mediawikiwiki:Cheatsheet|MediaWiki Cheatsheet]]: very basic text formats in markup.

* [[mediawikiwiki:Help:Formatting|Help Formatting]]: covers a lot of text basics and more.

* [https://www.vertex42.com/ExcelTips/unicode-symbols.html Unicode Library]: in case you need unusual symbols in your text.

* [https://www.scribbr.com/citation/generator/apa/ APA citation generator]: PBEM doesn't really care what format you publish citations in, but this is a quick and helpful APA citation generator.

* [[wikipedia:Web_colors|Web colors]]: The most exhaustive article I can find on web colors, including helpful color tables.

* [[wikibooks:Editing_Wikitext/Tables|Editing Wikitext/Tables]]: Great article on formatting tables in markup. You can find a similar article on tables [[wikipedia:Help:Table|HERE]].

* [[wikipedia:Template:Vertical_header/doc|Vertical headers]]: NETwiki is capable of publishing vertical headers in tables; the article will show you how.

* [https://www.portland.gov/officeofequity/equity-resources/inclusive-writing-guide City of Portland Inclusive Writing Guide]: The Inclusive Writing Guide is designed to help communicate in a way that serves the entire community. The importance of language is critical when navigating topics of race, ethnicity, disability, gender, gender identity, and sexual orientation.

__TOC__

== Basic Font Stuff ==

It's much easier to change a font's style, such as into '''bold''' or ''italic'', using the [[wikipedia:WYSIWYG|WYSIWYG]] interface. But we do have a few NETwiki standards for these font styles to help keep our wiki readable.

'''Bold:''' Used to bring emphasis to text, but be careful not to abuse it. Most effective when used sparingly.

''Italic:'' Not really used in the NETwiki at all, and should be avoided because it is difficult to read. An exception should be made for narrow uses like scientific names, page referrals, or in some source citations. Otherwise, its use will usually be rejected by editors.

'''''Bold italic:''''' Bold italic is an acceptable use of italic style in NETwiki for bringing emphasis.

Underline: Should never be used, as it makes text difficult for some people to read. Narrow and specialized uses, such as with a source citation, are allowed in NETwiki.

<s>Strikethrough</s>: Often has a very narrow use case. It's not banned from NETwiki, but an article needs to have a good reason to use it.

ALL CAPS: This is usually used for emphasis, but only used in NETwiki when bold or bold italic won't work for some reason. It's also very annoying to read, so the writer needs a good reason for using it.

<big>Big</big> and Small styles: No hard rules in NETwiki governing their use, but they shouldn't be used to emphasize text. These are more useful styles for design reasons (for example, using Big text at the top of a table column).

<pre>

'''Bold:''' Used sparingly to bring emphasis to text.

''Italic:'' Not really used in the NETwiki at all, and should be avoided because it is difficult to read. An exception should be made for narrow uses like scientific names or in some source citations. Otherwise, its use will usually be rejected by editors.

'''''Bold italic:''''' Bold italic is an acceptable use of italic style in NETwiki for bringing emphasis.

Underline: Should never be used, as it makes text difficult for some people to read. Narrow and specialized uses, such as with a source citation, are allowed in NETwiki.

<s>Strikethrough</s>: Often has a very narrow use case. It's not banned from NETwiki, but an article needs to have a good reason to use it.

ALL CAPS: This is usually used for emphasis, but only used in NETwiki when bold or bold italic won't work for some reason. It's also very annoying to read, so the writer needs a good reason for using it.

<big>Big</big> and Small styles: No hard rules in NETwiki governing their use, but they shouldn't be used to emphasize text. These are more useful styles for design reasons (for example, using Big text at the top of a table column).

</pre>

==Emphasis in Type==

Sometimes you need your words to pop in order to place emphasis on them. For the most part, these tools should be used sparingly. ~~After~~ all, if everything is emphasized, nothing is~~. And your article looks like crap~~.

Sometimes you need your words to pop in order to place emphasis on them. For the most part, '''these tools should be used sparingly'''. For one thing, it might make a page more difficult to read for persons with sight impairments. And after all, if everything is emphasized, nothing is.

===Essential/Non-essential headers===

If you are writing a particularly long article and/or an article required for Basic NET training, you may want to indicate some sections as "essential" reading and other sections as "supplemental". This is not a trick with text so much as it's a very small table that sits at the top of a page section. For an example in context, see: [[Basic NET Training Standard Syllabus#Basic NET Class Goals|Basic NET Class Goals]].

NETwiki standard:

'''NETwiki standard:'''

* "Essential" should be a single line table in "firebrick" red, spanning 25% of the page, white bold text.

* "Supplemental" should be a single line table in "gold", spanning 25% of the page, white bold text.

{|class="wikitable" style="width: 25%; "

{| class="wikitable" style="width: 25%; "

|+

| style="background: firebrick; color: white" |'''Section Importance: Essential'''

Line 23:

Line 73:

</pre>

{| class="wikitable" style="width: 25%;

{| class="wikitable" style="width: 25%; "

|+

|style="background: gold; color: black"|'''Section Importance: Supplemental'''

| style="background: gold; color: black" |'''Section Importance: Supplemental'''

|}

Line 36:

Line 86:

=== Simple yellow highlight on text ===

Wiki syntax comes with a simple and easy way to place a yellow highlight on selected text. Simply brace it inside ~~the code you see below~~.

Wiki syntax comes with a simple and easy way to place a yellow highlight on selected text. Simply brace it inside <nowiki> and </nowiki>.

Example:

~~'''~~Example:~~'''~~ The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<pre>

~~'''Example:'''~~ The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

</pre>

Line 50:

Line 100:

<pre>

'''All PBEM employees must stop crying before returning to work.'''

</pre>~~If I~~ want ~~to make~~ that ~~text string less~~ of ~~an eyesore~~, ~~I might also take care~~ to ~~color highlight~~ a ~~space before and after~~, like ~~this:~~

</pre>

For design reasons, you may want a space before or after the sentence that is the same color as the highlight so it doesn't look quite so cut off. That's an extra layer of code. The syntax will just cut off a blank space even if you have it inside the brackets. So instead, you have to have a symbol, like an asterisk, bookending your sentence that is the color of the background.

''' All PBEM employees must stop crying before returning to work. '''

*'''All PBEM employees must stop crying before returning to work.'''*

In that example, I also made the text white. But naturally, you can change the color of the text~~, also,~~ to create all manner of page design monstrosity.

<pre>

*'''All PBEM employees must stop crying before returning to work.'''*

</pre>

In that example, I also made the text white. But naturally, you can change the color of the text and background to create all manner of page design monstrosity.

== Table Adjustments ==

=== Setting table width ===

If you use a table but do not set a width, it can take up all the horizontal space available to it. That's not ''bad'' exactly, but it might look bad and/or defeat the purpose of having a table in the first place. You can control a table's width by assigning it a percentage of the screen's horizontal space, or by pixels.

==== Setting table width by percentage ====

Let's say you do not want a table to extend beyond 25% of the screen's width. You would mark that up as:

<pre>

{| class="wikitable" style="width: 25%;"

|+

!Column 1

!Column 2

!Column 3

!Column 4

|-

|Info 1

|Info 2

|Info 3

|Info 4 But the content here is longer.

|}

</pre>

This gets you:

{| class="wikitable" style="width: 25%;"

|+

!Column 1

!Column 2

!Column 3

!Column 4

|-

|Info 1

|Info 2

|Info 3

|Info 4 But the content here is longer.

|}

Note that the width of the individual columns will adjust spacing to fill 25% of the horizontal space. In this example, if all the content was the same size, all the columns would space evenly.

==== Setting table width by pixel ====

Same as the above, except you notate the percentage as the number of pixels instead. In this case, we'll set to 500 pixels.

<pre>

{| class="wikitable" style="width: 500;"

|+

!Column 1

!Column 2

!Column 3

!Column 4

|-

|Info 1

|Info 2

|Info 3

|Info 4 But the content here is longer.

|}

</pre>

This gets you:

{| class="wikitable" style="width: 500;"

|+

!Column 1

!Column 2

!Column 3

!Column 4

|-

|Info 1

|Info 2

|Info 3

|Info 4 But the content here is longer.

|}

== Media Embeds ==

One of the things that makes this Wiki so effective for PBEM volunteers is that article writers can embed video, images, and file for downloads.

=== Embed a video ===

In NETwiki, you can embed a video only from YouTube or Vimeo. Vimeo is the preferred NETwiki video source, since Vimeo doesn't make viewers watch ads. As most videos are not available on Vimeo, YouTube will do. The embed code for a video looks like this:

[[File:Video Embed Code.png]]

{{#ev:youtube|1S2nuZsBz8g|430|right|'''''Video: Exegesis addressing Kierkegaard's views on the meaning of life'''''|frame}}

Let's go over each part of this phrase in Wiki syntax; each part is '''''required''''' for the code to post successfully and each part must be segregated by the "|" symbol. The numbers in magenta correspond to the list below:

# '''<nowiki>{{</nowiki>''' Opening braces, and these will be the same any time someone is embedding a video.

# '''#ev:''' these three characters set up the next part to name which video service will be used in the embed, either YouTube or Vimeo.

# '''youtube''' this part should be completed according to which video service is going into the embed. In this example, it is YouTube, but it could be Vimeo if the embed is coming from Vimeo.

# '''1S2nuZsBz8g''' this is the most important part of the embed. It is the unique identifier for the video you plan to use.

# '''430''' this indicates the width of the video.

# '''Right''' this indicates where on the page the video will be aligned on the page. It can be right, left, or centered.

# This part of the phrase is the caption of the video that anyone viewing the page will see. It will not change a video's header title from Vimeo or YouTube.

# '''Frame''' I don't know what this actually means, just don't leave it out.

# '''<nowiki>}}</nowiki>''' closing braces.

<pre>

{{#ev:youtube|1S2nuZsBz8g|430|right|'''''Video: Exegesis addressing Kierkegaard's views on the meaning of life'''''|frame}}

</pre>

You can see the result to the right side of this page.

'''NETwiki standard:''' We recommend (but do not require) right-aligned videos. Left aligned videos interfere with wrapping text and often don't look good. A video caption should always appear in bold text and begin as "'''Video: (title)'''". Width should consistently appear as 430 pixels. Obviously, no video should be posted that includes adult content (e.g. nothing the video would be slapped with [[wikipedia:Motion_Picture_Association_film_rating_system#Rating_components|an "R" rating]] for).

=== Google Calendar ===

# On the Google Calendar website, click on the <code>...</code> icon next to the calendar you want to share and click <code>Settings</code>

# In the "Integrate calendar" section, copy the text labeled "Public URL to this calendar". Example: <code><nowiki>https://calendar.google.com/calendar/embed?src=en.usa%23holiday%40group.v.calendar.google.com&ctz=America%2FLos_Angeles</nowiki></code>

# Remove the text up to and including the question mark. Example: <code>src=en.usa%23holiday%40group.v.calendar.google.com&ctz=America%2FLos_Angeles</code>

# Add <code>&mode=AGENDA</code> to the end.

# On the team page, add the wikitext <code>Special:IframePage/GoogleCalendar|path=</code> followed by your calendar code, surrounded by double curly-braces <code><nowiki>{{</nowiki></code> <code><nowiki>}}</nowiki></code>

Example: <code><nowiki>{{Special:IframePage/GoogleCalendar|path=src=en.usa%23holiday%40group.v.calendar.google.com&ctz=America%2FLos_Angeles&mode=AGENDA}}</nowiki></code>

== Miscellaneous Tricks ==

=== Referring to a main article ===

NETwiki follows the standard found in Wikipedia: offset in italic with a link to the main article. For example:

:''Main article: [[Background Checks|Criminal Background Checks]]''

The markup to do something like that looks like this (note particularly the colon at the start of the line, which adds an indent):

<pre>

:''Main article: [[Background Checks|Criminal Background Checks]]''

</pre>

=== Reference Sections ===

Any page that includes references in the form of citations should have a reference section (specifically, a "Notes and References" section). To set that up, you need to do two things:set up a "Notes and References" section at the very bottom of a page, and then create reference citations by using the appropriate tag at the end of a sentence. Since doing these things shapes how a page is formatted, here is a sub-page that will act as a demonstration page for references:

:'''↳''' ''[[Wiki Code Cookbook/References Demonstration Page|References Demonstration Page]]''

For a quick reference here on the markup you need:

<pre>

== Notes and References ==

</pre>

That much is fairly simple. But say you want to cite the same footnote more than once. To do that, you have to assign a name to the reference. Click on the demonstration page above to see the code for it.

=== Horizontal lines ===

If you want to create a horizontal line to set off sections of text for any reason, the code is simple.

<pre>

<hr>

</pre>

...gets you the following horizontal line stretched across the page:

<hr>

=== Color boxes ===

A color box is a widget that is, well, a colored box. Like so: {{color box|Green}}

Sometimes color boxes can be used to note specific sections and different meanings. There are a lot of tricks to creating color boxes; best is to visit: https://en.wikipedia.org/wiki/Template:Color_box

=== VSF Position Description Template ===

<nowiki>The Wiki includes a template for VSF position descriptions which can be activated by typing "{{VSF Position"</nowiki>

=== Link Templates ===

For example:

{| class="wikitable"

!Template

!Displays as

|-

|<nowiki>{{EmailLink|net@portlandoregon.gov}}</nowiki>

|{{EmailLink|addr=net@portlandoregon.gov}}

|-

|<nowiki>{{EmailLink|addr=net@portlandoregon.gov|name=net@portlandoregon.gov}}</nowiki>

|{{EmailLink|addr=net@portlandoregon.gov|name=net@portlandoregon.gov}}

|-

|<nowiki>{{FacebookLink|groups/portlandprepares|name=PortlandPrepares}}</nowiki>

|{{FacebookLink|groups/portlandprepares|name=PortlandPrepares}}

|}

Click on each template in the list below to understand how to use it:

* [[Template:EmailLink]]

* [[Template:GoogleDocLink]]

* [[Template:FacebookLink]]

* [[Template:GroupsLink]]

* [[Template:InstagramLink]]

* [[Template:SignalLink]]

== NET Team Pages ==

=== What Goes On A Team Page? ===

Your team page could be the single link your team hands out at block parties or when new neighbors move in.

Please consider it a "landing page" that describes aspects of emergency preparedness that are '''unique to your neighborhood'''. For example,

* For potential volunteers:

** provide ways to engage with the local team (e.g. team point of contact, public discussion forums)

** describe unique considerations (e.g. "we work closely with this school," "we meet at this location", "90% of Oregon's fuel supply passes through our neighborhood")

** team accomplishments (e.g. "we've deployed at warming shelters", "we provided first aid at this parade")

* For existing team members:

** recognize team positions (e.g. Team Leader, Amateur Radio Operators)

** contain important links (e.g. to a shared team folder, or to the Operations Plan)

Some content belongs elsewhere:

* News: this content often goes stale, and is better shared in team discussion forums.

* Orientation to the NET program: this is best centralized at PBEM, rather than re-written by individual teams.

* Tips for personal preparedness: this is best centralized at PublicAlerts.org, rather than re-written by individual teams.

=== Can other NET members edit my team's page? ===

Yes, and these contributions should be welcomed.

# Watch your team's page so you receive notifications when it's changed.

# If someone else's change needs improvement, improve it.

# If there is a disagreement that can't be resolved, send an email to {{EmailLink|net@portlandoregon.gov|name=net@portlandoregon.gov}} for help.

=== Team Page Editing Checklist ===

# ✅ Review the [[NETwiki Content Creators and Editors]] page.

# <nowiki>✅ Update the names (e.g. Team Leader) and contact information in the {{</nowiki>[[Template:Team|Team]]<nowiki>}} template.</nowiki>

# ✅ Update your team's Earthquake Plan (née Operations Plan) by uploading it to the wiki with the name "Team Earthquake Plan - ''<team name>''.pdf". (''<team name>'' means the name visible at the top of your team's page, e.g. "TaborVilla", not the list of neighborhood names in the team page's URL.)

# <nowiki>✅ Add/update neighborhood populations in the {{</nowiki>[[Template:Neighborhood|Neighborhood]]<nowiki>}} templates. (See </nowiki>[https://www.portland.gov/civic/myneighborhood/neighborhood-profile-maps Neighborhood Demographic Profiles] page.)

# <nowiki>✅ Add/update BEECN and fire station sites in the {{</nowiki>[[Template:Neighborhood|Neighborhood]]<nowiki>}} templates. (See </nowiki>[https://pdx.maps.arcgis.com/apps/webappviewer/index.html?id=d3eaa87bf97148a78a5f358207259d72 BEECNs and Fire Stations] map.)

# <nowiki>✅ Add/update schools in the {{</nowiki>[[Template:Neighborhood|Neighborhood]]<nowiki>}} templates.</nowiki>

# ✅ Use [[EditingTeamPages#Link Templates|#Link Templates]] for pretty little icons.

=== Can I Upload Photos Or Team Documents? ===

For most files, please upload them separately and link to them from your team pages.

Where to host different types of files:

{| class="wikitable"

!file type

!where to host it

|-

|small inline images (e.g. team members in action)

|NET wiki

|-

|small inline neighborhood map

|NET wiki

|-

|Operations plans

|NET wiki

|-

|Photo albums (e.g. team exercises)

|send an email to {{EmailLink|net@portlandoregon.gov|name=net@portlandoregon.gov}} for an upload link for PBEM's Lightroom account, or

use 3rd-party hosting (e.g. Google Photos, Flickr)

|-

|Meeting minutes

|use 3rd-party file hosting (e.g. Google Drive)

|-

|Internal team documents (e.g. spreadsheets, planning documents)

|use 3rd-party file hosting (e.g. Google Drive)

|-

|Outreach materials

|use 3rd-party file hosting (e.g. Google Drive)

|}

Anonymous

Search

Wiki Code Cookbook: Difference between revisions

Namespaces

More

Page actions

Navigation

Navigation

Wiki tools

Wiki tools

@@ Line 1: / Line 1: @@
+This cookbook is a repository of tips, tricks, and standards for the NETwiki. The intention is to make article writers better at formatting, and to create standards in the NETwiki that users will recognize to help guide them through the content and make it east to read.
+=== See also ===
+This article only goes over some more obscure/advanced stuff or things we want to call special attention to. There are '''''many''''' MediaWiki articles out there that will help with the basics of formatting in "source mode". A few favorites are:
+* [[mediawikiwiki:Manual:FAQ#Basic_usage|Basics]] on page creation and editing in MediaWiki (MediaWiki powers NETwiki).
+* [[mediawikiwiki:Cheatsheet|MediaWiki Cheatsheet]]: very basic text formats in markup.
+* [[mediawikiwiki:Help:Formatting|Help Formatting]]: covers a lot of text basics and more.
+* [https://www.vertex42.com/ExcelTips/unicode-symbols.html Unicode Library]: in case you need unusual symbols in your text.
+* [https://www.scribbr.com/citation/generator/apa/ APA citation generator]: PBEM doesn't really care what format you publish citations in, but this is a quick and helpful APA citation generator.
+* [[wikipedia:Web_colors|Web colors]]: The most exhaustive article I can find on web colors, including helpful color tables.
+* [[wikibooks:Editing_Wikitext/Tables|Editing Wikitext/Tables]]: Great article on formatting tables in markup. You can find a similar article on tables [[wikipedia:Help:Table|HERE]].
+* [[wikipedia:Template:Vertical_header/doc|Vertical headers]]: NETwiki is capable of publishing vertical headers in tables; the article will show you how.
+* [https://www.portland.gov/officeofequity/equity-resources/inclusive-writing-guide City of Portland Inclusive Writing Guide]: The Inclusive Writing Guide is designed to help communicate in a way that serves the entire community. The importance of language is critical when navigating topics of race, ethnicity, disability, gender, gender identity, and sexual orientation.
+<br>
 __TOC__
+<br>
+== Basic Font Stuff ==
+It's much easier to change a font's style, such as into '''bold''' or ''italic'', using the [[wikipedia:WYSIWYG|WYSIWYG]] interface. But we do have a few NETwiki standards for these font styles to help keep our wiki readable.
+'''Bold:''' Used to bring emphasis to text, but be careful not to abuse it. Most effective when used sparingly.
+''Italic:'' Not really used in the NETwiki at all, and should be avoided because it is difficult to read. An exception should be made for narrow uses like scientific names, page referrals, or in some source citations. Otherwise, its use will usually be rejected by editors.
+'''''Bold italic:''''' Bold italic is an acceptable use of italic style in NETwiki for bringing emphasis.
+<u>Underline</u>: Should never be used, as it makes text difficult for some people to read. Narrow and specialized uses, such as with a source citation, are allowed in NETwiki.
+<s>Strikethrough</s>: Often has a very narrow use case. It's not banned from NETwiki, but an article needs to have a good reason to use it.
+ALL CAPS: This is usually used for emphasis, but only used in NETwiki when bold or bold italic won't work for some reason. It's also very annoying to read, so the writer needs a good reason for using it.
+<big>Big</big> and <small>Small</small> styles: No hard rules in NETwiki governing their use, but they shouldn't be used to emphasize text. These are more useful styles for design reasons (for example, using Big text at the top of a table column).
+<pre>
+'''Bold:''' Used sparingly to bring emphasis to text.
+''Italic:'' Not really used in the NETwiki at all, and should be avoided because it is difficult to read. An exception should be made for narrow uses like scientific names or in some source citations. Otherwise, its use will usually be rejected by editors.
+'''''Bold italic:''''' Bold italic is an acceptable use of italic style in NETwiki for bringing emphasis.
+<u>Underline</u>: Should never be used, as it makes text difficult for some people to read. Narrow and specialized uses, such as with a source citation, are allowed in NETwiki.
+<s>Strikethrough</s>: Often has a very narrow use case. It's not banned from NETwiki, but an article needs to have a good reason to use it.
+ALL CAPS: This is usually used for emphasis, but only used in NETwiki when bold or bold italic won't work for some reason. It's also very annoying to read, so the writer needs a good reason for using it.
+<big>Big</big> and <small>Small</small> styles: No hard rules in NETwiki governing their use, but they shouldn't be used to emphasize text. These are more useful styles for design reasons (for example, using Big text at the top of a table column).
+</pre>
 ==Emphasis in Type==
-Sometimes you need your words to pop in order to place emphasis on them. For the most part, these tools should be used sparingly. After all, if everything is emphasized, nothing is. And your article looks like crap.
+Sometimes you need your words to pop in order to place emphasis on them. For the most part, '''these tools should be used sparingly'''. For one thing, it might make a page more difficult to read for persons with sight impairments. And after all, if everything is emphasized, nothing is.
 ===Essential/Non-essential headers===
 If you are writing a particularly long article and/or an article required for Basic NET training, you may want to indicate some sections as "essential" reading and other sections as "supplemental". This is not a trick with text so much as it's a very small table that sits at the top of a page section. For an example in context, see: [[Basic NET Training Standard Syllabus#Basic NET Class Goals|Basic NET Class Goals]].
-NETwiki standard:
+<mark>'''NETwiki standard:'''</mark>
 * "Essential" should be a single line table in "firebrick" red, spanning 25% of the page, white bold text.
 * "Supplemental" should be a single line table in "gold", spanning 25% of the page, white bold text.
-{|class="wikitable" style="width: 25%; "
+{| class="wikitable" style="width: 25%; "
 |+
 | style="background: firebrick; color: white" |'''Section Importance: Essential'''
@@ Line 23: / Line 73: @@
 </pre>
-{| class="wikitable" style="width: 25%;
+{| class="wikitable" style="width: 25%; "
 |+
-|style="background: gold; color: black"|'''Section Importance: Supplemental'''
+| style="background: gold; color: black" |'''Section Importance: Supplemental'''
 |}
@@ Line 36: / Line 86: @@
 === Simple yellow highlight on text ===
-Wiki syntax comes with a simple and easy way to place a yellow highlight on selected text. Simply brace it inside the code you see below.
+Wiki syntax comes with a simple and easy way to place a yellow highlight on selected text. Simply brace it inside <nowiki><mark> and </mark></nowiki>.
+Example:
-'''Example:''' <mark>The quick brown fox</mark> jumps over the lazy dog.
+<mark>The quick brown fox</mark> jumps over the lazy dog.
 <pre>
-'''Example:''' <mark>The quick brown fox</mark> jumps over the lazy dog.
+<mark>The quick brown fox</mark> jumps over the lazy dog.
 </pre>
@@ Line 50: / Line 100: @@
 <pre>
 <span style="background:black; color:white">'''All PBEM employees must stop crying before returning to work.'''</span>
-</pre>If I want to make that text string less of an eyesore, I might also take care to color highlight a space before and after, like this:
+</pre>
+For design reasons, you may want a space before or after the sentence that is the same color as the highlight so it doesn't look quite so cut off. That's an extra layer of code. The syntax will just cut off a blank space even if you have it inside the brackets. So instead, you have to have a symbol, like an asterisk, bookending your sentence that is the color of the background.
-<span style="background:black; color:white">''' All PBEM employees must stop crying before returning to work. '''</span>
+<span style="background:black; color:black">*</span><span style="background:black; color:white">'''All PBEM employees must stop crying before returning to work.'''</span><span style="background:black; color:black">*</span>
-In that example, I also made the text white. But naturally, you can change the color of the text, also, to create all manner of page design monstrosity.
+<pre>
+<span style="background:black; color:black">*</span><span style="background:black; color:white">'''All PBEM employees must stop crying before returning to work.'''</span><span style="background:black; color:black">*</span>
+</pre>
+In that example, I also made the text white. But naturally, you can <span style="background:purple; color:red">change the color</span><span style="background:orange; color:green"> of the text and background</span><span style="background:pink; color:grey"> to create all manner of page design monstrosity.</span>
+<br>
+<br>
+== Table Adjustments ==
+=== Setting table width ===
+If you use a table but do not set a width, it can take up all the horizontal space available to it. That's not ''bad'' exactly, but it might look bad and/or defeat the purpose of having a table in the first place. You can control a table's width by assigning it a percentage of the screen's horizontal space, or by pixels.
+==== Setting table width by percentage ====
+Let's say you do not want a table to extend beyond 25% of the screen's width. You would mark that up as:
+<pre>
+{| class="wikitable" style="width: 25%;"
+|+
+!Column 1
+!Column 2
+!Column 3
+!Column 4
+|-
+|Info 1
+|Info 2
+|Info 3
+|Info 4 But the content here is longer.
+|}
+</pre>
+This gets you:
+{| class="wikitable" style="width: 25%;"
+|+
+!Column 1
+!Column 2
+!Column 3
+!Column 4
+|-
+|Info 1
+|Info 2
+|Info 3
+|Info 4 But the content here is longer.
+|}
+Note that the width of the individual columns will adjust spacing to fill 25% of the horizontal space. In this example, if all the content was the same size, all the columns would space evenly.
+==== Setting table width by pixel ====
+Same as the above, except you notate the percentage as the number of pixels instead. In this case, we'll set to 500 pixels.
+<pre>
+{| class="wikitable" style="width: 500;"
+|+
+!Column 1
+!Column 2
+!Column 3
+!Column 4
+|-
+|Info 1
+|Info 2
+|Info 3
+|Info 4 But the content here is longer.
+|}
+</pre>
+This gets you:
+{| class="wikitable" style="width: 500;"
+|+
+!Column 1
+!Column 2
+!Column 3
+!Column 4
+|-
+|Info 1
+|Info 2
+|Info 3
+|Info 4 But the content here is longer.
+|}
+== Media Embeds ==
+One of the things that makes this Wiki so effective for PBEM volunteers is that article writers can embed video, images, and file for downloads.
+=== Embed a video ===
+In NETwiki, you can embed a video only from YouTube or Vimeo. Vimeo is the preferred NETwiki video source, since Vimeo doesn't make viewers watch ads. As most videos are not available on Vimeo, YouTube will do. The embed code for a video looks like this:
+[[File:Video Embed Code.png]]
+{{#ev:youtube|1S2nuZsBz8g|430|right|'''''Video: Exegesis addressing Kierkegaard's views on the meaning of life'''''|frame}}
+Let's go over each part of this phrase in Wiki syntax; each part is '''''required''''' for the code to post successfully and each part must be segregated by the "|" symbol. The numbers in magenta correspond to the list below:
+# '''<nowiki>{{</nowiki>'''  Opening braces, and these will be the same any time someone is embedding a video.
+# '''#ev:'''  these three characters set up the next part to name which video service will be used in the embed, either YouTube or Vimeo.
+# '''youtube'''  this part should be completed according to which video service is going into the embed. In this example, it is YouTube, but it could be Vimeo if the embed is coming from Vimeo.
+# '''1S2nuZsBz8g'''  this is the most important part of the embed. It is the unique identifier for the video you plan to use.
+# '''430'''  this indicates the width of the video.
+# '''Right'''  this indicates where on the page the video will be aligned on the page. It can be right, left, or centered.
+# This part of the phrase is the caption of the video that anyone viewing the page will see. It will not change a video's header title from Vimeo or YouTube.
+# '''Frame'''  I don't know what this actually means, just don't leave it out.
+# '''<nowiki>}}</nowiki>'''  closing braces.
+<pre>
+{{#ev:youtube|1S2nuZsBz8g|430|right|'''''Video: Exegesis addressing Kierkegaard's views on the meaning of life'''''|frame}}
+</pre>
+You can see the result to the right side of this page.
+<mark>'''NETwiki standard:'''</mark> We recommend (but do not require) right-aligned videos. Left aligned videos interfere with wrapping text and often don't look good. A video caption should always appear in bold text and begin as "'''Video: (title)'''". Width should consistently appear as 430 pixels. Obviously, no video should be posted that includes adult content (e.g. nothing the video would be slapped with [[wikipedia:Motion_Picture_Association_film_rating_system#Rating_components|an "R" rating]] for).
+=== Google Calendar ===
+# On the Google Calendar website, click on the <code>...</code> icon next to the calendar you want to share and click <code>Settings</code>
+# In the "Integrate calendar" section, copy the text labeled "Public URL to this calendar". Example:  <code><nowiki>https://calendar.google.com/calendar/embed?src=en.usa%23holiday%40group.v.calendar.google.com&ctz=America%2FLos_Angeles</nowiki></code>
+# Remove the text up to and including the question mark. Example: <code>src=en.usa%23holiday%40group.v.calendar.google.com&ctz=America%2FLos_Angeles</code>
+# Add <code>&mode=AGENDA</code> to the end.
+# On the team page, add the wikitext <code>Special:IframePage/GoogleCalendar|path=</code> followed by your calendar code, surrounded by double curly-braces <code><nowiki>{{</nowiki></code> <code><nowiki>}}</nowiki></code>
+Example: <code><nowiki>{{Special:IframePage/GoogleCalendar|path=src=en.usa%23holiday%40group.v.calendar.google.com&ctz=America%2FLos_Angeles&mode=AGENDA}}</nowiki></code>
+== Miscellaneous Tricks ==
+=== Referring to a main article ===
+NETwiki follows the standard found in Wikipedia: offset in italic with a link to the main article. For example:
+:''Main article: [[Background Checks|Criminal Background Checks]]''
+The markup to do something like that looks like this (note particularly the colon at the start of the line, which adds an indent):
+<pre>
+:''Main article: [[Background Checks|Criminal Background Checks]]''
+</pre>
+=== Reference Sections ===
+Any page that includes references in the form of citations should have a reference section (specifically, a "Notes and References" section). To set that up, you need to do two things:set up a "Notes and References" section at the very bottom of a page, and then create reference citations by using the appropriate tag at the end of a sentence. Since doing these things shapes how a page is formatted, here is a sub-page that will act as a demonstration page for references:
+:'''↳''' ''[[Wiki Code Cookbook/References Demonstration Page|References Demonstration Page]]''
+For a quick reference here on the markup you need:
+<pre>
+== Notes and References ==
+<references />
+</pre>
+That much is fairly simple. But say you want to cite the same footnote more than once. To do that, you have to assign a name to the reference. Click on the demonstration page above to see the code for it.
+=== Horizontal lines ===
+If you want to create a horizontal line to set off sections of text for any reason, the code is simple.
+<pre>
+<hr>
+</pre>
+...gets you the following horizontal line stretched across the page:
+<hr>
+=== Color boxes ===
+A color box is a widget that is, well, a colored box. Like so: {{color box|Green}}
+Sometimes color boxes can be used to note specific sections and different meanings. There are a lot of tricks to creating color boxes; best is to visit: https://en.wikipedia.org/wiki/Template:Color_box
+=== VSF Position Description Template ===
+<nowiki>The Wiki includes a template for VSF position descriptions which can be activated by typing "{{VSF Position"</nowiki>
+=== Link Templates ===
+For example:
+{| class="wikitable"
+!Template
+!Displays as
+|-
+|<nowiki>{{EmailLink|net@portlandoregon.gov}}</nowiki>
+|{{EmailLink|addr=net@portlandoregon.gov}}
+|-
+|<nowiki>{{EmailLink|addr=net@portlandoregon.gov|name=net@portlandoregon.gov}}</nowiki>
+|{{EmailLink|addr=net@portlandoregon.gov|name=net@portlandoregon.gov}}
+|-
+|<nowiki>{{FacebookLink|groups/portlandprepares|name=PortlandPrepares}}</nowiki>
+|{{FacebookLink|groups/portlandprepares|name=PortlandPrepares}}
+|}
+Click on each template in the list below to understand how to use it:
+* [[Template:EmailLink]]
+* [[Template:GoogleDocLink]]
+* [[Template:FacebookLink]]
+* [[Template:GroupsLink]]
+* [[Template:InstagramLink]]
+* [[Template:SignalLink]]
+== NET Team Pages ==
+=== What Goes On A Team Page? ===
+Your team page could be the single link your team hands out at block parties or when new neighbors move in.
+Please consider it a "landing page" that describes aspects of emergency preparedness that are '''unique to your neighborhood'''. For example,
+* For potential volunteers:
+** provide ways to engage with the local team (e.g. team point of contact, public discussion forums)
+** describe unique considerations (e.g. "we work closely with this school," "we meet at this location", "90% of Oregon's fuel supply passes through our neighborhood")
+** team accomplishments (e.g. "we've deployed at warming shelters", "we provided first aid at this parade")
+* For existing team members:
+** recognize team positions (e.g. Team Leader, Amateur Radio Operators)
+** contain important links (e.g. to a shared team folder, or to the Operations Plan)
+Some content belongs elsewhere:
+* News: this content often goes stale, and is better shared in team discussion forums.
+* Orientation to the NET program: this is best centralized at PBEM, rather than re-written by individual teams.
+* Tips for personal preparedness: this is best centralized at PublicAlerts.org, rather than re-written by individual teams.
+=== Can other NET members edit my team's page? ===
+Yes, and these contributions should be welcomed.
+# Watch your team's page so you receive notifications when it's changed.
+# If someone else's change needs improvement, improve it.
+# If there is a disagreement that can't be resolved, send an email to {{EmailLink|net@portlandoregon.gov|name=net@portlandoregon.gov}} for help.
+=== Team Page Editing Checklist ===
+# ✅ Review the [[NETwiki Content Creators and Editors]] page.
+# <nowiki>✅ Update the names (e.g. Team Leader) and contact information in the {{</nowiki>[[Template:Team|Team]]<nowiki>}} template.</nowiki>
+# ✅ Update your team's Earthquake Plan (née Operations Plan) by uploading it to the wiki with the name "Team Earthquake Plan - ''<team name>''.pdf". (''<team name>'' means the name visible at the top of your team's page, e.g. "TaborVilla", not the list of neighborhood names in the team page's URL.)
+# <nowiki>✅ Add/update neighborhood populations in the {{</nowiki>[[Template:Neighborhood|Neighborhood]]<nowiki>}} templates. (See </nowiki>[https://www.portland.gov/civic/myneighborhood/neighborhood-profile-maps Neighborhood Demographic Profiles] page.)
+# <nowiki>✅ Add/update BEECN and fire station sites in the {{</nowiki>[[Template:Neighborhood|Neighborhood]]<nowiki>}} templates. (See </nowiki>[https://pdx.maps.arcgis.com/apps/webappviewer/index.html?id=d3eaa87bf97148a78a5f358207259d72 BEECNs and Fire Stations] map.)
+# <nowiki>✅ Add/update schools in the {{</nowiki>[[Template:Neighborhood|Neighborhood]]<nowiki>}} templates.</nowiki>
+# ✅ Use [[EditingTeamPages#Link Templates|#Link Templates]] for pretty little icons.
+=== Can I Upload Photos Or Team Documents? ===
+For most files, please upload them separately and link to them from your team pages.
+Where to host different types of files:
+{| class="wikitable"
+!file type
+!where to host it
+|-
+|small inline images (e.g. team members in action)
+|NET wiki
+|-
+|small inline neighborhood map
+|NET wiki
+|-
+|Operations plans
+|NET wiki
+|-
+|Photo albums (e.g. team exercises)
+|send an email to {{EmailLink|net@portlandoregon.gov|name=net@portlandoregon.gov}} for an upload link for PBEM's Lightroom account, or
+use 3rd-party hosting (e.g. Google Photos, Flickr)
+|-
+|Meeting minutes
+|use 3rd-party file hosting (e.g. Google Drive)
+|-
+|Internal team documents (e.g. spreadsheets, planning documents)
+|use 3rd-party file hosting (e.g. Google Drive)
+|-
+|Outreach materials
+|use 3rd-party file hosting (e.g. Google Drive)
+|}

Anonymous

Search

Wiki Code Cookbook: Difference between revisions

Navigation

Wiki tools

Page tools