Cambiar botones de BBcodes de phpBB3 a botones con Imagenes

Bueno, la idea de este post, es indicar los pasos para poder tener una página de posteo con botones en imagenes - Creado por mitch

Cambiando los Botones de BBcodes de phpBB3 a Botones con Imágenes

¿Los botones de los BBcodes de la página de posteo, de phpBB3, te parecen "feos" ? A mi tambien... con esta modificación, dejamos un panel para postear mucho mas agradable.

El resultado sería este en plantillas como subsilver2:

Imagen

Y este en plantillas como prosilver:

Imagen

Las primeras 2 lineas de botones serán botones que agregaremos en la plantilla.
La última corrida de botones, serán las imagenes de los BBcodes que actives desde el ACP (el boton de imageshack que se ve en la vista previa por ejemplo).

Pueden verlo funcionando en este mismo sitio.

Lista de BBcodes añadidos:

Código: Seleccionar todo

- [align=left|right|center|justify]
- [strike]
- [sup] y [sub] (superíndice y subíndice)
- [highlight]
- [hr]
- [offtopic]
- [marquee=up|down|left|right]
- [spoiler]
- [video] (avi/wmv/mpg, archivos windows media player)
- [mp3]
- [quick] (archivos quicktime)
- [ram] (archivos realmedia)
- [googlevideo]
- [youtube]

Instrucciones:

Primero, debes agregar los siguientes BBcodes desde el ACP de tu foro phpBB3: pastebin.php?mode=view&s=123
Recuerda dejar sin marca la opción "Mostrar en mensajes" (pues nosotros lo haremos, agregando las imagenes).
Descarga las imagenes que estan en el archivo adjunto, y luego te diriges por FTP a la carpeta /images/ de tu foro, y dejas las imagenes en una carpeta llamada "posting" (o sea, las imagenes de los botones deben quedar en /images/posting/).

posting.rar

Imagenes para los botones

(13.56 KiB) 3039 veces
Realiza los siguientes cambios en tu plantilla, si está basada en prosilver: pastebin.php?mode=view&s=125

Realiza los siguientes cambios, si está basada en subsilver2: pastebin.php?mode=view&s=5

¿Cómo sabes en qué plantilla se basa? en tu actual estilo, dirígete al Panel de control del usuario (donde editas tu perfil).

- Si las opciones están en pestañas, arriba (como en el ACP), entonces tu estilo se basa en prosilver.
- Ahora si las opciones del perfil se encuentran en un menú a la izquierda, pues tu estilo se basa en subsilver2
Ahora dirígete al ACP, y desde el índice, borra el caché pulsando el botón Ejecutar de Limpiar el caché.
En el ACP, selecciona la pestaña ESTILOS, a la izquierda elige TEMAS, y haz click en "Actualizar" (en la plantilla que estes usando).
Luego, dirígete a tu foro, a la página de posteo, y deberías ver ya los cambios (y si no los ves, pulsa CONTROL+F5 en tu teclado, para actualizar el caché de tu navegador).

Eso es todo, y queda un resultado muy bueno

Los BBcodes que agregamos al inicio, son para los botones de las 2 primeras corridas (los que se ven en la imagen).

Si luego, desde el ACP, agregas un BBcode nuevo, digamos que se llame [ejemplo][/ejemplo]. Si quieres que este BBcode tambien se vea en la página de posteo, pues marcas la casilla "Mostrar en mensajes", y además de esto, debes subir una imagen, llamada "ejemplo.gif" a la carpeta /images/posting/.
Si el bbcode fuese [audio][/audio], debes subir una imagen llamada "audio.gif", ¿se entiende?

Dudas, consultas, en este mismo tema o en los foros de Soporte de phpBB-Es.

Modificación Extra para los botones

¿Quieres que al presionar el boton de URL o el de Imagen, aparezca una ventana solicitandote la URL del enlace o la imagen y otros datos?

Imagen

Con estas modificaciones lo logras. En el caso del bbcode [URL] te pide ingresar la URL, luego te pide ingresar un Nombre o Leyenda, y luego de esto, se agrega toda la información al post

Mucho mas dinámico.

Click para ampliar

Para el BBcode Flash por ejemplo, lo mismo, te pide la URL, luego te pide que ingreses el alto y el ancho en pixeles, y luego se agrega toda la información al post.

Ahora, si ya tenías la URL escrita en el post, y la seleccionas, y luego presionas el boton de URL por ejemplo, simplemente se agregan los tags al inicio y al final de lo que seleccionaste (no te vuelve a pedir la URL con la ventanita, pues ya la tenías seleccionada). O sea, como siempre ha funcionado el BBcode, normalmente.

Click para ampliar

