Fandom

Central de Wikia

Comentario1

Personaliza un chat

¡Interferencia de bloqueo de anuncios detectada!


Wikia es un sitio libre de uso que hace dinero de la publicidad. Contamos con una experiencia modificada para los visitantes que utilizan el bloqueo de anuncios

Wikia no es accesible si se han hecho aún más modificaciones. Si se quita el bloqueador de anuncios personalizado, la página cargará como se esperaba.

Build a Wiki - Personaliza un chat
Build a Wiki.png

Personalizar un chat es la labor de mejorar estética y funcionalmente un chat. Si bien hay muchas maneras de personalizarlo aquí aprenderás a hacerlo de forma general. Personalizar un chat no es lo mismo que en un wiki y los procedimientos son diferentes.

Implementando Javascript

Para añadir scripts personalizados al chat de tu comunidad debes añadirlos en MediaWiki:Chat.js.

Implementado códigos CSS

No hay nada mejor que añadir CSS a un chat, principalmente si quieres que sea agradable a la vista, teniendo en cuenta como usar los colores y no sobrecargar las páginas está vez usaremos lo que es MediaWiki:Chat.css de tu comunidad.

Principales códigos:

Fondo

Código para cambiar la imagen en dónde se muestran los mensajes (fondo)
body.ChatWindow {background: url("URL de la imagen") repeat scroll center top black; }


Código para cambiar la imagen de toda la página
body.ChatWindow .WikiaPage {
background: url("URL de la imagen");
}


  • Si quieres que el fondo de pantalla se "auto corrija" abajo del valor background url puedes poner background-size: cover;. por ejemplo:
body.ChatWindow {background: url("URL de la imagen");background-size: cover; }


  • Aparte del valor background: url se puede intercambiar ese código por el valor "background-color" que te permite seleccionar el color que tu quieras. por ejemplo:
body.ChatWindow {background-color:Green; }

Aquí presentamos todos los valores que se pueden dar a tu fondo de la wiki.

Imágenes

  • background-repeat: Define si el fondo se repite o no.
  • background-position: Define dónde estará el fondo.
  • background-attachment: Define como el fondo se comporta.
  • background-size: Define el tamaño del fondo.

Colores

  • background: linear-gradient: define un fondo de color degradado.

Header del chat

Código para cambiar el header del chat.
header.ChatHeader {
background-color:gray;
}

El valor background-color te permite cambiar el color del Header, de igual manera puedes cambiar este valor por: background: url("URL de la imagen");

En caso de fondo con imagen se puede usar esto:

Aquí presentamos todos los valores que se pueden dar a tu fondo.

Imágenes

  • background-repeat: Define si el fondo se repite o no.
  • background-position: Define dónde estará el fondo.
  • background-attachment: Define como el fondo se comporta.
  • background-size: Define el tamaño del fondo.

Colores

  • background: linear-gradient: define un fondo de color degradado.

Mensajes

