Karen's notes and 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 to hide ⮝

Hidden text is revealed!

Code:

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

<div style="text-align: center;" class="mw-customtoggle-myDivision">⮝ <u>Click to hide</u> ⮝</div>
<div class="mw-collapsible" id="mw-customcollapsible-myDivision" 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.

Yellow-Tagged Tool

Please Ask Before Using

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

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

</div>
</div>

Green-Tagged Tool

Anyone May Use

<div style="text-align: center;">
<div style="border: 1px solid #aaaaaa; background-color: #66DD44; padding: .5em; border-radius: .5em; width:197px; display: inline-block">

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

</div>
</div>

Title

Example:

Title

Example:

Title

---

Modified code goes here.

Code:

== Title == 
Real code goes here.

Code:

==== Title ====
<!-- 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 -->

''' Title '''
----
Modified code goes here.

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

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

== Title == 
Real code goes here.

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