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.
Example:
Title
This is some text explaining that this section is hidden.
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.
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>
Code Snippet Example Boxes
These are the boxes I used to make these other code snippets easily copy-pasteable. This particular one was a MASSIVE PAIN to create!
Example:
Title
Text explaining what it's good for.
Example:
Title
Modified code goes here.
Code:
=== Title === Real code goes here.
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 --> ''' 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 -->