Difference between revisions of "User talk:Zebragrrl"
Line 2: | Line 2: | ||
== Useful Wiki Formatting/CSS Examples == |
== Useful Wiki Formatting/CSS Examples == |
||
+ | |||
=== Collapsible page sections === |
=== 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 ==== |
==== Show a hidden section ==== |
||
Line 44: | Line 46: | ||
</div> |
</div> |
||
<!-- End example box --> |
<!-- End example box --> |
||
− | |||
==== Hide a shown section ==== |
==== Hide a shown section ==== |
||
Line 85: | Line 86: | ||
</div> |
</div> |
||
<!-- End example box --> |
<!-- 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 #aaaaaa; background-color: #eeeeee; padding: 0em 1em;> |
<div style="border: 1px solid #aaaaaa; background-color: #eeeeee; padding: 0em 1em;> |
||
Line 111: | Line 114: | ||
</pre> |
</pre> |
||
</div> |
</div> |
||
+ | |||
=== Property Tags === |
=== 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. |
||
<div style="text-align: center;"> |
<div style="text-align: center;"> |
Revision as of 22:45, 19 September 2019
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>