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

Started by Homero2, April 17, 2012, 06:22:55 AM

Previous topic - Next topic

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:

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

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:


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^

^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal


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

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)


¡¡NEW MOD: Sparkles User Names!!!

Homero2

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]',

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  ;D ;D

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:

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

[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.
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

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)
No me agradan los foros que no te dejan borrar TU PROPIO usuario, como por ejemplo smfsimple.com.
E incluso te mandan emails no solicitados, de los cuales, quizá, no puedas escapar porque NO te dejan posibilidad a deshabilitarlos (a menos que NO te tengan en su lista negra).


Homero2

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;">

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
No me agradan los foros que no te dejan borrar TU PROPIO usuario, como por ejemplo smfsimple.com.
E incluso te mandan emails no solicitados, de los cuales, quizá, no puedas escapar porque NO te dejan posibilidad a deshabilitarlos (a menos que NO te tengan en su lista negra).

Casal

♫♪♫♪

Advertisement: