Ayuda:Guía de estilos CSS
En esta página se van a ir documentando las clases CSS disponibles en WikiDex.net para dar estilos principalmente a plantillas y otros elementos, de forma que se pueda tener un mayor seguimiento de los estilos disponibles sin tener que leer el código directamente, y conocer su propósito. Esto facilitará reutilizar estilos y saber a qué afectan.
Ubicación de los estilos[editar código]
El código CSS de WikiDex reside principalmente en:
- MediaWiki:Common.css: Estilos generales para la versión de navegador de escritorio. No se usan ni en la Aplicación para Android ni en la versión móvil.
- MediaWiki:Monobook.css: Estilos específicos para la piel Monobook, aquí solo debería haber cosas específicas de la piel y no del contenido.
- MediaWiki:Vector.css: Estilos específicos para la piel Vector, aquí solo debería haber cosas específicas de la piel y no del contenido.
- MediaWiki:Mobile.css: Estilos generales para la versión de navegador móvil.
- MediaWiki:App/estilos.css: Estilos generales para la Aplicación para Android.
- MediaWiki:App/estilosdiurnos.css: Estilos específicos para la vista "diurna".
- MediaWiki:App/estilosnocturnos.css: Estilos específicos para la vista "nocturna".
Estilos de tablas[editar código]
- Clases para estilos:
wiki,lista,galeria,encabezado - Clases para alinear a la derecha, centro o izquierda el texto de columnas enteras:
col1der,col1cen,col1izq(1 es para la primera columna, se puede incrementar hasta 10)
Ver Ayuda:Guía de edición#Estilos predefinidos de tablas.
Temas[editar código]
La idea es que los colores generales de tablas y plantilla sea controlado por CSS. Para hacer más uniformes las combinaciones y facilitar su uso en varios sitios, se crearán temas, para especificar los colores base.
Para usarlos, se debe indicar el nombre del tema en el elemento principal que definirá la combinación de colores, con la clase theme-nombre_del_tema. Luego los colores de cada elemento se controlan con clases separadas en el elemento al que hay que cambiarle el color:
border-theme: Color de borde.bg-theme: Color de fondo.bg-theme-dark: Color de fondo (más oscuro)
Tema: wiki[editar código]
Similar al de tabla.
- Borde:
- Fondo:
- Fondo oscuro:
Aceleradores[editar código]
Padding[editar código]
Las celdas de las tablas por omisión tienen un padding de 2px respecto al borde de la celda para que el texto no quede pegado. Los elementos div no lo tienen y hay que aplicarlo manualmente en casos donde el borde sea visible. Con la conversión de diversas tablas en div, es de ayuda disponer de estos estilos.
Usar la clase cntpad (content padding) en el contenedor, y cnt (content) en los div que necesiten el padding. No se aplica a todos los div en general porque se usan muchos div para organizar otros elementos. La clase cnt es usada por otros estilos, por comodidad, por lo que puede tener efectos colaterales en combinación con otros estilos.
Ejemplos: Páginas de especies del TCG: Reshiram (TCG).
Alineación vertical[editar código]
En una tabla, el contenido de las celdas se puede alinear en el centro fácilmente con un estilo vertical-align:center;, pero esto que debería ser tan sencillo aplicarlo en div, no funciona. Para ello es necesario hacer que el div use flexbox, y hacer que el div hijo se sitúe centrado con un flex vertical. Si el contenido puede tener varios elementos, es necesario disponer de un div intermedio que será el que se posicione verticalmente. En caso contrario, los diferentes elementos quedarán en disposición vertical en vez de todos seguidos uno al lado de otro.
Usar la clase centrado-vertical en el contenedor, y usar un único div como elemento hijo, dentro del cual irá el contenido.
Ejemplos: Páginas de especies del TCG: Reshiram (TCG).
Texto centrado[editar código]
Para centrar el texto fácilmente, usar la clase center-text.
Emulación de tabla con div[editar código]
Bordes coloreados a partir del color de fondo[editar código]
Se puede conseguir el efecto de "tabla" con bordes, haciendo que el color de borde sea realmente el color de fondo del elemento contenedor, poniendo otro color de fondo en los elementos que formarían las "celdas" de la tabla (blanco por ejemplo) y dejando un margen entre las "celdas" de la tabla a través del cual se mostrará el color de fondo, haciendo de borde.
Usar la clase cntmrgn (content margin) en el contenedor, y la clase cnt (content) en los div que necesitan el margen. La clase cnt es usada por otros estilos, por comodidad, por lo que puede tener efectos colaterales en combinación con otros estilos.
La clase cntmrgn aplica 1px de margen, igual que la clase cnt, generando la sensación de bordes de 2px.
Para que las celdas tengan color blanco, usar la clase cntlight en el contenedor, y cnt aplicará un fondo blanco para distinguirlo de los bordes.
Ejemplos: Páginas de especies del TCG: Reshiram (TCG).
Bordes físicos finos[editar código]
Otra opción es implementar bordes físicos en solo unos lados de cada caja. Hay un caso donde está implementado, solo en bordes interiores para simular varias filas dentro de una fila real de una tabla.
Se usa con la clase emu-fila como contenedor, y emu-celda para cada elemento que representará una celda de la pseudo-tabla. La primera clase aplica el borde inferior, y la segunda el borde derecho, pero solo al primer elemento descendiente de la fila. Esto es así porque está hecho específicamente para Lista de Pokémon de Pokémon GO. Si se ha de usar en otros contextos seguramente se debería de pensar otra forma de hacerlo.
