Vorlage:MainMenuNpc: Unterschied zwischen den Versionen

Aus Lost Dreams Of Tomorrow Wiki
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
NeroReaver (Diskussion | Beiträge)
Bürokraten, Oberflächenadministratoren, Administratoren
403 Bearbeitungen
VisuellWikitext
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<div class="npc-grid-container">
/* ========================================
 
  CSS - In MediaWiki:Common.css einfügen
  <!-- Pre-Hardmode NPCs -->
  ======================================== */
  <div class="npc-category">Pre-Hardmode</div>
  <div class="npc-grid">
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Angler">
      </div>
      <div class="npc-name">Angler</div>
    </a>
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Arms Dealer">
      </div>
      <div class="npc-name">Arms Dealer</div>
    </a>
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Clothier">
      </div>
      <div class="npc-name">Clothier</div>
    </a>
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Demolitionist">
      </div>
      <div class="npc-name">Demolitionist</div>
    </a>
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Dryad">
      </div>
      <div class="npc-name">Dryad</div>
    </a>
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Dye Trader">
      </div>
      <div class="npc-name">Dye Trader</div>
    </a>


    <a href="#" class="npc-box">
.npc-grid-container {
      <div class="npc-image">
  max-width: 1200px;
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Goblin Tinkerer">
  margin: 0 auto;
      </div>
}
      <div class="npc-name">Goblin Tinkerer</div>
    </a>


    <a href="#" class="npc-box">
.npc-category {
      <div class="npc-image">
  font-size: 1.3em;
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Guide">
  font-weight: 600;
      </div>
  margin: 2em 0 0.8em 0;
      <div class="npc-name">Guide</div>
  color: #202122;
    </a>
  border-bottom: 1px solid #a2a9b1;
  padding-bottom: 0.3em;
}


    <a href="#" class="npc-box">
.npc-category:first-child {
      <div class="npc-image">
  margin-top: 0;
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Merchant">
}
      </div>
      <div class="npc-name">Merchant</div>
    </a>


    <a href="#" class="npc-box">
.npc-grid {
      <div class="npc-image">
   display: grid;
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Nurse">
   grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      </div>
  gap: 1em;
      <div class="npc-name">Nurse</div>
  margin-bottom: 2em;
    </a>
}
   
  </div>
    
   <!-- Hardmode NPCs -->
  <div class="npc-category">Hardmode</div>
  <div class="npc-grid">
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Cyborg">
      </div>
      <div class="npc-name">Cyborg</div>
    </a>
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Pirate">
      </div>
      <div class="npc-name">Pirate</div>
    </a>
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Princess">
      </div>
      <div class="npc-name">Princess</div>
    </a>
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Santa Claus">
      </div>
      <div class="npc-name">Santa Claus</div>
    </a>
   
    <a href="#" class="npc-box">
      <div class="npc-image">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Steampunker">
      </div>
      <div class="npc-name">Steampunker</div>
    </a>


    <a href="#" class="npc-box">
.npc-box {
      <div class="npc-image">
  display: flex;
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Truffle">
  flex-direction: column;
      </div>
  align-items: center;
      <div class="npc-name">Truffle</div>
  text-decoration: none;
    </a>
  color: #202122;
}


    <a href="#" class="npc-box">
.npc-box:hover {
      <div class="npc-image">
  opacity: 0.7;
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect fill='%23a2a9b1' width='48' height='48'/%3E%3C/svg%3E" alt="Wizard">
}
      </div>
 
      <div class="npc-name">Wizard</div>
.npc-image {
    </a>
  width: 48px;
   
  height: 48px;
  </div>
  background: #eaecf0;
 
  border: 1px solid #a2a9b1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4em;
}
 
.npc-image img,
.npc-image .image img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}
 
