View source for User talk:Zebragrrl

{{DISPLAYTITLE: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 [[Doozer-CNC-Machine]] 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 ====
<!-- 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 '''
----
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>

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

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

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

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

==== Hide a shown section ====
<!-- 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 '''
----
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;">

Hidden text is revealed!

</div>

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

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

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

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


=== 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.

<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 -->

<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>

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

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

<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>

</pre>
</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 Tag ====
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; text-align: center;">
<!-- Begin pasted 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 -->

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

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

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

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

==== Green Tag ====
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; text-align: center;">
<!-- Begin pasted 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 -->

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

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

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

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

=== Code Snippet Example Boxes ===
These are the boxes I used to make these other code snippets easy to copy-paste.

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

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

=== 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:'''
<nowiki><</nowiki>pre style="padding: 0em 1em;">

Real code goes here.

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

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

== Sidebar ==
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; text-align:center;>
<!-- Begin pasted code -->

<!-- Start of Sidebar -->
<div style="width:197px; display: inline-block; padding: 10px; border: 1px solid #aaaaaa; background-color: #e8e8e8;">

<!-- Begin Project/Tool Graphic-->
Paste 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 -->

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

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

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

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