Toggle search
Toggle menu
3.2K
2.8K
4
30.3K
HytaleWiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:RecipeBlock: Difference between revisions

Template page
More actions
← Older edit
undoHytalewiki (talk | contribs)
Bureaucrats, Interface administrators, Administrators
26,738 edits
VisualWikitext
Undo revision 5858 by Hytalewiki (talk)
Tag: Undo
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="display:{{#if:{{{image|}}}|block|none}}; text-align:center" class="item-image">
<div class="recipe-container">
[[File:{{{image}}}|64px]]
  <h3 class="recipe-header">Crafting Recipe</h3>
</div>
<div style="display:{{#if:{{{categories|}}}|block|none}};" class="item-section">
<b>Categories:</b> {{{categories}}}
</div>
<div style="display:{{#if:{{{consumable|}}}|block|none}};" class="item-section">
<b>Consumable:</b> {{{consumable}}}
</div>
<div style="display:{{#if:{{{maxstack|}}}|block|none}};" class="item-section">
<b>Max Stack:</b> {{{maxstack}}}
</div>
<div style="display:{{#if:{{{dropondeath|}}}|block|none}};" class="item-section">
<b>Drop On Death:</b> {{{dropondeath}}}
</div>


quiero pasar eso a una wikitable
   <div class="recipe-grid">
20:20
 
Aquí tienes el código convertido a una wikitable:
html
 
{| class="wikitable"
{{#if:{{{image|}}}|
{{!}} style="text-align:center" {{!}} [[File:{{{image}}}|64px]]
{{!}}-
}}
{{#if:{{{categories|}}}|
! Categories:
{{!}} {{{categories}}}
{{!}}-
}}
{{#if:{{{consumable|}}}|
! Consumable:
{{!}} {{{consumable}}}
{{!}}-
}}
{{#if:{{{maxstack|}}}|
! Max Stack:
{{!}} {{{maxstack}}}
{{!}}-
}}
{{#if:{{{dropondeath|}}}|
! Drop On Death:
{{!}} {{{dropondeath}}}
}}
|}
 
Cambios principales:
 
    {| y |} delimitan la tabla
    {{!}} se usa en lugar de | dentro de las condiciones #if
    ! para las celdas de encabezado (etiquetas en negrita)
    {{!}}- para separar las filas
    La imagen se mantiene en su propia fila con colspan implícito
 
Si prefieres que las etiquetas y valores estén en columnas separadas de manera más consistente, o si quieres ajustar el estilo, dime y lo modifico.
 
Quiero añadirle el nombre encima de la imagen
20:24
 
Aquí tienes el código con el nombre añadido encima de la imagen:
html
 
{| class="wikitable"
{{#if:{{{name|}}}|
! colspan="2" style="text-align:center" {{!}} {{{name}}}
{{!}}-
}}
{{#if:{{{image|}}}|
{{!}} colspan="2" style="text-align:center" {{!}} [[File:{{{image}}}|64px]]
{{!}}-
}}
{{#if:{{{categories|}}}|
! Categories:
{{!}} {{{categories}}}
{{!}}-
}}
{{#if:{{{consumable|}}}|
! Consumable:
{{!}} {{{consumable}}}
{{!}}-
}}
{{#if:{{{maxstack|}}}|
! Max Stack:
{{!}} {{{maxstack}}}
{{!}}-
}}
{{#if:{{{dropondeath|}}}|
! Drop On Death:
{{!}} {{{dropondeath}}}
}}
|}
 
Cambios:
 
    Añadido el parámetro {{{name}}} en la primera fila
    Usado colspan="2" para que ocupe el ancho completo de la tabla
    Ambas filas (nombre e imagen) centradas y ocupando las dos columnas
 
Me gustaria que el texto del nombre fuese mas grande
20:26
 
Aquí tienes el código con el nombre en texto más grande:
html
 
