Cómo agregar nuevos botones al ChatBox

por Wigazo Jue 02 Ene 2014, 04:12

Hace mucho tenía que actualizar este post con lo de las categorías y smilies, pero no tenía muchas ganas. Al final decidí hacer esto (aunque tendría que rehacer todo el tutorial xD):

Así pueden crear los botones, categorías y smilies más fácilmente.

Les explico cómo funciona, ya que puede ser un poco confuso, aunque bastante intuitivo creo.

Botones

Éstos, cuando les hacés click, añaden al capo de escritura del ChatBox un texto determinado.

Nombre: Código:

En "Nombre" se ingresa el texto que querés que tenga el botón encima. En "Código" se ingresa el texto que querés que el botón agregue al campo de escritura del ChatBox.

[Tienes que estar registrado y conectado para ver este vínculo]

Al hacerle click, creás el botón con las características escogidas.

[Tienes que estar registrado y conectado para ver este vínculo]

Visible cuando hay botones. En la lista desplegable podés ver todos los botones (nombrados con el nombre elegido). Al seleccionar uno, en los campos "Nombre" y "Código" podrás ver cuáles fueron los escogidos. Si hacés click en "Eliminar" se borrará el botón seleccionado.

Categorías

Son listas desplegables que vendrían a ser como botones agrupados en una categoría. Al seleccionar una opción de éstas, se añade al campo de escritura del ChatBox un texto determinado.

Nombre	Código	Eliminar
		[Tienes que estar registrado y conectado para ver este vínculo]
		[Tienes que estar registrado y conectado para ver este vínculo]

[Tienes que estar registrado y conectado para ver este vínculo]

Con esta tabla podés definir cómo querés que sea tu nueva categoría. Cada fila representa un "botón". En la columna "Nombre" ponés el texto que aparecerá en la opción de la lista desplegable y en "Código" el texto que añadirá al campo de escritura del ChatBox. El botón de la columna "Eliminar" sirve para eliminar una fila (el mínimo de éstas es dos, ya que para 1 están los botones). Se puede agregar una nueva fila a la tabla con "Nueva Fila".

[Tienes que estar registrado y conectado para ver este vínculo]

Al hacerle click, creás la categoría con las características escogidas.

[Tienes que estar registrado y conectado para ver este vínculo]

Visible cuando hay categorías. En la lista desplegable podés ver todas las categorías (nombradas con el nombre elegido de la primera opción de la categoría). Al seleccionar una, en la tabla se cargarán los datos de élla. Si hacés click en "Eliminar" se borrará la categoría seleccionada.

Smilies

Son smilies personalizados. Aparecerán en una nueva categoría de la ventanita de smilies: "Smilies Personales". Se ingresan al ChatBox con los códigos IMG. Ahora también la categoría de "Smilies Personales" está disponible para usar en el foro. Smile

Smilies URL:

En este campo se ingrese el URL de la imagen que querés tener como smile personal.

[Tienes que estar registrado y conectado para ver este vínculo]

Al hacerle click, creás el smile de la imagen elegida.

[Tienes que estar registrado y conectado para ver este vínculo]

Acá se visualizan los smilies creados. Para eliminar uno, se le hace click y listo.

Cuando tengas todos los botones, categorías y smilies deseados, hacé click en . Se descargará el userscript con todo lo elegido.
El archivo se llamará botonesChaBox.user.js, y se instala como cualquier otro. Recuerden que en Chrome hay que ir a chrome://extensions y arrastrar el archivo descargado para instalarlo.

¿Y cómo modifico un userscript?

Cualquier userscript creado con esta aplicación (los que fueron creados con el viejo método solo se pueden modificar tocando el código) es muy fácil de modificar, ya que se cargan todos los datos de él (botones, categorías y smilies) en ella para modificarlo a gusto. Una vez hechos los cambios modificados, descarga el nuevo userscript e instálalo, pero antes borra el viejo.

Post viejo:

Viendo [Tienes que estar registrado y conectado para ver este vínculo], me pareció una lástima que no pudiese ser aplicada, ya que me parece una buena idea. Así que decidí hacer un sencillo "userscript" para poder agregar botones al ChatBox (funciona en todos los de Foroactivo).

¿Qué es un userscript?

Son códigos en JavaScript que sirven para modificar página webs. Originalmente corrían en Greasemonkey, una extensión de Firefox, pero hoy en día se pueden instalar en varios navegadores. Por ejemplo, ahora se puede instalar en Chrome como si fuese una extensión. Es por eso que decidí hacerlo en este formato, para que más usuarios puedan usarlo~~, y además así dekar no diga que Google nos borrará por esto~~.

¿Qué hace exactamente este userscript?

Añade dos botones a cualquier ChatBox de Foroactivo:

Cómo agregar nuevos botones al ChatBox Large

