FANDOM


 

Las Infoboxes Portátiles pueden ser tematizadas de forma simple utilizando CSS personalizado.

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.

Tematización personalizada

El tema por defecto del infobox se puede sobrescribir utilizando los atributos del theme o theme-source de la etiqueta infobox, permitiendo decorar los infoboxes a través del CSS de la comunidad local.

  • El atributo theme se utiliza para especificar una clase de CSS personalizado para la infobox.
  • El atributo theme-source te permite variar la clase de CSS a través de un parámetro de plantilla.

Si se utilizan ambos atributos dentro de la etiqueta de la infobox, el atributo theme es considerado como el predeterminado.

Ten en cuenta que los espacios en los valores de theme y theme-source se convierten en (-), por lo que sólo puede añadirse una clase con ellos.

 

"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:

<infobox theme="delta">
  // contenidos de la infobox van aquí
</infobox>
.pi-theme-delta {
   // estilos de la infobox
}

El código presentado a continuación puede ser utilizado para cambiar el color secundario a rojo:

.pi-theme-delta .pi-secondary-background {
    background-color: #CF3D0C;
}

Si no se ha especificado el tema, se utilizará .pi-theme-wikia.

 

"Theme-source"

Por ejemplo, theme-source="location" significa que, cuando location es especificada en el artículo de una infobox, esta utilizará el valor value de este como la clase.

Por ejemplo:

<infobox theme-source="localización">
   ...
</infobox>
{{una infobox
 |localización =Africa
}}

El CSS para tematizar la plantilla será así

.portable-infobox.pi-theme-Africa {
   //estilos de la infobox
}

Si quieres apuntar elementos específicos dentro de la infobox, haría algo como lo mostrado a continuación:

.portable-infobox.pi-theme-Africa .pi-secondary-background {
   //estilos de la infobox
}

Clases de ayudantes

Las infoboxes portátiles contienen una variedad de clases de ayudantes específicos para diseños que ayudarán a actualizar fácilmente el estilo:

.pi-background
todo el fondo de la infobox
.pi-secondary-background
fondos del encabezado y la navegación
.pi-font
valor de la fuente del dato.
.pi-secondary-font
estilo de los encabezados, etiquetas y fuentes de navegación.
.pi-item-spacing
espacio de relleno alrededor de la infobox
.pi-border-color
colores de los bordes de los elementos de la infobox
.pi-collapse .pi-header::after
botón de colapsar encabezados de la infobox

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

Fragmentos con el mismo 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 encabezado de la infobox y el fondo de la navegación:

.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 valores del tamaño de letra de la data de la infobox:

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

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

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

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

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

Cambia el ancho de la columna de etiquetas:

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

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

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

Añadir un cursor de enlace a la flecha de colapsado:

.pi-collapse .pi-header::after {
	cursor: pointer;
}
 

Avanzado

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

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

Sin embargo, cuando una clase CSS está en el mismo elemento como otro y hay que seleccionar para ambos, no deje espacio entre las clases. Por ejemplo, .pi-background está en el mismo elemento <aside> como el 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á:

.pi-theme-name.pi-background {
   background-color:#334;
}
El contenido de la comunidad está disponible bajo CC-BY-SA a menos que se indique lo contrario.