Comunidad Central
Advertisement
Comunidad Central

Una infobox parecida a las infoboxes convencionales, pero con algunos retoques estéticos hechos a través de CSS.

Las infoboxes portátiles pueden recibir temas y diseños en la vista de escritorio de forma simple por los administradores de un wiki usando el CSS comunitario.

Por defecto, la tematización de las infoboxes portátiles toma apuntes de las configuraciones del Diseñador de Temas de su comunidad, particularmente del color en el fondo del artículo y el color del enlace.

Modificar una infobox a través de CSS permite una mayor amplitud de cambios y posibilidades, aunque muchos cambios pueden sobrecomplicarla. Por lo tanto, es mejor realizar diseños simples que no modifiquen demasiado una característica (por ejemplo, el ancho) y en su lugar se enfoquen en la parte estética.

Temas y tipos de infoboxes

El tema por defecto de la infobox se puede sobrescribir a través del CSS comunitario local, utilizando los atributos type, theme o theme-source en la etiqueta <infobox>, lo que hace sencillo apuntar a infoboxes específicas usando clases.

  • El atributo type se usa para especificar un tipo lógico (lo que la infobox describe), pero también puede usarse como una clase CSS.
  • El atributo theme se usa para especificar una clase CSS personalizada para la infobox.
  • El atributo theme-source te permite variar la clase CSS a través de un parámetro de plantilla.

Usando type

Por ejemplo, type="personaje" añadirá una clase llamada type-personaje al HTML de la infobox, lo que puede ser personalizado por CSS:

Código de plantilla
<infobox type="personaje">
  ...
</infobox>
CSS a usar
.portable-infobox.type-personaje {
   ...
}

Por ejemplo, el código abajo puede ser usado entonces para cambiar el color de fondo secundario (el color de fondo para los títulos y encabezados de la infobox) de todas las infoboxes de personaje a color marrón:

.portable-infobox.type-personaje .pi-secondary-background {
    background-color: maroon;
}

Usando theme

Por ejemplo, theme="delta" añadirá una clase llamada pi-theme-delta al HTML de la infobox, lo que puede ser personalizado por CSS:

Código de plantilla
<infobox theme="delta">
  ...
</infobox>
CSS a usar
.portable-infobox.pi-theme-delta {
   ...
}

Por ejemplo, el código abajo puede ser usado entonces para cambiar el color de fondo secundario de todas las infoboxes de tema delta a azul marino:

.portable-infobox.pi-theme-delta .pi-secondary-background {
    background-color: #000080;
}

Si se deja theme= sin especificar, por defecto será theme="wikia" y se añadirá la clase pi-theme-wikia a la infobox.

Usando theme-source

Por ejemplo, theme-source="ubicación" significa que, cuando ubicación es especificado en el artículo de una infobox, esta utilizará su valor como la clase.

Por ejemplo:

Código de plantilla
<infobox theme-source="ubicación">
   ...
</infobox>
Código en artículo
{{InfoboxUbicación
 | ubicación = Desierto
}}
CSS a usar
.portable-infobox.pi-theme-Desierto {
   ...
}

Si quieres cambiar el color de fondo secundario de las infoboxes que tengan ubicaciones en desiertos a un verde claro, podrías hacer algo como esto:

.portable-infobox.pi-theme-Desierto .pi-secondary-background {
    background-color: #6dd17d;
}

Nótese que los nombres de clase diferencian entre mayúsculas y minúsculas (Desierto no sería lo mismo que desierto), así que ten cuidado con lo que permites que los usuarios ingresen como el valor del parámetro theme-source. En el caso arriba, un valor como "desierto" no ejecutaría los cambios de estilo deseados.

Notas de tema avanzadas

  • Si tanto theme como theme-source son usados, ambos proporcionarán propiedades CSS.
  • Los espacios en los valores de theme y theme-source se convierten en guiones (-), lo que significa que solo se puede agregar una sola clase.
  • Si no se especifica ningún tema, se añadirá pi-theme-wikia en su lugar.

Clases principales

Estas clases te ayudan a actualizar el estilo de etiquetas específicas:

Título
.pi-title
Encabezado
.pi-header
Navegación
.pi-navigation
Grupo
.pi-group
Etiqueta de datos
.pi-data
Valor de datos
.pi-data-value
Etiquetado de datos
.pi-data-label
Imagen
.pi-image
Subtítulo de imagen
.pi-caption
Galería de imagen
.pi-image-collection
Elemento de pestaña de panel
wds-tabs__wrapper
Grupo de pestaña de panel
wds-tabs
Pestaña de panel
wds-tabs__tab
Contenido de pestaña de panel
wds-tab__content

