Difference between revisions of "User talk:Zebragrrl"

From Eugene Maker Space
User talk:Zebragrrl
Jump to navigation Jump to search
 
(39 intermediate revisions by the same user not shown)
Line 1: Line 1:
  +
{{DISPLAYTITLE:Karen's Notes 'n' Stuff}}
   
 
== Useful Wiki Formatting/CSS Examples ==
  
== Useful Wiki Formatting/CSS Examples ==
   
−
=== Hide/Show page section ===
  
   
  +
=== Collapsible page sections ===
−
''' Title '''
 
  +
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.
   
−
This is some text explaining that this section is hidden.
 +
==== Show a hidden section ====
  +
<!-- Begin example box -->
  +
<div style="border: 1px solid #aaaaaa; background-color: #eeeeee; padding: 0em 1em;>
   
  +
'''Example:'''
−
<div style="text-align: center;" class="mw-customtoggle-myDivision">🔻 <u>Click for info</u> 🔻</div>
  
  +
<div style="border: 1px solid #dddddd; background-color: #ffffff; padding: 1em;>
  +
<!-- Begin pasted code -->
   
  +
''' Title '''
−
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision" style="border: 1px solid #aaaaaa; background-color: #eeeeee; padding: 0.125em .5em;">
  
  +
----
  +
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!
  
Hidden text is revealed!
Line 16: Line 26:
 
</div>
  
</div>
   
  +
<!-- End pasted code -->
−
''' Title '''
 
  +
</div>
   
  +
'''Code:'''
−
This section is shown by default, but can be hidden
  
  +
<pre style="padding: 0em 1em;">
   
  +
== Title ==
−
<div style="text-align: center;" class="mw-customtoggle-myDivision2">🔻 <u>Click for info</u> 🔻</div>
  
  +
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" id="mw-customcollapsible-myDivision2" style="border: 1px solid #aaaaaa; background-color: #eeeeee; padding: 0.125em .5em;">
  
  +
<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!
  
Hidden text is revealed!
   
 
</div>
  
</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-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>
  +
  +
<!-- 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-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>
  +
  +
</pre>
  +
</div>
  +
<!-- End example box -->
   
 
=== Under Construction Bar ===
  
=== 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 black; text-align: center; background: repeating-linear-gradient(134.8deg, #ffcc00, #ffcc00 20px, #555555 20px, #555555 40px);">
 +
<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>
  
<span style="border: 1px solid black; background: white; padding: 4px 10px;"> 🚨 '''This page is under construction''' 🚨 </span>
 
</div>
  
</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.
  +
  +
==== Red 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 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 redtag -->
  +
  +
<!-- End pasted code -->
  +
</div>
  +
  +
'''Code:'''
  +
<pre style="padding: 0em 1em;">
  +
  +
<!-- 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 -->
  +
  +
</pre>
  +
</div>
  +
<!-- End example box -->
  +
  +
==== 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 -->
  +
  +
=== 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.
  +
  +
<!-- 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 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; stretch: 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 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; stretch: 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 -->
  +
  +
=== 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 -->

Latest revision as of 18:43, 9 August 2024


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; stretch: 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 -->
Retrieved from "https://wiki.eugenemakerspace.com/index.php?title=User_talk:Zebragrrl&oldid=25176"