Difference between revisions of "Template:NPCs"
Jump to navigation
Jump to search
| Line 22: | Line 22: | ||
<style> | <style> | ||
.npc-grid-container { | .npc-grid-container { | ||
| − | display: | + | display: flex; |
| − | + | flex-wrap: wrap; | |
| − | + | justify-content: flex-start; | |
| − | + | align-items: flex-start; | |
| + | margin: -5px; /* Compensate for item margins */ | ||
} | } | ||
| − | .npc-grid-container .mainpage-contents.tile-row { | + | .npc-grid-container > .mainpage-contents.tile-row { |
width: 150px; | width: 150px; | ||
| − | margin: 0; | + | margin: 5px; |
| + | flex: 0 0 150px; | ||
| + | box-sizing: border-box; | ||
} | } | ||
| + | /* Ensure content alignment */ | ||
.npc-grid-container .contents-equipment.tile-halves { | .npc-grid-container .contents-equipment.tile-halves { | ||
width: 100%; | width: 100%; | ||
| − | + | text-align: center; | |
| − | + | } | |
| − | + | ||
| + | /* Remove nested containers that could cause layout issues */ | ||
| + | .npc-grid-container .mainpage-contents.tile-row .mainpage-contents.tile-row { | ||
| + | width: 100%; | ||
| + | margin: 0; | ||
| + | flex: none; | ||
} | } | ||
| − | .npc-grid-container .tile-image { | + | /* Ensure images are centered */ |
| + | .npc-grid-container .tile-top.tile-image { | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
</style> | </style> | ||
__NOTOC__ | __NOTOC__ | ||
</includeonly><noinclude> | </includeonly><noinclude> | ||
| − | Este template serve como um contêiner para exibir vários NPCs em | + | Este template serve como um contêiner para exibir vários NPCs lado a lado em linhas. |
Use-o da seguinte forma: | Use-o da seguinte forma: | ||
{{NPCs| | {{NPCs| | ||
Revision as of 13:22, 2 May 2025
Este template serve como um contêiner para exibir vários NPCs lado a lado em linhas. Use-o da seguinte forma:
<style> .npc-grid-container {
display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; margin: -5px; /* Compensate for item margins */
}
.npc-grid-container > .mainpage-contents.tile-row {
width: 150px; margin: 5px; flex: 0 0 150px; box-sizing: border-box;
}
/* Ensure content alignment */ .npc-grid-container .contents-equipment.tile-halves {
width: 100%; text-align: center;
}
/* Remove nested containers that could cause layout issues */ .npc-grid-container .mainpage-contents.tile-row .mainpage-contents.tile-row {
width: 100%; margin: 0; flex: none;
}
/* Ensure images are centered */ .npc-grid-container .tile-top.tile-image {
display: flex; justify-content: center;
} </style>
Certifique-se de separar cada
com um pipe (|) e não adicionar pipe após o último NPC.