{| class="wikitable"
{{#if:{{{name|}}}|
! colspan="2" style="text-align:center; font-size:1.5em" {{!}} {{{name}}}
{{!}}-
}}
{{#if:{{{image|}}}|
{{!}} colspan="2" style="text-align:center" {{!}} [[File:{{{image}}}|64px]]
{{!}}-
}}
{{#if:{{{categories|}}}|
! Categories:
{{!}} {{{categories}}}
{{!}}-
}}
{{#if:{{{consumable|}}}|
! Consumable:
{{!}} {{{consumable}}}
{{!}}-
}}
{{#if:{{{maxstack|}}}|
! Max Stack:
{{!}} {{{maxstack}}}
{{!}}-
}}
{{#if:{{{dropondeath|}}}|
! Drop On Death:
{{!}} {{{dropondeath}}}
}}
|}
 
Cambio:
 
    Añadido font-size:1.5em al estilo del nombre para hacerlo 1.5 veces más grande
 
Si quieres que sea aún más grande, puedes cambiar el valor a 2em o 2.5em según prefieras.
 
<metadesc>Info about the Cobalt Pickaxe item on Hytale</metadesc>
{{ItemPage
|Name=Cobalt Pickaxe
|Icon=Tool_Pickaxe_Cobalt.png
|Description=
|Quote=
|Categories=
|Tags=None
|Consumable=False
|MaxStack=
|DropOnDeath=
|MaxDurability=300.0
|Armor=
|Tool={{ToolBlock
| gatherings = {{GatheringPowerRow|SoftBlocks|1}}
{{GatheringPowerRow|Soils|0.5}}
{{GatheringPowerRow|Woods|0.05}}
{{GatheringPowerRow|Rocks|0.5}}
{{GatheringPowerRow|Benches|0.5}}
{{GatheringPowerRow|VolcanicRocks|0.17}}
| durability = <div class="item-section"><b>Durability loss:</b> Stone, Rock, Ores, Soil → 0.25</div>
}}
|Recipe={{RecipeBlock
| ingredients = {{RecipeRow|File:Ingredient_Bar_Cobalt.png|Cobalt Ingot|7}}
{{RecipeRow|File:Ingredient_Leather_Heavy.png|Heavy Leather|2}}
{{RecipeRow|File:Ingredient_Fabric_Scrap_Shadoweave.png|Shadoweave Scraps|4}}
| bench = Workbench
| tier = None
| time = 4 seconds
| requirements = None
}}
|Weapon=
}}
 
que mejoras visuales me propones para esta pagina?
20:27
 
Aquí te propongo varias mejoras visuales para la página:
1. Sección de Estadísticas Principales
 
Añadir una caja destacada con las stats clave del item justo después del infobox:
 
    Durabilidad máxima: 300
    Tipo: Herramienta
    Nivel/Tier del material
 
2. Tabla de Gathering Power más visual
 
En lugar de solo listar los valores, usar barras de progreso o iconos:
 
    Usar colores (verde para alto, amarillo para medio, rojo para bajo)
    Añadir iconos para cada tipo de bloque
    Mostrar porcentajes o valores comparativos
 
3. Sección de Comparación
 
Añadir una tabla comparativa con otros picos del mismo tier o similares:
 
| Pickaxe        | Durability | Rock Speed | Cost  |
|----------------|------------|------------|-------|
| Cobalt Pickaxe | 300        | 0.5        | 7 ing |
| Iron Pickaxe   | ...        | ...        | ...  |
 
4. Galería de imágenes
 
Si tienes sprites o capturas:
 
    El item en inventario
    El item equipado
    Animación de minado (si aplica)
 
5. Sección "Cómo obtener"
 
Además de la receta, añadir:
 
    Dónde encontrar los materiales
    Alternativas de obtención (drops, comercio, etc.)
 
6. Tips y notas
 
    Cuándo conviene craftear este pico
    Para qué minerales es óptimo
    Comparación coste/beneficio
 
¿Te gustaría que desarrolle alguna de estas propuestas en código concreto?
 
Creame la pagina con esas mejoras
20:27
Cobalt Pickaxe - Enhanced Wiki Page
Documento
 
