Difference between revisions of "User talk:Zebragrrl"

From Eugene Maker Space
User talk:Zebragrrl
Jump to navigation Jump to search
Line 3: Line 3:
 
== Useful Wiki Formatting/CSS Examples ==
 
== Useful Wiki Formatting/CSS Examples ==
   
=== Hide/Show page section ===
+
=== Collapsible page sections ===
   
  +
==== Show a hidden section ====
''' 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 '''
 
----
 
This is some text explaining that this section is hidden.
 
This is some text explaining that this section is hidden.
   
<div style="text-align: center;" class="mw-customtoggle-myDivision">⮟ <u>Click for info</u> ⮟</div>
+
<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;">
 
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision" style="border: 1px solid #aaaaaa; background-color: #eeeeee; padding: 0.125em .5em;">
 
   
 
Hidden text is revealed!
 
Hidden text is revealed!
Line 19: Line 24:
 
</div>
 
</div>
   
  +
<!-- End pasted code -->
<pre>
 
  +
</div>
  +
  +
 
'''Code:'''
  +
<pre style="padding: 0em 1em;">
  +
 
== Title ==
 
== Title ==
 
This is some text explaining that this section is hidden.
 
This is some text explaining that this section is hidden.
  +
<div style="text-align: center;" class="mw-customtoggle-myDivision">⮟ <u>Click for info</u> ⮟</div>
+
<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 #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>
 
</pre>
  +
</div>
  +
<!-- End example box -->
   
''' Title '''
 
   
  +
==== Hide a shown section ====
----
 
  +
<!-- Begin example box -->
  +
<div style="border: 1px solid #aaaaaa; background-color: #eeeeee; padding: 0em 1em;>
   
  +
'''Example:'''
This section is shown by default, but can be hidden
 
  +
<div style="border: 1px solid #dddddd; background-color: #ffffff; padding: 1em;>
  +
<!-- Begin pasted code -->
   
 
''' Title '''
<div style="text-align: center;" class="mw-customtoggle-myDivision2">⮝ <u>Click to hide</u> ⮝</div>
 
 
----
  +
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-myDivision2" style="border: 1px solid #aaaaaa; background-color: #eeeeee; padding: 0.125em .5em;">
 
  +
<div class="mw-collapsible" 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 42: Line 65:
 
</div>
 
</div>
   
  +
<!-- End pasted code -->
<pre>
 
== Title ==
 
This section is shown by default, but can be hidden
 
<div style="text-align: center;" class="mw-customtoggle-myDivision2">⮝ <u>Click to hide</u> ⮝</div>
 
<div class="mw-collapsible" id="mw-customcollapsible-myDivision2" style="border: 1px solid #aaaaaa; background-color: #eeeeee; padding: 0.125em .5em;">
 
Hidden text is revealed!
 
 
</div>
 
</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>
 
</pre>
  +
</div>
  +
<!-- End example box -->
   
 
=== Under Construction Bar ===
 
=== Under Construction Bar ===

Revision as of 22:36, 19 September 2019


Useful Wiki Formatting/CSS Examples

Collapsible page sections

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

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

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>