Esta modificación esta hecha para los BBcodes que solicitan URL's o cosas por el estilo, los bbcodes son: URL, IMG, EMAIL, FLASH, MP3, QUICK, RAM, GOOGLEVIDEO Y YOUTUBE.

Creo que quedó perfecto, pruebalo

En el archivo /styles/ESTILO/template/editor.js (el estilo puede ser prosilver, o subsilver2, o el que sea):

Al final del archivo, en una nueva línea, agregar:

Código: Seleccionar todo

// BBcodes por Mitch
function BBcodeimg() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[img]','[/img]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[img]','[/img]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca la URL de la imagen", "http://");
	if (!enterURL)    {
		Errores += "Debes ingresar una URL para la imagen.";
		alert("Error: "+Errores);
		return;
	}
		var Post = "[img]"+enterURL+"[/img]";
		insert_text(Post);
}


function BBcodeurl() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[url]','[/url]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[url]','[/url]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca la URL", "http://");
	var enterTITULO = prompt("Introduzca el nombre del enlace (opcional)", "Nombre de la Página Web");
	if (!enterURL)    {
		Errores += "Debes ingresar una URL.";
		alert("Error: "+Errores);
		return;
	}
	if (!enterTITULO)  {
		var Post = "[url]"+enterURL+"[/url]";
		insert_text(Post);
	}
	else {
	var Post = "[url="+enterURL+"]"+enterTITULO+"[/url]";
	insert_text(Post);
	}
}

function BBcodeemail() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[email]','[/email]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[email]','[/email]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca una dirección de e-mail", "correo@web.com");
	var enterTITULO = prompt("Introduzca un nombre para el enlace al correo (opcional)", "Click aquí para escribirme un correo");
	if (!enterURL)    {
		Errores += "Debes ingresar una dirección de email.";
		alert("Error: "+Errores);
		return;
	}
	if (!enterTITULO)  {
		var Post = "[email]"+enterURL+"[/email]";
		insert_text(Post);
	}
	else {
	var Post = "[email="+enterURL+"]"+enterTITULO+"[/email]";
	insert_text(Post);
	}
}

function BBcodeflash() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[flash=500,350]','[/flash]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[flash=320,285]','[/flash]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca la URL del Flash", "http://");
	var enterWIDTH = prompt("Introduzca el ancho del flash, en pixeles", "500");
	var enterHEIGHT = prompt("Introduzca el alto del flash, en pixeles", "350");
	if (!enterURL)    {
		Errores += "Debes ingresar una URL.";
		alert("Error: "+Errores);
		return;
	}
		if (!enterWIDTH || !enterHEIGHT)    {
		Errores += "Debes ingresar un ancho o alto en pixeles para el archivo flash.";
		alert("Error: "+Errores);
		return;
	}
	else {
	var Post = "[flash="+enterWIDTH+","+enterHEIGHT+"]"+enterURL+"[/flash]";
	insert_text(Post);
	}
}

function BBcodevideo() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[video width=320 height=285]','[/video]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[video width=320 height=285]','[/video]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca la URL del Video", "http://");
	var enterWIDTH = prompt("Introduzca el ancho del video, en pixeles", "320");
	var enterHEIGHT = prompt("Introduzca el alto del video, en pixeles", "285");
	if (!enterURL)    {
		Errores += "Debes ingresar una URL.";
		alert("Error: "+Errores);
		return;
	}
		if (!enterWIDTH || !enterHEIGHT)    {
		Errores += "Debes ingresar un ancho o alto en pixeles para el archivo de video.";
		alert("Error: "+Errores);
		return;
	}
	else {
	var Post = "[video width="+enterWIDTH+" height="+enterHEIGHT+"]"+enterURL+"[/video]";
	insert_text(Post);
	}
}

function BBcodemp3() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[mp3]','[/mp3]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[mp3]','[/mp3]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca la URL del Mp3", "http://");
	if (!enterURL)    {
		Errores += "Debes ingresar una URL.";
		alert("Error: "+Errores);
		return;
	}
	var Post = "[mp3]"+enterURL+"[/mp3]";
	insert_text(Post);
}

function BBcodequick() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[quick width=320 height=240]','[/quick]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[quick width=320 height=240]','[/quick]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca la URL del archivo Quick Time", "http://");
	var enterWIDTH = prompt("Introduzca el ancho del archivo, en pixeles", "320");
	var enterHEIGHT = prompt("Introduzca el alto del archivo, en pixeles", "240");
	if (!enterURL)    {
		Errores += "Debes ingresar una URL.";
		alert("Error: "+Errores);
		return;
	}
		if (!enterWIDTH || !enterHEIGHT)    {
		Errores += "Debes ingresar un ancho o alto en pixeles para el archivo.";
		alert("Error: "+Errores);
		return;
	}
	else {
	var Post = "[quick width="+enterWIDTH+" height="+enterHEIGHT+"]"+enterURL+"[/quick]";
	insert_text(Post);
	}
}