-> Añade los códigos de spoiler al final del cuadro de texto del ChatBox.

-> Añade los códigos de img al final del cuadro de texto del ChatBox.

Sin embargo, el userscript es fácilmente personalizable para que el usuario haga sus propios botones.

¿Cómo se instala?

El userscript se encuentra en la siguiente dirección:

[Tienes que estar registrado y conectado para ver este vínculo]

La forma de instalar depende del navegador usado.

Firefox

Se requiere la extensión Greasemonkey:

[Tienes que estar registrado y conectado para ver este vínculo]

Una vez instalada, ir a la página del userscript, hacer click sobre el botón "Install" y poner "Instalar" en la ventana emergente.

Chrome

Ir a la página del userscript, hacer click sobre el botón "Install" y clickear el botón "Continuar" en la barra de descargas.

Luego hay que ir a chrome://extensions y arrastrar el archivo .user.js para instalarlo.

También se puede instalar en otros navegadores, pero todavía no lo testeé.

¿Cómo modifico el userscript?

Firefox

Con Greasemonkey es muy fácil.

Lo explico con imágenes:

Spoiler:

Nota: Antes de hacer el paso 5 hay que hacer los cambios necesarios en el código (más adelante explico cómo).

Chrome

En este caso hay que editar el archivo .user.js descargado, usando un programa de edición de texto como el bloc de notas o alguno más sofisticado. Luego de hacerle las modificaciones al código, guardar el archivo. Una vez guardado, arrastrar el archivo .user.js a chrome://extensions para instalarlo.

Todo muy lindo, ¿pero cómo hago mis botones?

Pues, en el código hay una explicación, pero de todos modos lo explico acá.

Los botones se crean en el bloque "tus botones", que por defecto viene así:

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[spoiler][/spoiler]","spoiler")); botones.push(new boton("[img][/img]","img")); //===BLOQUE TUS BOTONES===//

Para crear un botón, hay que insertar una línea de código dentro de ese bloque, de la siguiente forma:

Código:: botones.push(new boton("<codigo>","<texto>"));

Código:: <codigo>

Hay que reemplazarlo por el código que querés que se inserte al clickear el boton. NOTA: No es necesario que sea un codigo, puede ser cualquier texto.

Código:: <texto>

Hay que reemplazarlo por el texto que querés que se vea en el botón.

Ejemplo

Para añadir un botón que inserte códigos quote, el bloque "tus botones" quedaría de la siguiente forma:

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[spoiler][/spoiler]","spoiler")); botones.push(new boton("[img][/img]","img")); botones.push(new boton("[quote][/quote] ","Cita")); //===BLOQUE TUS BOTONES===//

También se pueden borrar los botones que vienen por defecto ("spoiler" e "img"):

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[quote][/quote] ","Cita")); //===BLOQUE TUS BOTONES===//

Como dije, no hace falta que los botones inserten códigos. Podés hacer botones para insertar rápidamente smilies, y también comandos del chat. Por ejemplo, un botón que inserte el smile :chino:y el botón para banear a DG, dejando el bloque "tus botones" de la siguiente forma:

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[quote][/quote] ","Cita")); botones.push(new boton(":chino:","Chino")); botones.push(new boton("/ban Imperatrum DG","Entretenimiento")); //===BLOQUE TUS BOTONES===//

Y lo mejor de todo: escribir fórmulas destructivas con solo un click. :awwyea:
No, en serio, no se toleran las fórmulas destructivas, dentro o fuera del foro (ya que pueden venir usuarios vengativos). Usarlas puede traer el ban permanente del ChatBox. what is this racket

Otro buen uso que pueden darle es poner códigos para insertar imágenes que usaría como smilies que no están en el foro. Wink

Eso fue todo, espero que les sirva. Smile

Si no entienden algo, no duden en preguntar. Very Happy

por Glumyglu Jue 02 Ene 2014, 07:41

¡Bonísimo

!

Me servirá mucho, y lo mejor es que sirve para todos los foros

por Emd4600 [ASR] Jue 02 Ene 2014, 08:00

Genial, muy buena idea lo de usarlo para smilies.

por Wigazo Jue 02 Ene 2014, 09:45

Ni que fuera tan complicado poner un smiley. xD

Espero que no lo usen con fines maléficos. :ohgod:

por Eleanor Drapeaux Jue 02 Ene 2014, 10:31

muchísimo mejor que mi idea, y eso de que se pueda
editar me ha matado, gracias wig Aliado Beta

por DigiDSoul Jue 02 Ene 2014, 10:51

Muy b ueno Wig! 5/5

Ya lo tengo instalado :megusta:

por Dumdon Jue 02 Ene 2014, 14:56

Ohhh sí...Codigos vengan a mi... :menti:

