[BBC] Como crear BBCode de AVISO, NOTA, TRUCO e INFO en tu foro.

[Homero2]

COMO CREA BBCode de AVISO, NOTA, TRUCO e INFO

Creé en mi foro unos códigos BB para que en los mensajes puedan salir recuadros de colores con texto dentro.
Y aquí comparto con todos ustedes como lo hice por si alguno de ustedes lo quiere implementar en su propio foro.

Los mensajes son:
Aviso
Nota
Truco
Info
Pero modificando los nombre podéis poner lo que mejor se adapte a su foro.

Captura para que se vea como queda el editor:



Si se escribe esto:

Code Select Expand

[nota]Este es el recuadro de una Nota[/nota]
[aviso]Este es el recuadro de un Aviso[/aviso]
[truco]Este es el recuadro de un Truco[/truco]
[info]Este es el recuadro de Información[/info]

Se verá esto otro en el mensaje:





PROCEDIMIENTO DE IMPLEMENTACIÓN

Editar el archivo /Source/Subs.php
Buscar esto:

Code Select Expand

parsed_tags_allowed: an array restricting what BBC can be in the
  parsed_equals parameter, if desired.
*/

$codes = array(


y a continuación añadir este código:

Code Select Expand

array(
'tag' => 'aviso',
'before' => '<div style="margin: 15px 15px;"><div style="padding-left: 45px; padding-right: 200px;"><div style="border-radius: 10px 10px 10px 10px; background:#fff2f4 none repeat scroll 0 0; border:1px solid #be0000; margin:5px 10px 0; text-align:justify; "><div style="padding: 0pt 5px; background: #be0000 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; "><font color="#fff2f4"></font></div><table width="100%%" border="0"><tbody><tr><td width="7%"><img src="http://tuFoto/Themes/default/images/aviso.png"/><b>AVISO</b></td><td width="90%">',
'after' => '</td><td width="5%%"></td></tr></tbody></table></div></div></div>',
'trim' => 'outside',
'block_level' => true,
),
array(
'tag' => 'truco',
'before' => '<div style="margin: 15px 15px;"><div style="padding-left: 45px; padding-right: 200px;"><div style="border-radius: 10px 10px 10px 10px; background:#ffffcc none repeat scroll 0 0; border:1px solid #d5b900; margin:5px 10px 0; text-align:justify; "><div style="padding: 0pt 5px; background: rgb(213, 185, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; "><font color="#fff2f4"></font></div><table width="100%%" border="0"><tbody><tr><td width="7%"><img src="http://www.tuForo/Themes/default/images/truco.png"/><b>TRUCO</b></td><td width="90%">',
'after' => '</td><td width="5%%"></td></tr></tbody></table></div></div></div>',
'trim' => 'outside',
'block_level' => true,
),
array(
'tag' => 'info',
'before' => '<div style="margin: 15px 15px;"><div style="padding-left: 45px; padding-right: 200px;"><div style="border-radius: 10px 10px 10px 10px; background:#d4e8ff none repeat scroll 0 0; border:1px solid #42a1de; margin:5px 10px 0; text-align:justify; "><div style="padding: 0pt 5px; background: #42a1de none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; "><font color="#fff2f4"></font></div><table width="100%%" border="0"><tbody><tr><td width="7%"><img src="http://www.tuForo/Themes/default/images/info.png"/>  <b>INFO</b> </td><td width="90%">',
'after' => '</td><td width="5%%"></td></tr></tbody></table></div></div></div>',
'trim' => 'outside',
'block_level' => true,
),
array(
'tag' => 'nota',
'before' => '<div style="margin: 15px 15px;"><div style="padding-left: 45px; padding-right: 200px;"><div style="border-radius: 10px 10px 10px 10px; background:#defee3 none repeat scroll 0 0; border:1px solid #28c25a; margin:5px 10px 0; text-align:justify; "><div style="padding: 0pt 5px; background: #28c25a none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; "><font color="#fff2f4"></font></div><table width="100%%" border="0"><tbody><tr><td width="7%"><img src="http://www.tuForo/Themes/default/images/nota.png"/> <b>NOTA</b> </td> <td width="90%">',
'after' => '</td><td width="5%%"></td></tr></tbody></table></div></div></div>',
'trim' => 'outside',
'block_level' => true,
),



NOTA:
Sustituir htt p://www.tuForo/Themes/default/images/xxxx.png por la dirección de vuestro foro
Si decides cambiar el texto que aparece debajo de las imágenes, cambia las palabras que aparecen al final de 'before' ... <b>XXXX</b> ..., donde XXXX puede ser INFO, NOTA, TRUCO y AVISO.



Luego editar el archivo /source/Subs-Editor.php
Buscad estas líneas:

Code Select Expand

// The below array makes it dead easy to add images to this control. Add it to the array and everything else is done for you!
$context['bbc_tags'] = array();
$context['bbc_tags'][] = array(


y a continuación añadir este código:

Code Select Expand


array(
'image' => 'aviso',
'code' => 'aviso',
'before' => '[aviso]',
'after' => '[/aviso]',
'description' => $txt['aviso']
),
array(
'image' => 'truco',
'code' => 'truco',
'before' => '[truco]',
'after' => '[/truco]',
'description' => $txt['truco']
),
array(
'image' => 'nota',
'code' => 'nota',
'before' => '[nota]',
'after' => '[/nota]',
'description' => $txt['nota']
),
array(
'image' => 'info',
'code' => 'informacion',
'before' => '[info]',
'after' => '[/info]',
'description' => $txt['info']
),
array(),


Si queréis cambiar las palabras claves tendréis que cambiar estas líneas en cada array
before: activa el código BB
after: cierra el código BB



Ahora vamos a editar el archivo /Themes/default/languages/Post.tuidioma.php, para añadir el texto que se verá al poner el ratón encima del botón (descripción)

Buscamos esta línea:

Code Select Expand

// Use numeric entities in the below string.

y añadimos esto:

Code Select Expand

$txt['aviso'] = 'Inserta etiqueta de Aviso';
$txt['truco'] = 'Inserta etiqueta de Truco';
$txt['nota'] = 'Inserta etiqueta de Nota';
$txt['info'] = 'Inserta etiqueta de Informacion';


Yo lo añadí al final justo por encima de esto:

Code Select Expand

// Escape any single quotes in here twice.. 'it\'s' -> 'it\\\'s'.



ÚLTIMO PASO
Después de esto hay que copiar estas imágenes que propongo en /Themes/default/images/, estas imágenes se verán en el curpo del mensaje:


nota.png


aviso.png


truco.png


info.png

Estas tienen que ser PNG y con estas dimensiones 48x48 píxeles


Ahora copiad estas otras imágenes que propongo en /Themes/tuTheme/images/bbc/, sustituid tuTheme por el tema que usáis en el foro


nota.gif


aviso.gif


truco.gif


info.gif

Estas tienen que ser GIF con estas dimensiones 23x22 píxeles.

Resultado final de todas estas modificaciones, creo que valío la pena:





Con esto es todo, pero antes de terminarl hay que agradecer la ayuda que me brindaron: ^HeRaCLeS^, vicram10, luuuciano y a esta gran comunidad SMF
A todos ello GRACIAS, sin su ayuda no hubiera quedado con este aspecto.

Saludos y espero os sirva.

[vicram10]

siempre son buenos este tipo de tutos.. ya que mas de uno necesita como idea algo asi para hacer lo que uno quiere..
excelente

[^HeRaCLeS^]

Buen tuto.

Gracias por el aporte

[lean]

Muy bueno!
Saludos

[Chalky]

A mi me encanta!  Que parte del código se tendría que editar para cambiar el texto, para traducirlo en ingles por ejemplo?

[4Kstore]

A mi me encanta!  Que parte del código se tendría que editar para cambiar el texto, para traducirlo en ingles por ejemplo?

Ahora vamos a editar el archivo /Themes/default/languages/Post.tuidioma.php, para añadir el texto que se verá al poner el ratón encima del botón (descripción)

[Homero2]

A mi me encanta!  Que parte del código se tendría que editar para cambiar el texto, para traducirlo en ingles por ejemplo?

Para cambiar el texto que aparece debajo de los iconos, tienes que editar Subs.php

Busca en 'before' => '<div style="margin: 15px 15px;">... verás casi al final el texto en mayúsculas, AVISO, NOTA, INFO, TRUCO, esos también tendrás que cambiarlos.

Los que activan el BBC los tienes en Subs-Editor y son estos:

Code Select Expand

'before' => '[xxxxx]',
'after' => '[/xxxxx]',

[Chalky]

Gracias Homero2!  Eso es lo que preguntaba     Lo voy a probar mañana, te mantendré informado

[haseo_shaoran]

gracias Homero2 se ve genial en el foro y es sencillo hacer las modificaciones 

tengo una duda.. por que no puedo centrarlos, agrego el code center y el aviso
no se centra....

[Homero2]

Hola haseo_shaoran, al centrar solo se centra el texto dentro del recuadro, la posición del recuadro es estática, pero puedes modificar su posición haciendo algunas pruebas hasta lograr el efecto deseado.

Estas son las coordenada a modificar para centrar los recuadros:
Edita /source/Subs.php y localiza los 4 arrays que se añadieron, ahora busca dentro de 'before' esto:

Code Select Expand

<div style="padding-left: 45px; padding-right: 200px;">

Donde -> padding-left: 45px es donde empezará a dibujarse el recuadro contando 45 pixeles desde la parte izquierda de la pantalla. Aumenta el valor de 45px para centrar el texto, pero verás que el recuadro se acorta.

Ahora nos vamos al otro valor padding-right: 200px, es igual que el anterior pero en la parte derecha de la pantalla. Disminuye este valor para centrar y agrandar el recuadro.

PD:
- Si quieres el recuadro centrado, pon los mismo valores en los 2 parámetro padding-left y padding-right, creo que 100 o 125 podrían ser los valores correcto para lo que buscas.
- Esto lo tienes que hacer en los 4 arrays

Ya contarás como ha ido.

[haseo_shaoran]

ah ya entendi pero asi siempre saldria centrado,
no se puede elegir con el codigo bbc center cuando centrarlo asi:

Code Select Expand

[center][aviso]Prueba de Aviso ^^[/aviso][/center]

[Homero2]

No pensé en ello, ya que al ser mensajes de atención los hice para que no estuvieran centrado con el texto, así destaca al resto del mensaje.

A ver si los experto en programación PHP pueden hacer algo al respecto, o por lo menos dar una orientación que se puede hacer para que los BBC de centrado tenga efecto sobre el cuadro.

[haseo_shaoran]

no te poreocupes solo era una idea que tenia....
y tienes razon asi destaca el resto del mensaje...

gracias por tu ayuda ^^

[^HeRaCLeS^]

Podrian probar quitando el 'block_level' => true, para ver si asi lo pueden centrar.
Lo que pasa es que al hacer eso cualquier bbc influira en el codigo.

[Homero2]

No funciona quitando 'block_level' => true, y es que las coordenadas son fijas y dependen del margen derecho e izquierdo, quizá por eso no funciona.

He estado haciendo pruebas y como mejor queda es centrado, las coordenadas que puse son estas:
<div style="padding-left: 70px; padding-right: 80px;">

[luuuciano]

Podrías probar con algo tipo margin: 0 auto; width: 75%
o 15px auto; width: 75%;
el primer valor sería arriba/abajo, el otro izquierda derecha, auto lo mandaría parejo para ambos (25%/2)

[GonzaH]

Excelente tutorial gracias man.

Saludos.

[Homero2]

Podrías probar con algo tipo margin: 0 auto; width: 75%
o 15px auto; width: 75%;
el primer valor sería arriba/abajo, el otro izquierda derecha, auto lo mandaría parejo para ambos (25%/2)

Lo he probado y efectivamente el recuadro sale centrado, ahora, si pongo esto que dices esto otro sobra?

Code Select Expand

<div style="padding-left: 45px; padding-right: 200px;">

[luuuciano]

Claro, eso sobraría... o quizá no, dependiendo de lo que busques... margin y paddings son para lo externo e interno... (no recuerdo como estaba aplicado en tu caso)
http://webdesign.about.com/od/faqsandhelp/f/bl_faq5_7a.htm

[Casal]

Enhorabuena por el trabajo amigo