function BBcoderam() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[ram width=275 height=40]','[/ram]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[ram width=275 height=40]','[/ram]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca la URL del archivo Real Media", "http://");
	var enterWIDTH = prompt("Introduzca el ancho del archivo, en pixeles", "275");
	var enterHEIGHT = prompt("Introduzca el alto del archivo, en pixeles", "40");
	if (!enterURL)    {
		Errores += "Debes ingresar una URL.";
		alert("Error: "+Errores);
		return;
	}
		if (!enterWIDTH || !enterHEIGHT)    {
		Errores += "Debes ingresar un ancho o alto en pixeles para el archivo.";
		alert("Error: "+Errores);
		return;
	}
	else {
	var Post = "[ram width="+enterWIDTH+" height="+enterHEIGHT+"]"+enterURL+"[/ram]";
	insert_text(Post);
	}
}

function BBcodegooglevideo() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[googlevideo]','[/googlevideo]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[googlevideo]','[/googlevideo]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca la ID del video (solo la ID, no la URL completa)", "595591721633367");
	if (!enterURL)    {
		Errores += "Debes ingresar la ID del video.";
		alert("Error: "+Errores);
		return;
	}
	var Post = "[googlevideo]"+enterURL+"[/googlevideo]";
	insert_text(Post);
}

function BBcodeyoutube() {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
			if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text;
		if (theSelection)
		{
bbfontstyle('[youtube]','[/youtube]');
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
bbfontstyle('[youtube]','[/youtube]');
		return;
	}

	var Errores = '';
	var enterURL   = prompt("Introduzca la ID del video (solo la ID, no la URL completa)", "ZxyQraaB7c0");
	if (!enterURL)    {
		Errores += "Debes ingresar la ID del video.";
		alert("Error: "+Errores);
		return;
	}
	var Post = "[youtube]"+enterURL+"[/youtube]";
	insert_text(Post);
}
// BBcodes por Mitch

Cuando guardes, asegurate de ir a: Archivo > Guardar como... , y debajo del nombre del archivo, generalmente aparece el Formato en el que quieres guardar, asegurate de que sea UTF8 (o si no, los acentos aparecerán con signos raros)

En el archivo /styles/ESTILO/template/posting_buttons.html (el estilo puede ser prosilver, subsilver2, o cualquier otro):

Buscar cada una de estas lineas (por separado, de una en una) y reemplazarlas por las que estan mas abajo (por ejemplo, la segunda linea de este código, la reemplazas por la linea 2 del código que está mas abajo)

Código: Seleccionar todo

onclick="bbstyle(14)"
onclick="bbstyle(16)"
onclick="bbfontstyle('[email]','[/email]')"
onclick="bbstyle(18)"
onclick="bbfontstyle('[video width=320 height=285]','[/video]')"
onclick="bbfontstyle('[mp3]','[/mp3]')"
onclick="bbfontstyle('[quick width=320 height=240]','[/quick]')"
onclick="bbfontstyle('[ram width=275 height=40]','[/ram]')"
onclick="bbfontstyle('[googlevideo]','[/googlevideo]')"
onclick="bbfontstyle('[youtube]','[/youtube]')"

Lineas de reemplazo:

Código: Seleccionar todo

onclick="BBcodeimg()"
onclick="BBcodeurl()"
onclick="BBcodeemail()"
onclick="BBcodeflash()"
onclick="BBcodevideo()"
onclick="BBcodemp3()"
onclick="BBcodequick()"
onclick="BBcoderam()"
onclick="BBcodegooglevideo()"
onclick="BBcodeyoutube()"

Guardas, subes a tu servidor donde corresponde, limpias el caché y ya deberías tener lista esta nueva función. Si no ves resultados, asegurate de que limpiaste bien el caché, y presiona F5 en tu navegador (o click en Actualizar) para que se carguen en tu navegador bien los cambios.

Dudas en los foros de soporte de phpBB-Es con sus datos o en el foro de pruebas de mi firma

Aprovecho de dejar también algunos iconos aportados por xoom, en este tema los encuentras: viewtopic.php?f=9&t=17838

Y tambien los siguientes íconos, dejados por el usuario el abuelo en el siguiente tema: colaboraciones-graficas/botones-bbcode-de-mich-t25131.html#p134253
estos son útiles para estilos oscuros donde los botones blancos no se ven bien. salu2.

Un saludo