Clases ayudantes

Las infoboxes portátiles contienen varias clases ayudantes específicas para diseños que te ayudarán a actualizar fácilmente el estilo:

Fondo de infobox en general
.pi-background
Fondo de título y encabezado
.pi-secondary-background
Estilo de letra de valor de datos
.pi-font
Estilo de letra de encabezado, etiquetado de datos y navegación
.pi-secondary-font
Relleno alrededor de cada elemento de infobox (título, encabezado y cada par de datos/etiquetados)
.pi-item-spacing
Color de borde de elemento de infobox (infobox completa, subtítulos, grupos, pares de datos/etiquetados y grupos de contenido de pestañas)
.pi-border-color

Nota: esta no es una lista exhaustiva de clases disponibles; hay más clases en la página Ayuda:Infoboxes/Etiquetas.

Muestras de fragmentos de código

Cambia el ancho de la infobox:

.portable-infobox {
   width: 300px;
}

Cambia el color del fondo de la infobox:

.portable-infobox.pi-background {
   background-color: #ff0000;
}

Cambia el fondo del encabezado y de la navegación de la infobox:

.portable-infobox .pi-secondary-background {
   background-color: #00ff00;
}

Cambia el color de borde de los elementos de la infobox:

.portable-infobox .pi-border-color {
   border-color: #00ff00;
}

Cambia el relleno de los elementos de la infobox:

.portable-infobox .pi-item-spacing {
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
}

Cambia el tamaño de la letra de los valores de datos de la infobox:

.portable-infobox .pi-font {
   font-size: 16px;
}

Cambia el tamaño de la letra de los valores de encabezados, etiquetados y navegación de la infobox:

.portable-infobox .pi-secondary-font {
   font-size: 18px;
}

Cambia el tamaño de la letra del título de la infobox:

.portable-infobox .pi-title {
   font-size: 24px;
}

Cambia el ancho de la columna de etiquetados:

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

Selecciona el tema personalizado "oblivion", luego cambia el tamaño de la letra del subtítulo:

.portable-infobox.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}

Cambia el color de fondo de las pestañas para imágenes:

.portable-infobox .wds-tabs__tab {
   background-color: green;
}

Avanzado

Normalmente, si necesita cambiar el estilo de un tema en específico necesitarás escribir algo así:

.portable-infobox.pi-theme-name .pi-secondary-background {
   background-color:#334;
}

Sin embargo, cuando una clase CSS está en el mismo elemento que otra y hay que seleccionar para ambas, no dejes espacio entre las clases. Por ejemplo, .pi-background está en el mismo elemento <aside> que la clase del tema (.pi-theme-name) y la clase general de infobox portátil (.portable-infobox), así el CSS que cambia el fondo para ese tema será:

.portable-infobox.pi-theme-name.pi-background {
   background-color:#334;
}

Se pueden tematizar elementos individuales de manera independiente usando atributos de datos como selectores. Por ejemplo, todos los elementos de infobox portátil que tengan una entrada de source ahora se representarán en HTML con ese nombre de parámetro en un atributo de datos, como data-source="ATK". Esto te permitirá escribir selectores de CSS o jQuery como .pi-item[data-source=ATK] para diseñar e identificar elementos individuales. Usado en combinación con type, esto debería eliminar la necesidad de seleccionar el estilo nth-of-type y abre otras posibilidades para el diseño y la interactividad.

El atributo de nombre en un elemento permite la selección explícita de elementos, ya sea que acepten una fuente de entrada o no, incluida la identificación de <title>, <group>, <data>, <header>, <image>, y <navigation>. Al igual que el atributo de datos data-source, <data name="bar"> se puede seleccionar como .pi-item[data-item-name=bar].

Véase también

  • Ayuda:Infoboxes/Editando - Guía básica sobre el editor de infoboxes portátiles.
  • Ayuda:Infoboxes/Etiquetas - Lista detallada de todas las opciones estándar disponibles para infoboxes portátiles, incluyendo ejemplos de wikitexto para usar y su salida en HTML.
  • Hub de portabilidad - Guías y ejemplos sobre cómo trasladar, personalizar y colocar un tema a tus infoboxes.

Ayuda y comentarios

Advertisement