Difference between revisions of "User talk:Zebragrrl"
User talk:Zebragrrl
Jump to navigation
Jump to search
Line 3: | Line 3: | ||
== Useful Wiki Formatting/CSS Examples == |
== Useful Wiki Formatting/CSS Examples == |
||
− | === |
+ | === Collapsible page sections === |
+ | ==== Show a hidden section ==== |
||
⚫ | |||
+ | <!-- Begin example box --> |
||
⚫ | |||
+ | '''Example:''' |
||
⚫ | |||
⚫ | |||
+ | <!-- Begin pasted code --> |
||
⚫ | |||
⚫ | |||
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 |
+ | <div style="text-align: center;" class="mw-customtoggle-myDivision">⮟ <u>Click here to Expand</u> ⮟</div> |
⚫ | |||
− | |||
⚫ | |||
Hidden text is revealed! |
Hidden text is revealed! |
||
Line 19: | Line 24: | ||
</div> |
</div> |
||
+ | <!-- End pasted code --> |
||
− | <pre> |
||
+ | </div> |
||
+ | |||
+ | |||
⚫ | |||
+ | <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 |
+ | <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 # |
+ | <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 --> |
||
⚫ | |||
+ | ==== 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 --> |
||
⚫ | |||
⚫ | |||
⚫ | |||
+ | This is some text explaining that this section can be hidden. |
||
⚫ | |||
⚫ | |||
+ | <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> |
||
⚫ | |||
− | This section is shown by default, but can be hidden |
||
⚫ | |||
⚫ | |||
− | 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 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
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>