He creado una versión mejorada de la página con las siguientes mejoras visuales:
✨ Mejoras Implementadas:
 
    Overview Section - Introducción descriptiva del item
    Key Statistics Table - Tabla resumen con las stats principales y cálculos útiles (usos antes de romperse)
    Gathering Power Analysis - Tabla con colores y ratings visuales:
        Verde para excelente
        Dorado para bueno
        Naranja para aceptable
        Rojo para pobre
    Comparison Table - Compara el Cobalt Pickaxe con otros picos del juego (ordenable)
    Crafting Guide Expandida:
        Tabla con "Cómo Obtener" cada material
        Proceso paso a paso
    Usage Tips Section - Caja destacada con consejos prácticos:
        Cuándo usarlo
        Gestión de durabilidad
        Análisis coste/beneficio
    Obtaining Materials - Guía detallada de dónde conseguir cada ingrediente
    Gallery Section - Espacio para imágenes del item
    Additional Sections:
        Trivia
        See Also con links relacionados
        Categorías apropiadas
 
Nota: He usado algunos templates como {{ProgressBar}} que necesitarás crear en tu wiki para las barras de progreso visuales. Si no los tienes, puedo mostrarte versiones alternativas con HTML/CSS básico.
 
<div class="recipe-visual" style="display:flex; flex-wrap:wrap; align-items:flex-start; gap:1em; padding:1em; margin-top:1em;">
<!-- Ingredients -->
<div style="flex:1; min-width:250px;">
<table style="width:100%; border-collapse:collapse;">
<tr>
  <th style="text-align:left; padding:4px; width:32px">Icon</th>
  <th style="text-align:left; padding:4px;">Material</th>
  <th style="text-align:right; padding:4px;">Quantity</th>
</tr>
{{{ingredients}}}
</table>
<!-- Bench / Tier -->
<div style="margin-top:1em; font-size:90%;">
<span style="font-weight:bold;">Workbench:</span> [[{{{bench}}}]]<br/>
<span style="font-weight:bold;">Required Tier:</span> {{{tier}}}<br/>
<span style="font-weight:bold;">Crafting Time:</span> {{{time}}}<br/>
<span style="font-weight:bold;">Requirements:</span> {{{requirements}}}
</div>
</div>
</div>
 
Se ve así, hazme una propuesta mejor
20:31
Improved Recipe Block Template
Código
 
He creado una versión mejorada del bloque de recetas con estas mejoras:
🎨 Mejoras Visuales:
 
    Diseño en 2 Columnas
        Ingredientes a la izquierda
        Detalles de crafteo a la derecha
        Layout má
 
¿Quieres recibir una notificación cuando Claude responda?
 
 
Claude es IA y puede cometer errores. Por favor, verifica las respuestas.
<div class="recipe-container" style="
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #0f4c75;
  border-radius: 12px;
  padding: 1.5em;
  margin: 1.5em 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
">
  <!-- Header -->
  <div style="
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 1.5em;
    padding-bottom: 0.75em;
    border-bottom: 2px solid #0f4c75;
  ">
    <span style="font-size: 1.5em;">🔨</span>
    <h3 style="margin: 0; color: #3498db; font-size: 1.3em;">Crafting Recipe</h3>
  </div>
 
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2em;">
      
      
     <!-- Left Column: Ingredients -->
     <!-- Left Column: Ingredients -->
     <div>
     <div>
       <h4 style="color: #3498db; margin-top: 0; margin-bottom: 1em; font-size: 1.1em;">
       <h4 class="recipe-section-title">📦 Required Materials</h4>
        📦 Required Materials
      </h4>
        
        
       <table style="width: 100%; border-collapse: separate; border-spacing: 0;">
       <table class="recipe-table">
         <thead>
         <tr class="recipe-table-header">
          <tr style="background: rgba(52, 152, 219, 0.1); border-bottom: 2px solid #0f4c75;">
          <th>Icon</th>
            <th style="padding: 8px; text-align: left; color: #3498db; width: 50px;">Icon</th>
          <th>Material</th>
            <th style="padding: 8px; text-align: left; color: #3498db;">Material</th>
          <th>Qty</th>
            <th style="padding: 8px; text-align: center; color: #3498db; width: 70px;">Qty</th>
        </tr>
          </tr>
         {{{ingredients}}}
         </thead>
        <tbody>
          {{{ingredients}}}
        </tbody>
       </table>
       </table>
     </div>
     </div>
