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:
(http://macvalencia.es/images/cajetin.png)
Si se escribe esto:
[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:
(http://macvalencia.es/images/bbcodeextrares.png)
PROCEDIMIENTO DE IMPLEMENTACIÓN
Editar el archivo /Source/Subs.php
Buscar esto:
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:
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:
// 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:
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:
// Use numeric entities in the below string.
y añadimos esto:
$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:
// 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:
(http://macvalencia.es/images/nota.png)
nota.png
(http://macvalencia.es/images/aviso.png)
aviso.png
(http://macvalencia.es/images/truco.png)
truco.png
(http://macvalencia.es/images/info.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
(http://macvalencia.es/images/nota.gif)
nota.gif
(http://macvalencia.es/images/aviso.gif)
aviso.gif
(http://macvalencia.es/images/truco.gif)
truco.gif
(http://macvalencia.es/images/info.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:
(http://macvalencia.es/images/muestrafinal.png)
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.
siempre son buenos este tipo de tutos.. ya que mas de uno necesita como idea algo asi para hacer lo que uno quiere..
excelente ;)
Buen tuto.
Gracias por el aporte ;)
Muy bueno!
Saludos
A mi me encanta! Que parte del código se tendría que editar para cambiar el texto, para traducirlo en ingles por ejemplo?
Quote from: Sabrinova on April 17, 2012, 04:48:17 PM
A mi me encanta! Que parte del código se tendría que editar para cambiar el texto, para traducirlo en ingles por ejemplo?
QuoteAhora 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)
Quote from: Sabrinova on April 17, 2012, 04:48:17 PM
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:
'before' => '[xxxxx]',
'after' => '[/xxxxx]',
Gracias Homero2! Eso es lo que preguntaba ;) Lo voy a probar mañana, te mantendré informado :)
gracias Homero2 se ve genial en el foro y es sencillo hacer las modificaciones ;D ;D
tengo una duda.. por que no puedo centrarlos, agrego el code center y el aviso
no se centra....
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:
<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.
ah ya entendi pero asi siempre saldria centrado,
no se puede elegir con el codigo bbc center cuando centrarlo asi:
[center][aviso]Prueba de Aviso ^^[/aviso][/center]
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.
no te poreocupes solo era una idea que tenia....
y tienes razon asi destaca el resto del mensaje...
gracias por tu ayuda ^^
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.
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;">
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)
Excelente tutorial gracias man.
Saludos.
Quote from: luuuciano on April 20, 2012, 11:11:36 PM
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?
<div style="padding-left: 45px; padding-right: 200px;">
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
Enhorabuena por el trabajo amigo
Excelente! me ayuda mucho este tutorial. Gracias bro por tu contribución ;)
esta muy buena la esplicacion, me a servido
pero se puede hacer esto mismo pero que los bbc, esten en una lista? asi como los bbc de colores que estan en una lista
Hola buenas a tod@s :D
Bueno la cosa es que he implementado este código en el foro SMF 2.0.2 y no hace si no darme log de errores, quedo bien menos al poner el puntero encima que no da descripción de que es.
Estoy utilizando Theme normal por defecto. Les dejo el error...
Undefined index: Info
Aplicar filtro: Mostrar sólo los errores de este archivo
Archivo: /home/xxxxxxx/public_html/foro/Sources/Subs-Editor.php
Línea: 1537
Tipo de error: Indefinidos
Alguien me podría decir cual es el problema? y por que podría ser que no de la descripción, he puesto todo exactamente como dice el Tutorial. Me da el mismo error con los cuatro BBC
Muchas gracias de antemano :)
El problema esta en que te falto poner las variables de texto.
Agrega esto al archivo /Themes/default/languages/Post.tuidioma.php
$txt['aviso'] = 'Inserta etiqueta de Aviso';
$txt['truco'] = 'Inserta etiqueta de Truco';
$txt['nota'] = 'Inserta etiqueta de Nota';
$txt['info'] = 'Inserta etiqueta de Informacion';
Quote from: ^HeRaCLeS^ on September 20, 2012, 09:13:34 AM
El problema esta en que te falto poner las variables de texto.
Agrega esto al archivo /Themes/default/languages/Post.tuidioma.php
$txt['aviso'] = 'Inserta etiqueta de Aviso';
$txt['truco'] = 'Inserta etiqueta de Truco';
$txt['nota'] = 'Inserta etiqueta de Nota';
$txt['info'] = 'Inserta etiqueta de Informacion';
Muchas gracias por la respuesta ;) voy a probar a ver...
Saludos :D
Yo quiero hacer esta modificacion, pero para crear como unas 10 cajas
se podra hacer, pero que queden en forma de lista?