FANDOM


Template:Wikia-blog-header 670px|center

¡Buenas a todos! 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, 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, MediaWiki:Common.css y MediaWiki:Monobook.css de tu wiki.

  • El MediaWiki:Wikia.css sirve para el skin de Oasis (ver)
  • El MediaWiki:Monobook.css sirve para el skin de Monobook (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!

Template:Trollface



Vídeos de Universidad de Wikia

thumb|left|330pxthumb|right|330px thumb|left|330 pxthumb|right|330 px

link=Usuario Blog:Tono555/Build a Wiki - Portadas|left|215px|¿Olvidaste lo anterior? ¡Vuelve a atrás y echa un vistazo! center|215px|link=Wikia:Universidad|Build a Wiki, un cursillo perteneciente a la Universidad de Wikia link=Usuario_Blog:Rodehi/Proyecto_Build_a_Wiki_-_Panel_de_navegación|right|215px|Continua tu aprendizaje en la siguiente entrada de Build a Wiki

Template:Footer de blog


Template:Usuario:Tono555/insignia

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.