Karen's Notes 'n' Stuff

Useful Wiki Formatting/CSS Examples

Collapsible page sections

Useful on pages where old information is to be retained, but may no longer be relevant. An example is on the Project: ‛Doozer’ page, where information about the development and building stages of the machine is nice to retain, but are no longer relevant to the operation and maintenance of the machine, once it's built.

Show a hidden section

Example:

Title

---

This is some text explaining that this section is hidden.

⬇ Click here to Expand ⬇

Hidden text is revealed!

Code:

== Title == 
This is some text explaining that this section is hidden.

<div style="text-align: center;" class="mw-customtoggle-myDivision">⮟ <u>Click here to Expand</u> ⮟</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision" style="border: 1px solid #cccc00; background-color: #ffffcc; padding: 0.125em .5em;">

Hidden text is revealed!

</div>

Hide a shown section

Example:

Title

---

This is some text explaining that this section can be hidden.

⬆ Click here to Collapse ⬆

Visible text vanishes!

Code:

== Title == 
This is some text explaining that this section can be hidden.

<div style="text-align: center;" class="mw-customtoggle-myDivision2">⮝ <u>Click here to Collapse</u> ⮝</div>
<div class="mw-collapsible" id="mw-customcollapsible-myDivision2" style="border: 1px solid #cccc00; background-color: #ffffcc; padding: 0.125em .5em;">

Visible text vanishes!

</div>

Under Construction Bar

Web 1.0 method of warning folks that the content on the page may change rapidly and without warning. Usually used on otherwise blank pages while trying to sort out some of the formatting and layout.

Example:

🚨 This page is under construction 🚨

Code:

<div style="border: 1px solid black; text-align: center; background: repeating-linear-gradient(134.9deg, #ffcc00, #ffcc00 20px, #555555 20px, #555555 40px);">
<span style="border: 1px solid black; background: white; padding: 4px 10px;"> 🚨 '''This page is under construction''' 🚨 </span>
</div>

Property Tags

Useful sidebar code blocks that can be used to express the owner's preference on being contacted or not, before someone uses a tool on loan to the shop.

Red Tag

Text explaining what it's good for.

Example:

Red Tag Tool

This Is Probably Unsafe

Code:

<!-- Begin red tag -->
<div style="border: 1px solid #aaaaaa; border-radius: .5em; text-align: center; width:197px; display: inline-block; background-color: #FF0011;">

{| style="width: 100%; text-align: center; border: 0px; padding: 0px; margin: 0px;"
| style="text-align: center; font-size: 1.25em; padding-bottom: none;" | '''Red Tag Tool'''
|-
| style="text-align: center; font-size: .875em; padding-top: -.5em;" | '''This Is Probably Unsafe'''
|}

</div>
<!-- End red tag -->

Yellow Tag

Text explaining what it's good for.

Example:

Yellow Tag Tool

Contact Owner Before Using

Code:

<!-- Begin yellow tag -->
<div style="border: 1px solid #aaaaaa; border-radius: .5em; text-align: center; width:197px; display: inline-block; background-color: #eeff77;">

{| style="width: 100%; text-align: center; border: 0px; padding: 0px; margin: 0px;"
| style="text-align: center; font-size: 1.25em; padding-bottom: none;" | '''Yellow Tag Tool'''
|-
| style="text-align: center; font-size: .875em; padding-top: -.5em;" | '''Contact Owner Before Using'''
|}

</div>
<!-- End yellow tag -->

Green Tag

Text explaining what it's good for.

Example:

Green Tag Tool

Anyone May Use This Tool

Code:

<!-- Begin green tag -->
<div style="border: 1px solid #aaaaaa; border-radius: .5em; text-align: center; width:197px; display: inline-block; background-color: #77ff77;">

{| style="width: 100%; text-align: center; border: 0px; padding: 0px; margin: 0px;"
| style="text-align: center; font-size: 1.25em; padding-bottom: none;" | '''Green Tag Tool'''
|-
| style="text-align: center; font-size: .875em; padding-top: -.5em;" | '''Anyone May Use This Tool'''
|}

</div>
<!-- End green tag -->

Sidebar

Used on User and Tool pages created by me. Adds a sidebar which can contain a machine logo, property tag and owner contact info, as well as other useful information.

Example:

Paste Project/Tool Image Here

Paste Property Tag Code Here

Tool Owner: Name (user page)

Chat: @_______ on on Slack

Email: See sticker on machine.

This is where other text goes.

Code:

<!-- Start of Sidebar -->
<div style="width:197px; float: right; margin-left: 20px; padding: 10px; border: 1px solid #aaaaaa; background-color: #e8e8e8;">

<!-- Begin Project/Tool Graphic-->
Paste Project/Tool Image Here
<!-- End Project/Tool  Graphic-->

<!-- Begin property tag -->
Paste Property Tag Code Here
<!-- End property tag -->
<!-- Begin Owner Info -->

{| class="wikitable" style="width: 100%; border-collapse: collapse; font-size: .85em; strdetch: semi-condensed;"
| '''Tool Owner:''' Name (user page)
|-
| '''Chat:''' <u>@_______</u> on [https://join.slack.com/t/eugenemakerspace/shared_invite/enQtMjA0NjM5OTc4NjU3LWNjY2FmYzdjM2JiZWJhYzY1MGEwODcwYjAzNjk4NDBlNGZkZmZjNDdkZjE3MzBlYmZmMzI4YmU4NDlmZTgwZWU on Slack]
|-
| '''Email:''' See sticker on machine.
|-
|}
<!-- End Owner Info -->

<!-- Begin Sidebar Content Box -->
<div style="border-top: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; margin: 10px 0px; padding: .5em 0em;">

This is where other text goes.

</div>
<!-- End Sidebar Content Box -->

</div>
<!-- End of Sidebar -->

Code Snippet Example Boxes

These are the boxes I used to make these other code snippets easy to copy-paste.

Code:

=== Title ===
Text explaining what it's good for.

<!-- Begin example box -->
<div style="border: 1px solid #aaaaaa; background-color: #eeeeee; padding: 0em 1em;>

'''Example:'''
<div style="border: 1px solid #dddddd; background-color: #ffffff; padding: 1em;>
<!-- Begin pasted code -->

Modified code goes here.

<!-- End pasted code -->
</div>

'''Code:'''
<pre style="padding: 0em 1em;">

Real code goes here.

</pre>
</div>
<!-- End example box -->