A veces da terror ver semejante cosa, pero para eso hice este blog, para sacarse los miedos :)
¡Hola de nuevo!
Soy Benfutbol10, Giovi o (como muchos me conocen, jaja) "el chico del CSS". ¿Por qué de esta manera? Porque siempre ando personalizando una cosa u otra con CSS, haciendo que las cosas se vean mejor o agregando funciones nuevas a las comunidades.
¿Qué es el CSS?[]
Es algo que se habla siempre y las respuestas que a veces dan no nos resuelven nuestras dudas.
- El CSS (siglas de Cascade Style Sheets, Hoja de estilos en cascada en español) es un lenguaje de estilos, de diseño, de formato, de documentos HTML (lo que sería una simple página). Está compuesto por "reglas" que se les da a los elementos de una página (bloques, imágenes, párrafos) para darles el estilo.
A tener en cuenta:
- Con el CSS es posible personalizar cualquier wikia más allá del Diseñador de Temas.
- Para que las reglas tengan efecto en tu comunidad, deben ser insertadas en la página MediaWiki:Wikia.css de tu comunidad.
- Antes de comenzar a adentrarte en el mundo del CSS, te recomiendo que actives PortableCSSPad (en inglés), creado por Mathmagician. Esto agrega una opción extra a la barra flotante de Wikia, permitiendo probar las reglas y nuevos estilos desde ahí antes de guardarlo mediante un borrador.
Reglas[]
Una regla está compuesta por uno o varios selectores y un "bloque de estilo" a aplicar a los elementos.
- Selector: Es a lo que le vamos a dar el estilo. Puede ser una clase, un ID, un elemento específico...
- Propiedad: Básicamente sería el aspecto a cambiar del estilo (borde, sombreado, margen, fondo, color de texto...)
- Valor: Es la forma que va a tomar el selector.
El formato de una regla es la siguiente:
selector {
propiedad:valor;
}
Selectores[]
Cómo se puede ver, el selector engloba el estilo que le aplicamos. Veamos con un ejemplo que sirve:
- Tengo muchas plantillas en mi wikia y quiero hacer que todas tengan el mismo estilo.
- El estilo, que tenga un fondo verde, borde negro y bordes redondeados.
Para eso, a cada plantilla tenemos que asignarle algo para que tengan en común. Acá es donde entran en juego los selectores:
- Elemento: Es el objeto en sí, por ejemplo, el elemento de la imagen es "img", el de un link: "a", el de un bloque: "div". Simplemente llevan el nombre del elemento para definir su estilo.
- Clase (class): Las clases sirven para definir un grupo de elementos para darles el mismo estilo a todos. Ejemplo: La columna de la derecha tiene distintos "bloques" con el mismo estilo, porque llevan la clase "module". Empiezan siempre con un punto.
- ID: Sirve para definir un único elemento en la página, no pueden haber dos elementos con el mismo ID. Siempre está antepuesto con un #.
Existen muchos más selectores, pero esto son los más básicos y esenciales. En resumen:
En Wikia...[]
Para eso, a la plantilla le vamos a dar una clase llamada "pepito", quedando estructurada de esta forma:
<div class="pepito">Este artículo es un esbozo</div>
el cual se vería así:
¿Por qué? Porque no le dimos ningún estilo. Técnicamente sería algo como esto:
.pepito {
}
¿Cómo doy los estilos?[]
Existen muchas propiedades distintas, cada uno con una función distinta (incluso hay navegadores que tienen propiedades que otros no). Vamos a centrarnos en lo que necesitamos:
- fondo: Vamos a utilizar la propiedad background.
- borde: Propiedad: border.
- bordes redondeados: Propiedad border-radius.
¿Ahora?
- fondo verde: background (propiedad), green (valor, verde).
- borde negro: border (propiedad), tamaño del borde (2 píxeles, 5 píxeles...), tipo del borde (sólido, punteado...), black (valor, negro).
- borde redondeado: border-radius, tamaño del redondeo (2 píxeles, 10 píxeles...)
.pepito {
background:green;
border:2px solid black;
border-radius:10px;
}
Quedaría así...
Podemos darle también un color de texto blanco y un margen interno para que no quede tan pegado al borde:
- margen interno: padding, espacio (5 píxeles, 10 píxeles).
- color de texto: color, nombre del color/código
.pepito {
background:green;
border:2px solid black;
border-radius:10px;
padding:10px;
color:white;
}
<div class="pepito">Este artículo es un esbozo</div>
De esa forma, el estilo se aplicará a todas las plantillas que tengan la clase pepito.
Si tienen dudas o sugerencias, problemas o ideas, no duden en comentar en este blog. Y siempre pueden dejarme un mensaje en mi muro cuando vean que necesitan algo, o pedir en Wikia:Diseños y portadas un nuevo diseño para que la wikia luzca perfecta.