Jump to content

Lightforge Loot Crate: Difference between revisions

From Once Human Guide
Newer edit →
Bones (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,328 edits
Created page with "<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Lightforge Look Crate</title> <style> body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #1a1a2e; color: #fff; padding: 40px; } .dropdown { width: 320px; background: #16213e; border: 2px solid #e94560; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .dropdown-header { background: linear-gradient(90deg, #e..."
 
No edit summary
Line 1: Line 1:
<!DOCTYPE html>
============================================================
<html lang="en">
OPTION 1 — Tabber (if the Tabber extension is installed)
<head>
This is the cleanest "pick which to view" UI.
<meta charset="UTF-8">
============================================================
<title>Lightforge Look Crate</title>
<style>
  body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: #1a1a2e;
    color: #fff;
    padding: 40px;
  }
  .dropdown {
    width: 320px;
    background: #16213e;
    border: 2px solid #e94560;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .dropdown-header {
    background: linear-gradient(90deg, #e94560, #f39c12);
    color: #fff;
    padding: 12px 16px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
  }
  .dropdown-header::after {
    content: '\25BC';
    font-size: 12px;
    transition: transform 0.2s ease;
  }
  .dropdown.open .dropdown-header::after {
    transform: rotate(180deg);
  }
  .dropdown-list {
    display: none;
    background: #0f3460;
  }
  .dropdown.open .dropdown-list {
    display: block;
  }
  .dropdown-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: background 0.15s ease;
  }
  .dropdown-item:hover {
    background: #1f4287;
  }
  .dropdown-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    background: #333;
  }
  .item-name {
    font-size: 15px;
    font-weight: 500;
  }
</style>
</head>
<body>


<div class="dropdown" id="lightforgeDropdown">
== Lightforge Loot Crate ==
  <div class="dropdown-header" onclick="document.getElementById('lightforgeDropdown').classList.toggle('open')">
 
    Lightforge Look Crate
<tabber>
  </div>
Wishland Wonder=
  <div class="dropdown-list">
[[File:Wishland Wonder.jpg|300px]]
    <div class="dropdown-item">
 
      <img src="File:Wishland Wonder.jpg" alt="Wishland Wonder">
''Description of Wishland Wonder goes here.''
      <span class="item-name">Wishland Wonder</span>
|-|
    </div>
Item Two=
  </div>
[[File:Item Two.jpg|300px]]
 
''Description of Item Two.''
|-|
Item Three=
[[File:Item Three.jpg|300px]]
 
''Description of Item Three.''
</tabber>
 
 
============================================================
OPTION 2 — Native collapsible dropdown (always works in MediaWiki, no extension needed)
Click the header to expand; each item shows its image inline.
============================================================
 
{| class="mw-collapsible mw-collapsed" style="width:400px; border:2px solid #e94560;"
! style="background:linear-gradient(90deg,#e94560,#f39c12); color:#fff; padding:8px;" | Lightforge Loot Crate
|-
| style="padding:8px;" |
* [[File:Wishland Wonder.jpg|48px]] '''Wishland Wonder'''
* [[File:Item Two.jpg|48px]] '''Item Two'''
* [[File:Item Three.jpg|48px]] '''Item Three'''
|}
 
 
============================================================
OPTION 3 — Custom toggle "picker" (one button per item, each reveals its own block)
Acts most like a true dropdown selector.
============================================================
 
<div class="mw-customtoggle-wishland" style="cursor:pointer; padding:6px 12px; background:#e94560; color:#fff; display:inline-block; border-radius:4px;">Wishland Wonder</div>
<div class="mw-customtoggle-itemtwo"  style="cursor:pointer; padding:6px 12px; background:#e94560; color:#fff; display:inline-block; border-radius:4px;">Item Two</div>
<div class="mw-customtoggle-itemthree" style="cursor:pointer; padding:6px 12px; background:#e94560; color:#fff; display:inline-block; border-radius:4px;">Item Three</div>
 
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-wishland">
[[File:Wishland Wonder.jpg|300px]]
''Wishland Wonder description.''
</div>
 
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-itemtwo">
[[File:Item Two.jpg|300px]]
''Item Two description.''
</div>
 
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-itemthree">
[[File:Item Three.jpg|300px]]
''Item Three description.''
</div>
</div>


</body>
 
</html>
============================================================
NOTES
============================================================
 
- Paste into the SOURCE editor (not Visual editor), or it may mangle the markup.
- Image names are case-sensitive and must match the uploaded filename exactly,
  including spaces (MediaWiki converts spaces to underscores automatically).
- "Loot" vs "Look" — your page title says "Loot Crate" but you typed "Look Crate".
  I've used "Loot" in the markup since that matches your page. Change if needed.
- If you don't know whether Tabber is installed, try Option 1 first — if the tabs
  don't render, fall back to Option 2 or 3.

Revision as of 15:04, 26 May 2026

================================================

OPTION 1 — Tabber (if the Tabber extension is installed) This is the cleanest "pick which to view" UI.

================================================

Lightforge Loot Crate

<tabber> Wishland Wonder=

Description of Wishland Wonder goes here. |-| Item Two= File:Item Two.jpg

Description of Item Two. |-| Item Three= File:Item Three.jpg

Description of Item Three. </tabber>


================================================

OPTION 2 — Native collapsible dropdown (always works in MediaWiki, no extension needed) Click the header to expand; each item shows its image inline.

================================================
Lightforge Loot Crate


================================================

OPTION 3 — Custom toggle "picker" (one button per item, each reveals its own block) Acts most like a true dropdown selector.

================================================
Wishland Wonder
Item Two
Item Three

Wishland Wonder description.

File:Item Two.jpg Item Two description.

File:Item Three.jpg Item Three description.


================================================

NOTES

================================================

- Paste into the SOURCE editor (not Visual editor), or it may mangle the markup. - Image names are case-sensitive and must match the uploaded filename exactly, 

 including spaces (MediaWiki converts spaces to underscores automatically).

- "Loot" vs "Look" — your page title says "Loot Crate" but you typed "Look Crate". 

 I've used "Loot" in the markup since that matches your page. Change if needed.

- If you don't know whether Tabber is installed, try Option 1 first — if the tabs 

 don't render, fall back to Option 2 or 3.
Retrieved from "https://ohwikiguide.com/index.php?title=Lightforge_Loot_Crate&oldid=1303"