User:Emma/Sandbox: Difference between revisions

From Zelda Dungeon Wiki
Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.
m (Text replacement - "(Oracle Games)" to "(Oracle Series)")
 
(28 intermediate revisions by 3 users not shown)
Line 10: Line 10:


:New Messages box:
:New Messages box:
<div class="usermessage">You have <span class="plainlinks" title="User talk:Matt">[http://www.zeldadungeon.net/wiki/index.php?title=User_talk:Matt&amp;redirect=no new messages]</span> (<span class="plainlinks" title="User talk:Matt">[http://www.zeldadungeon.net/wiki/index.php?title=User_talk:Matt&amp;diff=cur last change]</span>).</div>
<div class="usermessage">You have <span class="plainlinks" title="User talk:Matt">[https://www.zeldadungeon.net/wiki/index.php?title=User_talk:Matt&amp;redirect=no new messages]</span> (<span class="plainlinks" title="User talk:Matt">[https://www.zeldadungeon.net/wiki/index.php?title=User_talk:Matt&amp;diff=cur last change]</span>).</div>


==User Functions==
==User Functions==
:Current user: {{CURRENTUSER}}
:Current user: {{#username:}}


:User group: {{#usergroup:{{CURRENTUSER}}|0}}, {{#usergroup:{{CURRENTUSER}}|1}}, {{#usergroup:{{CURRENTUSER}}|2}}
:User group: {{#usergroup:{{#username:}}|0}}, {{#usergroup:{{#username:}}|1}}, {{#usergroup:{{#username:}}|2}}
==Tabs==
==Slideshow==
<div class="tab">
{{#vardefine:LastSlide|10}}{{#vardefine:LandingSlide|1}}
<ul>
<div style="background:white; border: 1px #AAA solid; padding: 0.2em; width:200px"><div style="border: 1px #AAA solid; background: #F2F2F2; text-align: center; font-weight:bold;">Image Slideshow</div>
<li><span class="_toggler_hide-otabs _toggler_show-otab1">tab1</span></li>
{| align=center
<li><span class="_toggler_hide-otabs _toggler_show-otab2">tab2</span></li>
{{User:Emma/Sandbox/TestTemplate1|[[File:WoodenShield-SS-Icon.png|x80px]]}}
<li><span class="_toggler_hide-otabs _toggler_show-otab3">tab3</span></li>
{{User:Emma/Sandbox/TestTemplate1|[[File:Banded Shield SS.png|x80px]]}}
</ul>
{{User:Emma/Sandbox/TestTemplate1|[[File:BracedShield-SS-Icon.png|x80px]]}}
</div>
{{User:Emma/Sandbox/TestTemplate1|[[File:IronShield-SS-Icon.png|x80px]]}}
<div class="tabcontent">
{{User:Emma/Sandbox/TestTemplate1|[[File:ReinforcedShield-SS-Icon.png|x80px]]}}
{{toggle|Tab 1||otab1 otabs}}
{{User:Emma/Sandbox/TestTemplate1|[[File:FortifiedShield-SS-Icon.png|x80px]]}}
{{toggle||Tab 2|otab2 otabs}}
{{User:Emma/Sandbox/TestTemplate1|[[File:SacredShield-SS-Icon.png|x80px]]}}
{{toggle||Tab 3|otab3 otabs}}
{{User:Emma/Sandbox/TestTemplate1|[[File:DivineShield-SS-Icon.png|x80px]]}}
</div>
{{User:Emma/Sandbox/TestTemplate1|[[File:GoddessShield-SS-Icon.png|x80px]]}}
{{User:Emma/Sandbox/TestTemplate1|[[File:HylianShield-SS-Icon.png|x80px]]}}
|}</div>


===Possible Alternative Formatting===
==Letterhead==
Preliminary examples of concept:
Normal table:
<div style="text-align:center; width:80px; margin-right: 1px;
{| style="border-collapse: separate; border-spacing: 0; border-width: 0px;"
margin-bottom: -1px;
| style="width: 80px; background-color: transparent; border-width: 2px; padding: 0;"|[[File:Page-corner.png|link=]]
border: 1px solid;
! style="background-color: #faf9f2; font-style:bold;"| Very Serious Blah
font-weight: bold;
|-
-moz-border-radius-topleft: 3px;
| colspan=2 style="padding: 3em 2em; background-color: #faf9f2; font-size:1.2em;"|blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
-moz-border-radius-topright: 3px;
|}
-moz-border-radius-bottomright: 0;
Text area through table caption:
-moz-border-radius-bottomleft: 0;
{| style="border-collapse: separate; border-spacing: 0; border-width: 0px; width:100%"
border-radius: 8px 8px 0 0;
| style="width: 80px; background-color: transparent; border-width: 2px; padding: 0;"|[[File:Page-corner.png|link=]]
-moz-border-radius: 8px 8px 0 0;
! style="background-color: #faf9f2; font-style:bold;"| Very Serious Blah
-webkit-border-radius: 8px 8px 0 0;
|+ align="bottom" style="padding: 3em 2em; background-color: #faf9f2; font-size:1.2em; "|blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
border-radius: 8px 8px 0 0;
|}
background: #bbffff;
background: -moz-linear-gradient(top,#bbffff 0,#F2F2F2 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#8bdee6),color-stop(100%,#F2F2F2));
background: -webkit-linear-gradient(top,#bbffff 0,#F2F2F2 100%);
background: -o-linear-gradient(top,#bbffff 0,#F2F2F2 100%);
background: -ms-linear-gradient(top,#bbffff 0,#F2F2F2 100%);
background: linear-gradient(top,#bbffff 0,#F2F2F2 100%);
border-image: initial;">Example</div>


<div style="text-align:center; width:80px; margin-right: 1px;
Through CSS class on table for header and div for content:
margin-bottom: -1px;
border: 1px solid;
font-weight: bold;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
margin-bottom: -1px;
border-bottom: 1px solid white!important;
color: black;
background: white;
background: -moz-linear-gradient(top,white 0,#E5E5E5 5%,white 55%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,white),color-stop(5%,#E5E5E5),color-stop(55%,white));
background: -webkit-linear-gradient(top,white 0,#E5E5E5 5%,white 55%);
background: -o-linear-gradient(top,white 0,#E5E5E5 5%,white 55%);
background: -ms-linear-gradient(top,white 0,#E5E5E5 5%,white 55%);
background: linear-gradient(top,white 0,#E5E5E5 5%,white 55%);
box-shadow: 0 -1px 1px #ddd;
-moz-box-shadow: 0 -1px 1px #ddd;
-webkit-box-shadow: 0 -1px 1px #ddd;">Example</div>


<span style="display:none;"><css>
{| class="letterhead"
.tabtest, .tabtestselected {
| [[File:TriforceIcon.png|link=]]
  float:left;
!  Very Serious Blah
  width:100%;
|}
  font-size:93%;
<div class="letterhead">
  margin: 0;
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
  padding: 0;
</div>
}
.tabtest ul, .tabtestselected ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none !important;


}
==Rings Nav==
.tabtest li, .tabtestselected li {
This is just some stuff for my rings nav project so I don't forget.
  float:left;
  margin:0 !important;
  text-align:center;
}
/* MediaWiki automatically removes links for the current page and surrounds it with <strong> tags instead */
.tabtest a,.tabtest strong {
  padding: 5px 10px 4px 10px;
  margin-right: 1px;
  margin-bottom: -1px;
  border: 1px solid #A6B4E7;
  border-bottom: 1px solid #AAA;
  float:left;
  display:block;
  text-decoration:none;
  font-weight:bold;
  color:black;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-radius: 8px 8px 0 0;
  -moz-border-radius: 8px 8px 0 0;
  -webkit-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
  background: #c8d0ff;
  background: -moz-linear-gradient(top,#c8d0ff 0,#F9F9F9 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#c8d0ff),color-stop(100%,#F9F9F9));
  background: -webkit-linear-gradient(top,#c8d0ff 0,#F9F9F9 100%);
  background: -o-linear-gradient(top,#c8d0ff 0,#F9F9F9 100%);
  background: -ms-linear-gradient(top,#c8d0ff 0,#F9F9F9 100%);
  background: linear-gradient(top,#c8d0ff 0,#F9F9F9 100%);
}
/* Commented Backslash Hack
  hides rule from IE5-Mac \*/
.tabtest a:hover {float:none;}
/* End IE5-Mac hack */
.tabtest a:hover {
  color:#A6B4E7;
}


.tabtest a:hover, .tabtest strong:hover, .tabtestselected a, .tabtestselected strong{
Preliminary box border:
  padding: 5px 10px 4px 10px;
<div style="width:400px;">
  margin-right: 1px;
{| style="height: 8px;width:100%;background:#cd5891;"
  margin-bottom: -1px;
!style="border-top: 2px solid #903478; width: 100%;height: 1px;float:left;"|&nbsp;
  border: 1px solid #A6B4E7;
|-
  font-weight: bold;
|style="width: 100%;height: 0px;background:#82397c;float:left;"|&nbsp;
  -moz-border-radius-topleft: 8px;
|-
  -moz-border-radius-topright: 8px;
!style="border-bottom: 2px solid #903478; width: 100%;height: 1px;float:left;"|&nbsp;
  -moz-border-radius-bottomright: 0;
|}
  -moz-border-radius-bottomleft: 0;
</div>
  border-radius: 8px 8px 0 0;
  -moz-border-radius: 8px 8px 0 0;
  -webkit-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  border-bottom: 1px solid #F9F9F9!important;
  color: black;
  background: white;
  background: -moz-linear-gradient(top,white 0,#E5E5E5 5%,#F9F9F9 55%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,white),color-stop(5%,#E5E5E5),color-stop(55%,#F9F9F9));
  background: -webkit-linear-gradient(top,white 0,#E5E5E5 5%,#F9F9F9 55%);
  background: -o-linear-gradient(top,white 0,#E5E5E5 5%,#F9F9F9 55%);
  background: -ms-linear-gradient(top,white 0,#E5E5E5 5%,#F9F9F9 55%);
  background: linear-gradient(top,white 0,#E5E5E5 5%,#F9F9F9 55%);
  box-shadow: 0 -1px 1px #ddd;
  -moz-box-shadow: 0 -1px 1px #ddd;
  -webkit-box-shadow: 0 -1px 1px #ddd;
}
.tabtest a:hover,.tabtest strong:hover {
  border-bottom: 1px solid #AAA!important;
}
.tabtestselected a:hover,.tabtestselected strong:hover {
  border-bottom: 1px solid #F9F9F9!important;
}


.tabcontent {
Preliminary rings listing:
  border: 1px solid #AAA;
{| style="text-align: center; border-spacing: 0px; border-collapse: collapse;"
  padding: 0em 1em 1em 1em;
|- valign="bottom"
  background-color:#F9F9F9;
|[[File:Friendship-Ring.png|text-bottom|link=Friendship Ring]]&#32;||[[File:Power-Ring-1.png|text-bottom|link=Power Ring L-1]]&#32;||[[File:Power-Ring-2.png|text-bottom|link=Power Ring L-2]]&#32;||[[File:Power-Ring-3.png|text-bottom|link=Power Ring L-3]]&#32;||[[File:Armor-Ring-1.png|baseline|link=Armor Ring L-1]]&#32;||[[File:Armor-Ring-2.png|baseline|link=Armor Ring L-2]]&#32;||[[File:Armor-Ring-3.png|baseline|link=Armor Ring L-3]]&#32;||[[File:Red-Ring-Oracle.png|text-bottom|link=Red Ring (Oracle Series)]]&#32;
  color:#000;
|- valign="bottom"
  clear: left;
|[[File:Blue-Ring-Oracle.png|text-bottom|link=Blue Ring (Oracle Series)]]&#32;||[[File:Green-Ring.png|text-bottom|link=Green Ring]]&#32;||[[File:Cursed-Ring.png|text-bottom|link=Cursed Ring]]&#32;||[[File:Experts-Ring.png|text-bottom|link=Expert's Ring]]&#32;||[[File:Blast-Ring.png|baseline|link=Blast Ring]]&#32;||[[File:Rang-Ring-1.png|text-bottom|link=Rang Ring L-1]]&#32;||[[File:GBA-Time-Ring.png|text-bottom|link=GBA Time Ring]]&#32;||[[File:Maples-Ring.png|text-bottom|link=Maple's Ring]]&#32;
}
|}
</css></span>
<div class="tabtest">
<ul>
<li><span class="_toggler_hide-tabs _toggler_show-tab1 _toggler_hide-stabs _toggler_show-utabs _toggler_hide-utab1 _toggler_show-stab1 utab1 utabs" style="display:none;">tab1</span><span class="_toggler_hide-stab1 _toggler_show-stab1 stab1 stabs tabtestselected" style="font-size: 100%!important;">tab1</span></li>
<li><span class="_toggler_hide-tabs _toggler_show-tab2 _toggler_hide-stabs _toggler_show-utabs _toggler_hide-utab2 _toggler_show-stab2 utab2 utabs">tab2</span><span class="_toggler_hide-stab2 _toggler_show-stab2 stab2 stabs tabtestselected" style="display:none; font-size: 100%!important;">tab2</span></li>
<li><span class="_toggler_hide-tabs _toggler_show-tab3 _toggler_hide-stabs _toggler_show-utabs _toggler_hide-utab3 _toggler_show-stab3 utab3 utabs">tab3</span><span class="_toggler_hide-stab3 _toggler_show-stab3 stab3 stabs tabtestselected" style="display:none; font-size: 100%!important;">tab3</span></li>
</ul>
</div>
<div class="tabcontent">
{{toggle|Tab 1||tab1 tabs}}
{{toggle||Tab 2|tab2 tabs}}
{{toggle||Tab 3|tab3 tabs}}
</div>

Latest revision as of 05:28, January 18, 2023



This is my personal sandbox I use for testing projects I'm working on.



New Messages box:

User Functions

Current user: {{#username:}}
User group: {{#usergroup:{{#username:}}|0}}, {{#usergroup:{{#username:}}|1}}, {{#usergroup:{{#username:}}|2}}

Slideshow

Image Slideshow
WoodenShield-SS-Icon.png

Letterhead

Normal table:

Page-corner.png Very Serious Blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Text area through table caption:

Page-corner.png Very Serious Blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Through CSS class on table for header and div for content:

TriforceIcon.png Very Serious Blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Rings Nav

This is just some stuff for my rings nav project so I don't forget.

Preliminary box border:

 
 
 

Preliminary rings listing:

Friendship-Ring.png Power-Ring-1.png Power-Ring-2.png Power-Ring-3.png Armor-Ring-1.png Armor-Ring-2.png Armor-Ring-3.png Red-Ring-Oracle.png
Blue-Ring-Oracle.png Green-Ring.png Cursed-Ring.png Experts-Ring.png Blast-Ring.png Rang-Ring-1.png GBA-Time-Ring.png Maples-Ring.png