BB-Code: Spoiler "Bonito"

Bueno no se si es "Wooou que cosa de loco que armaste", pero la verdad me llevo un buen tiempo hacerlo jeje, y me dio ganas de compartirlo por aqui, no se tampoco si el foro adecuado en el que deberia postearlo.

Bueno esta es la imagen de como quedaria una vez realizado todos los pasos:


Imagen.gif

Pasos a seguir:

1. Subir la carpeta del rar a la raiz del foro
2. Ingresar al Panel de admin > Códigos BB > Agregar nuevo codigo BB
   
   • Titulo: Spoiler
   • Nombre de la etiqueta: Spoiler
   • Reemplazar:
     
     Código:

     <table border="0" cellpadding="0" cellspacing="0" width="50%">
         <tr>
             <td width="3%">
             <img border="0" src="images/misc/OCULTO/1.png"></td>
             <td background="images/misc/OCULTO/3F.png">
             <img border="0" src="images/misc/OCULTO/2.png"></td>
             <td>
             <img border="0" src="images/misc/OCULTO/3.png" width="69" height="37"></td>
         </tr>
         <tr>
             <td background="images/misc/OCULTO/7.png" width="3%" style="background-image: url('images/misc/OCULTO/7.png'); background-repeat: repeat-y; background-position-x: right"></td>
             <td width="100%" style="border-left-style:inset; border-left-width:1px; border-top-style:inset; border-top-width:1px"><div>
     <div id="show" style="background-color:#F2F6F8; background-repeat:repeat; margin: 0px;padding: 4px; width:100%">
         <input type="button" value="Ver" style="width:80px;font-size:14px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'ver';}">
     
     <div><div style="display: none">
     {param}</div>
         </div>
     </div>
        
     </div></td>
             <td width="3%" style="background-image: url('images/misc/OCULTO/4.png'); background-repeat: repeat-y; background-position-x: left"></td>
         </tr>
         <tr>
             <td width="3%">
             <img border="0" src="images/misc/OCULTO/6.png"></td>
             <td background="images/misc/OCULTO/8.png">
             &nbsp;</td>
             <td>
             <img border="0" src="images/misc/OCULTO/5.png"></td>
         </tr>
     </table>

   • Ejemplo: [spoiler]Texto oculto[/spoiler]
   • Descripcion: Ocultar texto
   • Usar {option}: NO
   • Imagen del boton: images/misc/OCULTO/SP.png
   • Eliminar Etiqueta Si Está en Blanco: SI
   • Todo el resto: NO
3. Guardar

Y eso es todo!!, Saludos y ojala alguien lo encuentre util.

Te ha quedado impresionante, me encanta. Absolutamente genial

Sin duda haz hecho un buen trabajo, tiene bonito aspecto y cumple su objetivo.

excelente! lo vi en un foro y me quedo gustando pero lo habian echo ellos.
Mil gracias!

Buenisimo!! Me alegro mucho que les haya gustado!!. Gracias por los comentarios

Esta muy bueno, te agradesco que lo compartieras con nosotros, pero seria bueno que subieras el PSD, para poder editar los colores, ya que no todos tenemos fondo blanco.

Pero fuera de eso, esta exelente!!!!

Muchas gracias.

esta bueno, lo usaria pero tengo el v4

Muchas gracias, no entiendo por que lo instale y mis estadísticas de promedio de carga a subido, pero en fin!

porque no funciona para vbulletin4?

Lo has probado¿? El problema está en que vbulletin 4 pone un borde a las tablas. Deberías de cambiar lo siguiente para que no aparezca, aunque no se si haciendo esto se pierde algún borde importante:

Abrir:

clientscript/vbulletin_css/style00001l/main_rollup.css

Editar:

.restore td {
/* Borders and padding to make the table readable. */
border: 1px solid #000;
padding: 0.5em;
}

Dejandolo asi:

.restore td {
/* Borders and padding to make the table readable. */
border: 0; /* 1px solid #000 */
padding: 0; /* 0.5em*/
}

También puedes añadirle un style especifico a la tabla, pero no se si resultaría.

Ese archivo al menos no existe en mi foro. Alguien sabe como se podra eliminar los bordes que posee el codigo :S?

para que aparezca dicho archivo, tienes que poner en las opciones de vbulletin, que el css se haga en archivos... (no recuerdo en que opción era, pero sale por aquí, para optimizar vbulletin)

Aun asi deberia ser posible editarlo mediante el panel de vbulletin :s

PD: Si se cual es la opción que dices

Yo la verdad, que no he conseguido ver como modificar el css desde vbulletin aun teniendo la opción que digo desactivada. Debería de poderse, pero no he conseguido como.

Bueno lo modifique el archivo pero aun asi se ve igual. A ti te funciona la modificacion?