Line 342: Line 20:
     <!-- Right Column: Crafting Info -->
     <!-- Right Column: Crafting Info -->
     <div>
     <div>
       <h4 style="color: #3498db; margin-top: 0; margin-bottom: 1em; font-size: 1.1em;">
       <h4 class="recipe-section-title">⚙️ Crafting Details</h4>
        ⚙️ Crafting Details
      </h4>
        
        
       <div style="background: rgba(15, 76, 117, 0.2); border-radius: 8px; padding: 1em;">
       <div class="crafting-details">
          
          
        <!-- Workbench -->
         <div class="detail-item">
         <div style="display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.75em; padding: 0.5em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;">
           <div class="detail-icon">{{{bench_icon}}}</div>
           <span style="font-size: 1.2em;">🔧</span>
           <div>
           <div>
             <div style="font-size: 0.85em; color: #95a5a6;">Workbench</div>
             <div class="detail-label">Workbench</div>
             <div style="font-weight: bold; color: #ecf0f1;">[[{{{bench}}}]]</div>
             <div class="detail-value">[[{{{bench}}}]]</div>
           </div>
           </div>
         </div>
         </div>


        <!-- Tier -->
         <div class="detail-item">
         <div style="display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.75em; padding: 0.5em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;">
           <div class="detail-icon">⭐</div>
           <span style="font-size: 1.2em;">⭐</span>
           <div>
           <div>
             <div style="font-size: 0.85em; color: #95a5a6;">Required Tier</div>
             <div class="detail-label">Workbench Tier</div>
             <div style="font-weight: bold; color: #ecf0f1;">{{{tier}}}</div>
             <div class="detail-value">{{{tier}}}</div>
           </div>
           </div>
         </div>
         </div>


        <!-- Time -->
         <div class="detail-item">
         <div style="display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.75em; padding: 0.5em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;">
           <div class="detail-icon">⏱️</div>
           <span style="font-size: 1.2em;">⏱️</span>
           <div>
           <div>
             <div style="font-size: 0.85em; color: #95a5a6;">Crafting Time</div>
             <div class="detail-label">Crafting Time</div>
             <div style="font-weight: bold; color: #ecf0f1;">{{{time}}}</div>
             <div class="detail-value">{{{time}}}</div>
           </div>
           </div>
         </div>
         </div>


        <!-- Requirements -->
         <div class="detail-item">
         <div style="display: flex; align-items: center; gap: 0.5em; padding: 0.5em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;">
           <div class="detail-icon">📋</div>
           <span style="font-size: 1.2em;">📋</span>
           <div>
           <div>
             <div style="font-size: 0.85em; color: #95a5a6;">Requirements</div>
             <div class="detail-label">Requirements</div>
             <div style="font-weight: bold; color: #ecf0f1;">{{{requirements}}}</div>
             <div class="detail-value">{{{requirements}}}</div>
           </div>
           </div>
         </div>
         </div>


      </div>
      <!-- Output Product (opcional) -->
      <div style="
        margin-top: 1em;
        padding: 1em;
        background: linear-gradient(135deg, rgba(46, 213, 115, 0.15), rgba(52, 152, 219, 0.15));
        border: 2px solid #2ecc71;
        border-radius: 8px;
        text-align: center;
      ">
        <div style="font-size: 0.85em; color: #95a5a6; margin-bottom: 0.5em;">Produces</div>
        <div style="font-weight: bold; color: #2ecc71; font-size: 1.1em;">1x Cobalt Pickaxe</div>
       </div>
       </div>
     </div>
     </div>

Latest revision as of 00:13, 19 January 2026

Crafting Recipe

📦 Required Materials

{{{ingredients}}}
Icon Material Qty

⚙️ Crafting Details

{{{bench_icon}}}
Workbench
[[{{{bench}}}]]
⭐
Workbench Tier
{{{tier}}}
⏱️
Crafting Time
{{{time}}}
📋
Requirements
{{{requirements}}}
Retrieved from "https://hytalewiki.info/index.php?title=Template:RecipeBlock&oldid=12494"