Este es el primer mensaje que se da, tanto el tuyo como el de otra persona.
.ChatWindow .Chat li[data-user] { {
background-color:black;
}

A este mensaje le podemos agregar diferentes cosas, desde un borde, hasta un margen. por ejemplo:

.ChatWindow .Chat li[data-user] { {
background-color:black;
border:2px solid blue;
}


Este es el mensaje que continua del primero de una persona aparte de ti
li.continued { {
background-color:black;
border:2px solid blue;
}


Este es el mensaje que continua de tu propio mensaje
li.continued.you { {
background-color:black;
border:2px solid blue;
}


Este es la barra lateral derecha.
div.rail { {
background-color:black;
border:2px solid blue;
}


Este eres tu en el Header o encabezado de la página.
div.User { {
background-color:black;
border:2px solid blue;
}


Este es el usuario mostrado en la barra lateral derecha.
li.User { {
background-color:black;
border:2px solid blue;
}


Este el recuadro dónde tu escribes.
div.message textarea { {
background-color:black;
border:2px solid blue;
}


Este son los mensajes de bienvenida y despedida.
li.inline-alert { {
background-color:black;
border:2px solid blue;
}


Los avatares de los usuarios.

El avatar que se muestra en los mensajes.

img.avatar { {
background-color:black;
border:2px solid blue;
}

El avatar que se muestra en la barra lateral derecha.

li.User img { {
background-color:black;
border:2px solid blue;
}


La barra de datos del usuario que aparece al seleccionarlo.
.ChatWindow .UserStatsMenu { {
background-color:black;
border:2px solid blue;
}

Códigos que pueden ser utilizados:

El background o fondo puede ser con imagen o un color sólido: Aquí presentamos todos los valores que se pueden dar a tu fondo.

Imágenes

  • background-repeat: Define si el fondo se repite o no.
  • background-position: Define dónde estará el fondo.
  • background-attachment: Define como el fondo se comporta.
  • background-size: Define el tamaño del fondo.

Colores

  • background: linear-gradient: define un fondo de color degradado.

Cuando ponemos un border contamos con tres valores: 2px (define el grosor del borde, puede ser 1, 3, 5,etc y con medidas de em, cm, etc) solid (define que tipo de borde es, puede ser, dashed, outset, dotted, etc) y red (define el color del borde, puede ser, red (rojo), green (verde), blue (azul),etc); en este caso tenemos un fondo de color negro con un borde solido azul con grosor de 2 píxeles.

El border-radius define lo redondeado de los bordes; por ejemplo: border-radius: 2px (en este caso el redondeado es de 2px, se admiten medidas de px, em, cm, etc).


Cuando ponemos un "padding" cambia la sangría o margen del contenido, este no acepta valores negativos, contamos con un valor: 2px (que define el espacio separado entre la caja y el contenido, las medidas pueden ser em, px, cm, etc).

Contamos con varios tipos:

  • padding: define todo el margen.
  • padding-top: define la parte de arriba del margen.
  • padding-right: define la parte de la derecha del margen.
  • padding-bottom: define la parte de abajo del margen.
  • padding-left: define la parte de la izquiera del margen.

Cuando ponemos un margin define la anchura o la altura de la caja dónde está el contenido en este se pueden colocar valores negativos; por ejemplo: margin: 2px, (en este existe solo una medida que puede ser px, em, cm, etc).

Contamos con varios tipos:

  • margin: define toda la caja.
  • margin-top: define la parte de arriba de la caja.
  • margin-right: define la parte de de la derecha de la caja.
  • margin-bottom: define la parte de abajo de la caja.
  • margin-left: define la parte de la izquierda de la caja.


El color define el color de la fuente o el texto, por ejemplo: color: white (aquí el color es blanco, puede ser rojo, verde o azul en sus nombres en inglés).

Mejores prácticas para el uso recomendado de CSS y Javascript

  • No satures el CSS ni JavaScript, ya que puede causar problemas de carga y de leer los mensajes.
  • Usa la consola de JavaScript del navegador o el complemento de Stylebot para Chrome para probar los códigos y no hacer ediciones innecesarias.

Lista de páginas MediaWiki para personalizar los mensajes del chat

Las páginas del espacio de nombres MediaWiki: permiten cambiar los mensajes que vemos en el wiki (ej. Editar resumen, WikiActividad, Grabar la página etc.). Aunque hay muchas más, se publicarán las más relevantes.

Afectan al skin Oasis (módulo del chat)

Afectan a la ventana principal

Afecta a la ventana derecha de la lista de usuarios


Agradecimientos a Supernal Chief por su colaboración en la entrada en la parte de CSS y Javascript.
WTLogo.png
¿Qué son los Wikitips?
Es una lista de entradas de trucos y consejos por parte de la comunidad de Wikia en la que puede participar cualquiera. ¡Tan solo añade tu propio tutorial sobre algo en concreto de Wikia y añade la categoría Wikitips!

Editores actuales

150px-24980860.png.jpgPαyηε
Fundador de Wikitips
La cantidad de ediciones no importa, importa su calidad
Usuario:Paynekiller92
Paynekiller92 participa en Wikia como usuario común. Sus gustos son el entretenimiento, la informática y la innovación.
Si necesitas contactar con él, hazlo a través de su muro.
Discusión/Muro

Contribuciones
Wikis Principales

CSS
Intermedio
Este usuario tiene un nivel avanzado de CSS
150px-25238477.pngcordgw
'Redactor de Wikitips
Usuario:Cordg
Cordg participa en Wikia desde mediados de 2007. Le gusta ayudar a los usuarios y tiene un conocimiento avanzado de CSS, JavaScript, wiki-code y HTML. Cualquier cosa que necesites, no dudes en contactarle en su muro.
Muro de Mensajes

Contribuciones
SVTFOE Wikia



70#.png
Unai01 participa en Fandom desde 2014. Le gustan los videojuegos, la música, la cultura japonesa y la informática. Colabora con la Comunidad Central como administrador y pertenece al Community Council y Vanguard.

¿Quieres recibir las últimas actualizaciones del blog de Fandom en español? ¡Haz clic aquí para seguir este blog!

Spotlights de otros wikis

Wiki al azar