Comunidad Central
Registrarse
Advertisement
Comunidad Central
Build a Wiki - CSS
Build a Wiki

¡Saludos Wikianautas! Regresamos con Build a Wiki. Ya hemos visto anteriormente sobre unirse, adoptar o fundar una comunidad nueva, sobre todo lo que necesitas saber sobre el favicon y el logo, cómo hacer un buen panel de navegación y sobre cómo hacer una buena primera portada.

Ahora, ya llevas tiempo en tu comunidad y has sido elegido como administrador. ¡Felicidades! Ahora que eres admin, te vienen varios derechos que te ayudan con el mantenimiento del wiki. Entre estos derechos te viene el de editar el espacio de MediaWiki, pero, ¿te dan miedo los códigos? ¿No sabes ni lo que significa CSS o qué haces con él? Hoy, déjame explicarte acerca de éste código que acabo de mencionar con el cual podrás hacer cosas geniales con tu wiki. Otra gran entrada que puede ser consultada es la de Giovi.

¿Qué páginas puedo editar para modificar mi CSS?

El CSS es el espacio de MediaWiki ubicado en el MediaWiki:Wikia.css y MediaWiki:Common.css de tu wiki.

  • El MediaWiki:Wikia.css sirve para el skin de Oasis (ver)
  • El MediaWiki:Common.css sirve para las dos.

¿Qué es CSS?

Los Cascading Style Sheets (en español "Hojas de estilos en cascada") sirven para cambiar el estilo de tu wiki mediante reglas. Con estilo, me refiero a que cambias los colores, el tamaño de las cosas, etc. La mayoría de los wikis lo usan para modificar su chat, agregarle estilos a sus infoboxes y tener un código fuente más limpio. Por ejemplo, cuando haces un código para hacer algo pondrías:

<span style="border:2px solid blue; font-color:red; font-size:15px; line-height:1.5px; font-weight:bold;">Bla, bla, bla</span>

Con CSS, creas una clase y lo único que pondrás será algo parecido a lo siguiente:

<span class="nombre-de-la-clase">Bla, bla, bla</span>

En el CSS de tu wiki aparecería la siguiente regla:

.nombre-de-la-clase {
font-color:red;
font-size:15px;
line-height:1.5px;
font-weight:bold;
border:2px solid blue;
}

Ahora, los dos son lo mismo y te dan "Bla, bla, bla" pero la diferencia es que en la de abajo, el código fuente es el mismo.

¿En qué consisten las reglas?

En sí, son muy básicas. Como lo mencionó Giovi en su entrada, son tres cosas:

selector {
propiedad: valor;
}

 

Muy bien, pero ¿qué es un selector?

Los selectores son los que literalmente escogen el pedazo de texto o la cosa a la que le vamos a agregar estilo. Pueden ser de tres tipos:

  • Clase: Siempre empiezan con un punto y sirven para definir un grupo de elementos. Es mejor empezarlas con minúsculas y separarlas con un un guión.
    • Ejemplo en html:
      <div class="nombre-de-clase">Bla, bla, bla</div>
      
    • Ejemplo en css:
      .nombre-de-clase {color: red;}
      
  • ID: Siempre empiezan con un # y sirven para definir un solo elemento. Se debe recordar que nunca pueden haber dos IDs con el mismo nombre.
    • Ejemplo en html:
      <div id="nombre-de-id">Bla, bla, bla</div>
      
    • Ejemplo en css:
      #nombre-de-id {color: red;}
      
  • Elementos: Los elementos son los más fáciles de definir ya que sólo debes poner el nombre del mismo. Para un bloque, el elemento va a ser "div"; para enlaces, "a"; para imágenes, "img"; para listas desordenadas, "ul"; para elementos de listas, "li" entre muchísimos otros más. Con estos selectores puede que tengas que ser más específico de lo normal ya que si sólo pones a un elemento, modificarás a todos.
    • Ejemplo:
a {
color: red;
}

Esto hará que todos los enlaces estén en rojo.

Pero necesito saber más sobre cómo seleccionar elementos

Muy bien, ya sabes qué tipos de elementos hay. Ahora veremos más a fondo cómo seleccionar.

Seleccionar varios elementos a la vez

a, div, li, span, img, ul, ol {
color: red;
}

Con esta regla, le damos a todos los elementos escritos el color rojo. Es tan fácil como separarlos con una coma.

Seleccionar un valor dentro de un elemento

li[data-user="Tono555"] {
color: red;
}

Esto ya es un poco más complicado de explicar, pero haré un esfuerzo jaja. Lo que pasa es que a veces queremos seleccionar un cierto elemento, pero sólo cuando ese elemento tenga algo que queremos destacar. Aquí, entonces, lo que hice fue decir que cuando en el elemento "li", la propiedad "data-user" sea "Tono555", que nos ponga el color en rojo. La fuente en html es la siguiente:

<li data-user="Tono555">Algo que haya puesto.</li>

Seleccionar un elemento específico

Hay veces en que quieres seleccionar un solo div o un solo li. Seleccionarlos no es tan fácil como los demás porque le tienes que decir a tu stylesheet dónde están. Pongamos lo siguiente como ejemplo:

<div class="class-1">Algo que haya puesto.
   <span class="class-2">Otra cosa puesta
      <p>El elemento "p" es para texto.</p>
   </span>
</div>

Ahora, si aquí queremos cambiar el estilo del elemento "p" sin tocar los elementos de arriba, ponemos lo siguiente fijándonos en los nombres de las clases que están afuera.

.class-1 .class-2 p {
color: red;
}

Es como cuando quieres seleccionar a varios elementos a la vez, sólo que aquí, no pones las comas. Y entonces, el texto cambiado es el que está dentro del elemento "p".


Estos son los métodos básicos para seleccionar. Hay más, pero con estos ya puedes hacer la mayoría de los trabajos que quieres hacer. Para ver cuáles son los IDs y los classes en Wikia, debes usar "inspeccionar elemento", que puedes encontrar al darle un clic derecho al mouse. Si tienes dudas, ¡sólo pregúntame!

 

Trollface wikihammer 40k Si yo te contara...
Yo no entendía nada de CSS cuando primero llegué a Wikia y de hecho, haste este año. Sin embargo, me puse a buscar en internet cómo hacer ciertas cosas y poco a poco fui aprendiendo. No habré ni tomado tres meses para llegar al nivel en el que estoy y cuando la gente te ayuda, todo es más fácil. En mi caso, el que más me ayudó fue Sr.Shenanigans y de hecho, me sigue ayudando. No tienes que tenerle miedo a preguntarle a alguien con más experiencia :)
Enlaces de interés:


Vídeos de Universidad de Fandom

 

¿Olvidaste lo anterior? ¡Vuelve a atrás y echa un vistazo!
Build a Wiki, un cursillo perteneciente a la Universidad de Fandom
Continua tu aprendizaje en la siguiente entrada de Build a Wiki

¿Quieres recibir las últimas actualizaciones del blog de Fandom en español? ¡Haz clic aquí para seguir este blog!
¡Estamos realizando experimientos! ¡Aprende más sobre qué tipo de eventos y otras cosas hemos hecho o planeamos hacer!
¿Quieres hablar en tiempo real con otros editores y staff?
¡Únete a nuestro servidor oficial de Discord para usuarios registrados!


Tono555
EQUIPO DE CONTENIDO - VANGUARD
Tono555 es un usuario que participa en FANDOM desde mayo del 2014 cuando se inició en la comunidad inglesa de Avatar. Desde entonces, se ha unido a varias comunidades y actualmente participa como voluntario para Wikia en el proyecto de Community Council y en Vanguard.

Advertisement