EDIT: solo se pueden poner smilies del foro y no poner otros que no sean del foro? :c

por Totoi Jue 02 Ene 2014, 15:02

¡FUNCIONA! ¡FUUUUUUUUUUNCIOOOOOOOOOOONA!
Está genialisimo. ¿Crees que podrias añadir un botón a la respuesta rápida de temas? Estaría genial uno para añadir el capitán instantaneamente.

por Dumdon Jue 02 Ene 2014, 15:21

No me aparecen los botones que puse (son smilies) Cómo agregar nuevos botones al ChatBox Dragonshock

por SartekChaos Jue 02 Ene 2014, 17:12

Lo tengo y... es genial
Buen tutorial

por Glumyglu Jue 02 Ene 2014, 19:31

Dum hazlo pero en vez de poner el código del smiley pon el código [img] más la imagen, así te servirá para todos los foros Wink

por Wigazo Jue 02 Ene 2014, 20:18

Me alegro que les guste, hace que valga la pena el laburo. Aliado

Dumdon escribió:Ohhh sí...Codigos vengan a mi... :menti:

EDIT: solo se pueden poner smilies del foro y no poner otros que no sean del foro? :c

Como dice Rhine, es muy obvio. Por ejemplo, si querés poner este smiley:

Cómo agregar nuevos botones al ChatBox Icono_del_cucurucho_del_helado_papeleria_de_diseno-r73cd6d2ae51b4c7b95479c9ef6f03d39_vg6ke_8byvr_50

Cómo agregar nuevos botones al ChatBox Icono_del_cucurucho_del_helado_papeleria_de_diseno-r73cd6d2ae51b4c7b95479c9ef6f03d39_vg6ke_8byvr_50

Tan solo en el código tenés que poner:

Código:: [img]http://rlv.zcache.com/icono_del_cucurucho_del_helado_papeleria_de_diseno-r73cd6d2ae51b4c7b95479c9ef6f03d39_vg6ke_8byvr_50.jpg[/img]

Usá un poquito la cabeza. Merg-sad

Totroix [OMY] escribió:¡FUNCIONA! ¡FUUUUUUUUUUNCIOOOOOOOOOOONA!
Está genialisimo. ¿Crees que podrias añadir un botón a la respuesta rápida de temas? Estaría genial uno para añadir el capitán instantaneamente.

Podría ser, voy a ver. Smile

Me gustaría saber, ¿qué botones usan ustedes? Sospecha Beta

por Rhinestone Jue 02 Ene 2014, 20:22

Necesito un botón para que Wig no me confunda con Glum.

por DigiDSoul Jue 02 Ene 2014, 20:23

Botón Chorifug (envía a Chorifug)
Botón Templo (escribe: Para más info ORIVADENSE visita [Tienes que estar registrado y conectado para ver este vínculo] y lee nuestro libro mitológico: [Tienes que estar registrado y conectado para ver este vínculo]
Botón Maya (escribe Maya)
Botón Toto (Aspiradora retrasada, para saludar a toto)
Botón P (envía un smiley de protesto)
M1, M2, M3 y M4, cada uno envía un smiley de Maya: Cómo agregar nuevos botones al ChatBox 1695449044

Cómo agregar nuevos botones al ChatBox 1695449044

Cómo agregar nuevos botones al ChatBox 3315134335

Cómo agregar nuevos botones al ChatBox 807510727

Cómo agregar nuevos botones al ChatBox 4293637789

Botón O (escribe ORIVADI)

Es genial tener esto a mano cute

por Wigazo Jue 02 Ene 2014, 21:07

Rhinestone [CSR] escribió:Necesito un botón para que Wig no me confunda con Glum.

Perdón.

DigiDSoul [OMY] escribió:Botón Chorifug (envía a Chorifug)
Botón Templo (escribe: Para más info ORIVADENSE visita [Tienes que estar registrado y conectado para ver este vínculo] y lee nuestro libro mitológico: [Tienes que estar registrado y conectado para ver este vínculo]
Botón Maya (escribe Maya)
Botón Toto (Aspiradora retrasada, para saludar a toto)
Botón P (envía un smiley de protesto)
M1, M2, M3 y M4, cada uno envía un smiley de Maya:
Botón O (escribe ORIVADI)

Es genial tener esto a mano

:motherofgod:

por Lechuza Jue 02 Ene 2014, 21:11

Wig, por qué tantos smilies? XD

Está genial, es una pena que no se pueda con la tablet.

por Contenido patrocinado

Hitskin.com

Los posteadores más activos de la semana

Los posteadores más activos del mes

Creación Aleatoria

Hora Mundial

Cómo agregar nuevos botones al ChatBox

Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Re: Cómo agregar nuevos botones al ChatBox

Buscar

Resultados por: Mensajes Temas
Búsqueda avanzada