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

SMF Support > Tutoriales

(1/6) > >>

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: ---[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]
--- End code ---

Se verá esto otro en el mensaje:

PROCEDIMIENTO DE IMPLEMENTACIÓN
Editar el archivo /Source/Subs.php
Buscar esto:

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

$codes = array(

--- End code ---

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

--- Code: --- 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,
),

--- End code ---

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: --- // 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(

--- End code ---

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

--- Code: --- 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(),

--- End code ---

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: ---// Use numeric entities in the below string.
--- End code ---

y añadimos esto:

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

--- End code ---

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

--- Code: ---// Escape any single quotes in here twice.. 'it\'s' -> 'it\\\'s'.
--- End code ---

Ú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

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

Navigation

[0] Message Index

[#] Next page

Go to full version