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)
- Código para cambiar la imagen de toda la página
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:
- 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:
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.
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.
background-color:black;
}
A este mensaje le podemos agregar diferentes cosas, desde un borde, hasta un margen. por ejemplo:
background-color:black;
border:2px solid blue;
}
- Este es el mensaje que continua del primero de una persona aparte de ti
background-color:black;
border:2px solid blue;
}
- Este es el mensaje que continua de tu propio mensaje
background-color:black;
border:2px solid blue;
}
- Este es la barra lateral derecha.
background-color:black;
border:2px solid blue;
}
- Este eres tu en el Header o encabezado de la página.
background-color:black;
border:2px solid blue;
}
- Este es el usuario mostrado en la barra lateral derecha.
background-color:black;
border:2px solid blue;
}
- Este el recuadro dónde tu escribes.
background-color:black;
border:2px solid blue;
}
- Este son los mensajes de bienvenida y despedida.
background-color:black;
border:2px solid blue;
}
- Los avatares de los usuarios.
El avatar que se muestra en los mensajes.
background-color:black;
border:2px solid blue;
}
El avatar que se muestra en la barra lateral derecha.
background-color:black;
border:2px solid blue;
}
- La barra de datos del usuario que aparece al seleccionarlo.
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)
- MediaWiki:Chat-live2: Título del módulo del chat (Por defecto "Chat en directo")
- MediaWiki:Chat-entry-point-guidelines: Se añade debajo de la lista de usuarios en el chat, se permite wikitexto y está pensada para añadir enlaces a reglas del chat. (Por defecto vacío)
- MediaWiki:Chat-start-a-chat: Botón de Iniciar el Chat.
Afectan a la ventana principal
- MediaWiki:Chat-welcome-message: Mensaje de bienvenida al entrar al chat.
- MediaWiki:Chat-user-joined: Mensaje cuando un usuario entra al chat.
- MediaWiki:Chat-user-parted: Mensaje cuando un usuario abandona el chat.
- MediaWiki:Chat-you-were-kicked: Mensaje cuando eres expulsado.
- MediaWiki:Chat-user-was-kicked: Mensaje cuando un un usuario es expulsado.
Afecta a la ventana derecha de la lista de usuarios
- MediaWiki:Chat-status-away: Mensaje cuando un determinado usuario está ausente.
- MediaWiki:Chat-edit-count: Mensaje del número de ediciones de un determinado usuario.
- MediaWiki:Chat-member-since: Mensaje de la fecha de registro de un determinado usuario.
- MediaWiki:Chat-user-menu-talk-page: Mensaje de la página de discusión de un determinado usuario
- MediaWiki:Chat-user-menu-ban: Mensaje para banear a un determinado usuario.
- MediaWiki:Chat-user-menu-contribs: Mensaje para ver las contribuciones de un determinado usuario.
- MediaWiki:Chat-user-menu-kick: Mensaje para expulsar a un determinado usuario.
- MediaWiki:Chat-user-menu-private: Abre una pestaña de mensajes privados con un determinado usuario.
- MediaWiki:Chat-user-menu-private-allow: Permite los mensajes privados a un determinado usuario en caso de que fueran previamente bloqueados.
- MediaWiki:Chat-user-menu-private-block:: Bloquea los mensajes privados a un determinado usuario. (....)
Agradecimientos a Supernal Chief por su colaboración en la entrada en la parte de CSS y Javascript.
 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ListadoEditores actuales
| |||||||||||||||
¿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!