FANDOM


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 Editar

  Main article: Infobox/Converting

Funciones parser Editar

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 opcionalEditar

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 Editar

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

Comentar Editar

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 Editar

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 Editar

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 [1]:

.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-wrapEditar

Se puede evitar usando el CSS:

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

Formato de la imagen Editar

Cambiando de tamaño automáticamenteEditar

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

   width: 100%;
   height:auto;

} </pre>

En infoboxes con tamaños distintos Editar

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 Editar

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í.

ReferenciasEditar

  1. http://www.w3.org/Style/Examples/007/center.en.html