phpBB España Oficial

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

---

¿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:



Y este en plantillas como prosilver:



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:
Instrucciones:

1. Primero, debes agregar los siguientes BBcodes desde el ACP de tu foro phpBB3: http://www.phpbb-es.com/foro/pastebin.p ... view&s=123
   Recuerda dejar sin marca la opción "Mostrar en mensajes" (pues nosotros lo haremos, agregando las imagenes).
2. 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) Descargado 3498 veces

3. Realiza los siguientes cambios en tu plantilla, si está basada en prosilver: http://www.phpbb-es.com/foro/pastebin.p ... view&s=125
   
   Realiza los siguientes cambios, si está basada en subsilver2: http://www.phpbb-es.com/foro/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
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 estes 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 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.

---

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)
Lineas de reemplazo: [*] 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: http://www.phpbb-es.com/foro/viewtopic.php?f=9&t=17838

---

Y tambien los siguientes íconos, dejados por el usuario el abuelo en el siguiente tema: http://www.phpbb-es.com/foro/colaboraci ... ml#p134253
estos son útiles para estilos oscuros donde los botones blancos no se ven bien. salu2.

Un saludo

Las marquesinas no funcionan sino me equivoco, por lo demás está bien.

Salu2.

newboy, gracias ya está arreglado (en este sitio, y en los códigos que deje acá y en phpbbmods.info)

Gracias Mitch, gran trabajo. Lo he instalado y testeado sin problemas

Gracias Mitch, por la guía y por lo de este sitio

¿ Qué has modificado en el BBCode de la marquesina ? Creo que en el post sigue igual.

Salu2.

newboy, el como se agrega el BBcode en el ACP. El resto sigue igual.

gracias me re sirvio esto

Se merecía un Artículo especial este tema.

S@lu2

jaja vaya que quedo bien el artículo

gracias Kuka

Muchas gracias, mitch.....
Después de rastrear el foro porque no daba con este tema, lo encontré y funcionan genial.
De todas maneras, lo encontré tb en la dirección de tu firma.


PD: me queda por resolver el tema de agregar nuevos bbcodes que no me aparecen.. pero estos funcionan genial.
Y como ha dicho KuKa, se merecía un artículo especial ya que este es uno de los temas por el que la mayoría estamos interesados.

Zenkiu

A mi tambien me a funcionado muy bien aunque tengo un monton de nombres despues de las imagenes sera de los bbcodes que tenia activado me imagino que subiendo la foto ya se solucionara!
Muy buen trabajo felicidades!!!

Asi me va quedando

Pues se ve muy bien

para que ni aparezca ese signo de interrogación, en la "ñ", al editar el HTML, debes guardarlo en formato UTF-8 (si editas en notepad, o ultraedit por ejemplo, das click a guardar como, y abajo aparece la opcion de tipo de codificacion/archivo y se elige UTF8).

salu2

ok gracias voy a mirarlo

muy bien solucionado!!!