Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Cambiar botones de BBcodes de phpBB3 a botones con imagenesTema Solucionado

Dudas sobre estilos phpBB 3.0.x
Colaboraciones gráficas paquetes de rangos aquí y botones aquí.
Cerrado
Avatar de Usuario
mitch
Ex Staff
Mensajes: 4260
Registrado: 04 Sep 2005, 04:28
Género:

Cambiar botones de BBcodes de phpBB3 a botones con imagenes  Tema Solucionado

#1

Mensaje por mitch »

Bueno, la idea de esta guía , es indicar los pasos para poder tener una barra de bbcodes con imágenes en lugar de botones - 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 también... con esta modificación, dejamos un panel para postear mucho mas agradable.

El resultado sería este en plantillas como subsilver2:
botones_subsilver2.jpg
Y este en plantillas como prosilver:
botones_prosilver.jpg
Las primeras 2 lineas de botones serán botones que agregaremos en la plantilla.
La última corrida de botones, serán las imágenes de los BBcodes que actives desde el ACP (el botón 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:
  1. Primero, debes agregar los siguientes BBcodes desde el ACP de tu foro phpBB3:
    Pastebin : BBcodes para modificación de botones en imágenes
    Recuerda dejar sin marca la opción "Mostrar en mensajes" (pues nosotros lo haremos, agregando las imágenes).
  2. Descarga las imágenes que están en el archivo adjunto, y luego te diriges por FTP a la carpeta raíz/images/ de tu foro, y dejas las imágenes en una carpeta llamada "posting" (o sea, las imágenes de los botones deben quedar en /images/posting/).
    posting.rar
  3. Realiza los siguientes cambios en tu plantilla, si está basada en prosilver: Pastebin : Modificaciones para botones en imágenes (prosilver)

    Realiza los siguientes cambios, si está basada en subsilver2: Pastebin : Modificaciones para botones en imágenes (subsilver2)

    ¿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 :)
  4. Ahora dirígete al ACP, y desde el índice, borra el caché pulsando el botón Ejecutar de Limpiar el caché.
  5. En el ACP, selecciona la pestaña ESTILOS, a la izquierda elige TEMAS, y haz click en "Actualizar" (en la plantilla que estés usando).
  6. 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 también 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 raíz/images/posting/.
Si el bbcode fuese [audio][/audio], debes subir una imagen llamada "audio.gif", ¿se entiende? :D

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 botón de URL o el de Imagen, aparezca una ventana solicitándote la URL del enlace o la imagen y otros datos?
popup_1.jpg
Con estas modificaciones lo logras. En el caso del bbcode te pide ingresar la URL, luego te pide ... ('[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('','');
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 = ""+enterURL+"";
insert_text(Post);
}
else {
var Post = ""+enterTITULO+"";
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('');
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('');
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 = "";
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('');
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('');
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 = "";
insert_text(Post);
}
// BBcodes por Mitch
[/code]
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.[/list]

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: Iconos BBCode

Y también los siguientes íconos, dejados por el usuario el abuelo en el siguiente tema: Iconos bbcode de mich (Fondos oscuros)
estos son útiles para estilos oscuros donde los botones blancos no se ven bien. salu2.

Un saludo

Cerrado

Volver a “Soporte para Estilos phpBB 3.0.x”