.npc-name {
  font-size: 0.85em;
  text-align: center;
  line-height: 1.3;
  color: #202122;
  height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
 
 
/* ========================================
  TEMPLATE: NPC Box
  Erstelle: Template:NPC_Box
  ======================================== */
 
<includeonly>[[{{{link|{{{name}}}}}}|<div class="npc-box">
<div class="npc-image">[[Datei:{{{image|{{{name}}}.png}}}|48px]]</div>
<div class="npc-name">{{{name}}}</div>
</div>]]</includeonly><noinclude>
== Verwendung ==
<pre>
{{NPC Box
|name=Angler
|image=Angler.png
|link=Angler (optional)
}}
</pre>
[[Kategorie:Vorlagen]]
</noinclude>
 
 
/* ========================================
  TEMPLATE: NPC Grid
  Erstelle: Template:NPC_Grid
  ======================================== */
 
<includeonly><div class="npc-grid-container">
 
<div class="npc-category">Pre-Hardmode</div>
<div class="npc-grid">
{{NPC Box|name=Angler|image=Angler.png}}
{{NPC Box|name=Arms Dealer|image=Arms Dealer.png}}
{{NPC Box|name=Clothier|image=Clothier.png}}
{{NPC Box|name=Demolitionist|image=Demolitionist.png}}
{{NPC Box|name=Dryad|image=Dryad.png}}
{{NPC Box|name=Dye Trader|image=Dye Trader.png}}
{{NPC Box|name=Goblin Tinkerer|image=Goblin Tinkerer.png}}
{{NPC Box|name=Guide|image=Guide.png}}
{{NPC Box|name=Merchant|image=Merchant.png}}
{{NPC Box|name=Nurse|image=Nurse.png}}
{{NPC Box|name=Painter|image=Painter.png}}
{{NPC Box|name=Party Girl|image=Party Girl.png}}
{{NPC Box|name=Stylist|image=Stylist.png}}
{{NPC Box|name=Tavernkeep|image=Tavernkeep.png}}
{{NPC Box|name=Tax Collector|image=Tax Collector.png}}
{{NPC Box|name=Witch Doctor|image=Witch Doctor.png}}
{{NPC Box|name=Zoologist|image=Zoologist.png}}
</div>
</div>
<div class="npc-category">Hardmode</div>
<div class="npc-grid">
{{NPC Box|name=Cyborg|image=Cyborg.png}}
{{NPC Box|name=Pirate|image=Pirate.png}}
{{NPC Box|name=Princess|image=Princess.png}}
{{NPC Box|name=Santa Claus|image=Santa Claus.png}}
{{NPC Box|name=Steampunker|image=Steampunker.png}}
{{NPC Box|name=Truffle|image=Truffle.png}}
{{NPC Box|name=Wizard|image=Wizard.png}}
</div>
</div></includeonly><noinclude>
== Verwendung ==
Füge einfach <code><nowiki>{{NPC Grid}}</nowiki></code> auf der Seite ein.
Um NPCs hinzuzufügen oder zu ändern, bearbeite dieses Template.
[[Kategorie:Vorlagen]]
</noinclude>

Version vom 11. Januar 2026, 18:18 Uhr

/* ======================================== 

  CSS - In MediaWiki:Common.css einfügen
  ======================================== */

.npc-grid-container { 

 max-width: 1200px;
 margin: 0 auto;

}

.npc-category { 

 font-size: 1.3em;
 font-weight: 600;
 margin: 2em 0 0.8em 0;
 color: #202122;
 border-bottom: 1px solid #a2a9b1;
 padding-bottom: 0.3em;

}

.npc-category:first-child { 

 margin-top: 0;

}

.npc-grid { 

 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
 gap: 1em;
 margin-bottom: 2em;

}

.npc-box { 

 display: flex;
 flex-direction: column;
 align-items: center;
 text-decoration: none;
 color: #202122;

}

.npc-box:hover { 

 opacity: 0.7;

}

.npc-image { 

 width: 48px;
 height: 48px;
 background: #eaecf0;
 border: 1px solid #a2a9b1;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 0.4em;

}

.npc-image img, .npc-image .image img { 

 max-width: 100%;
 max-height: 100%;
 image-rendering: pixelated;

}

.npc-name { 

 font-size: 0.85em;
 text-align: center;
 line-height: 1.3;
 color: #202122;
 height: 2.6em;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;

}


/* ======================================== 

  TEMPLATE: NPC Box
  Erstelle: Template:NPC_Box
  ======================================== */


Verwendung

{{NPC Box
|name=Angler
|image=Angler.png
|link=Angler (optional)
}}


/* ======================================== 

  TEMPLATE: NPC Grid
  Erstelle: Template:NPC_Grid
  ======================================== */


Verwendung

Füge einfach {{NPC Grid}} auf der Seite ein.

Um NPCs hinzuzufügen oder zu ändern, bearbeite dieses Template.

Abgerufen von „https://lostdreamsoftomorrow.wiki/index.php?title=Vorlage:MainMenuNpc&oldid=195“