Infoboxes portátiles/Consejos y sugerencias

Esta página incluye consejos, sugerencias, fragmentos, CSS y hacks para las infoboxes portátiles. Asegúrate de leer las páginas de ayuda de CSS y etiquetas para entender cómo cada elemento se puede utilizar.

Convirtiendo infoboxes

  Main article: Infobox/Converting

Funciones parser

Las funciones parser, además de las Lua, se pueden usar dentro de los tags can be <default> ó <format>, además de aceptar el uso del wikitexto. Sin embargo, éstas funciones no deben usarse fuera de los tags, ya que pueden evitar que se muestren las infoboxes.

Navegación opcional

Aunque los tags <navigation> no tienen tags de <default> ó <format> puedes usar las variables para mostrarlas solo cuando un parámetro está especificado, o cuando tiene un valor específico. El primer ejemplo que se muestra abajo usa la función parser #ifeq para verificar si el parámetro de "showgallery" estaba configurado.

<navigation>
{{#ifeq: {{{showgallery}}} | yes | [[Main Page|Gallery]] |}}
</navigation>

<navigation>
{{#if: {{{showgallery|}}} | [[Main Page|Gallery]] |}}
</navigation>

Colapsando

Colapsar es sencillo
Información colapsada (u ocultada)

<infobox>
<group collapse="closed"> <header>Colapsar es sencillo</header>
<data> <default> Información colapsada (u ocultada) </default></data>
</group>
</infobox>

Comentar

Las infoboxes portátiles usan xml, así que las reglas normales para comentarios no les aplican exactamente. Un truco para esconder partes o añadir comentarios es usar algo como:

<infobox> 
<group >
<header>Tony stark </header>
<data><default>Máquina de guerra</default></data>
<data><default>Iron Man</default></data>
 <!--comment>
Esta parte está escondida
<header>Hope</header>
<data><default>Dark Goddess </default></data>
<data><default>Lady death</default></data>
</comment-->
</group>
</infobox>

Dando formato

Aquí mostramos algunos de los códigos que los admins pueden insertar en el CSS de su wiki. Para más información, vea CSS.

Formato del texto

Es común querer centrar el texto, que se puede hacer usando CSS (ver aquí). El formato de la información se puede hacer usando código como éste :

.portable-infobox .pi-data {
  height: 10em;  /*establece la altura*/
  display: flex; 
  align-items: center; /*alinea los elementos o texto verticalmente*/
  justify-content: center ; /*alinea los elementos o texto horizontalmente*/
}

Evitando el word-wrap

Se puede evitar usando el CSS:

.portable-infobox .pi-data-label { 
   flex-basis: 120px;
}

Formato de la imagen

Cambiando de tamaño automáticamente

.pi-theme-name .pi-image-thumbnail {

   width: 100%;
   height:auto;

}

En infoboxes con tamaños distintos

Si usas un tamaño irregular para tu infobox (via .pi-theme-name { width: 123px; }), también vas a necesitar cambiar el tamaño de las imágenes en el CSS. Esto se puede hacer via el .pi-image-thumbnail, como:

.pi-theme-name .pi-image-thumbnail {
    max-width: 123px; // Típicamente, usa el mismo ancho que tu infobox, menos los bordes 
    height: auto; // Conserva el ratio de la imagen 
}

Sin embargo, al hacer el cambio las imágenes pueden resultar mucho más grandes de lo esperado. Si no las necesitas para rellenar el ancho de la infobox, también puedes limitar la altura de la misma manera para asegurarte que ningún valor se excede y que la proporción de la imagen se mantiene:

.pi-theme-name .pi-image-thumbnail {
    max-width: 123px;
    max-height: 123px;
    width: auto;
    height: auto;
}

Formato del título

Personalizar el texto del título es similar a personalizar cualquier otro texto. Por ejemplo:

.pi-theme-name .pi-title {
    font-family:formalscrp421 bt;
    font-weight:bold;
    color:blue;
}

hace que los títulos de todos los infoboxes en la wiki se vean así.

Referencias

[[[de:Portable Infoboxen/Tipps und Tricks]]