Globos con CSS

I

imported_Ryuk Seguir

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 Feb 2009
Mensajes
1.138
Hola querida comunidad de vBHispano, hoy viendo un tema se me ocurrio postear estos globos hechos con css para anuncios o para que lo que quieran.

Ahora bien, solo indicare los codigos para cada globo si lo quieren transformar en BBcode sera de su ingenio, si no saben hacerlo BBcode hare un pequeño resumen mas abajo. :)

_________________________________________________________________________

1. Primer paso.

1hxctd.jpg
HTML: 
<div class="Globos felicidades">
<span class="strong">FELICIDADES!</span> Mensaje de felicitacion!
</div>
Hacer clic para expandir...
14xcqs5.jpg
HTML: 
<div class="Globos informacion">
<span class="strong">INFORMACION!</span> Mensaje de informacion.
</div>
Hacer clic para expandir...
2aigebm.jpg
HTML: 
<div class="Globos peligro">
<span class="strong">PELIGRO!</span> Mensaje de peligro!
</div>
Hacer clic para expandir...
2j4252t.jpg
HTML: 
<div class="Globos error">
<span class="strong">ERROR!</span> Mensaje de error.
</div>
Hacer clic para expandir...
123w8xt.jpg
HTML: 
<div class="Globos noticia">
<span class="strong">NOTICIAS!</span> Mensaje de noticias.
</div>
Hacer clic para expandir...
_________________________________________________________________________



2. Segundo Paso.


Ahora colocaremos el css, la guia tiene como prefijo vbulletin 4 asi que empezaremos con esta version.

Admincp - Estilos y Plantillas - Buscar.
​

Eligen su estilo, ponen additional.css, solo titulos, buscar.
Doble click sobre la plantilla para editar y colocan el siguiente codigo:

Insertar CODE, HTML o PHP: 
.Globos {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:6px 10px 10px 45px;position:relative;margin:0 0 15px 0;cursor:pointer;}
.Globos span {display:block;font-weight:bold;padding:0 0 4px;}
.Globos.felicidades {color:#1c8400;border:#b4e8aa solid 1px;background:#e9f9e5 url("http://www.vbhispano.com/foros/images/Globos/Felicidades.png") 10px 50% no-repeat;}
.Globos.peligro {color:#828400;border:#e8e3aa solid 1px;background:#f9f9e5 url("http://www.vbhispano.com/foros/images/Globos/Peligro.png") 10px 50% no-repeat;}
.Globos.error {color:#b50007;border:#e8aaad solid 1px;background:#f9e5e6 url("http://www.vbhispano.com/foros/images/Globos/Error.png") 10px 50% no-repeat;}
.Globos.informacion {color:#0055b5;border:#aac6e8 solid 1px;background:#e5ecf9 url("http://www.vbhispano.com/foros/images/Globos/Info.png") 10px 50% no-repeat;}
.Globos.noticia {color:#000000;border:1px solid #fdd845;background:#fff6bf url("http://www.vbhispano.com/foros/images/Globos/Noticias.png") 10px 50% no-repeat;}
Guardar.


Por ultimo suben la carpeta Globos (adjunta en el zip) por FTP a la carpeta images/ que esta en el root de su directorio.

Listo.



______________________________________________________________________



Para vbulletin 3.8.x


Admincp - Estilos y Plantillas - Administrar Estilos.
​

En el menu desplegable de su estilo eligen CSS Principal, buscan al final Definición Adicional de CSS y en el segundo recuadro al final colocan el siguiente codigo.

Insertar CODE, HTML o PHP: 
 .Globos {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:6px 10px 10px 45px;position:relative;margin:0 0 15px 0;cursor:pointer;}
.Globos span {display:block;font-weight:bold;padding:0 0 4px;}
.Globos.felicidades {color:#1c8400;border:#b4e8aa solid 1px;background:#e9f9e5 url("http://www.vbhispano.com/foros/images/Globos/Felicidades.png") 10px 50% no-repeat;}
.Globos.peligro {color:#828400;border:#e8e3aa solid 1px;background:#f9f9e5 url("http://www.vbhispano.com/foros/images/Globos/Peligro.png") 10px 50% no-repeat;}
.Globos.error {color:#b50007;border:#e8aaad solid 1px;background:#f9e5e6 url("http://www.vbhispano.com/foros/images/Globos/Error.png") 10px 50% no-repeat;}
.Globos.informacion {color:#0055b5;border:#aac6e8 solid 1px;background:#e5ecf9 url("http://www.vbhispano.com/foros/images/Globos/Info.png") 10px 50% no-repeat;}
.Globos.noticia {color:#000000;border:1px solid #fdd845;background:#fff6bf url("http://www.vbhispano.com/foros/images/Globos/Noticias.png") 10px 50% no-repeat;}
Guardar.


Por ultimo suben la carpeta Globos (adjunta en el zip) por FTP a la carpeta images/ que esta en el root de su directorio.

Listo.


________________________________________________________________________



Por ultimo si lo quieren transformar en BBcode un ejemplo seria asi:

Admincp - Codigos BB - Crear nuevo codigo BB.
​

Titulo: Informacion

Nombre de la Etiqueta del BB Code: info

Reemplazar:
HTML: 
<div class="Globos informacion">
<span class="strong">{option}</span> {param}
</div>
Ejemplo: [info=INFORMACION]Mensaje de informacion.[/info]

Usar {option}: SI

Imagen del boton, colocan las que uds quieran o lo dejan sin nada.

Guardar.

No es dificil de hacer, asi que espero les sea util. :)


Saludos y adios. ;)
 
A

Andrés Durán

Xi
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Abr 2009
Mensajes
4.371
Están excelentes, me encantaron :$.

Cuando tenga foro indudablemente lo aplicaré ^^. Muchas gracias por compartir, kuervo.
 
1

1antares1

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 May 2010
Mensajes
129
Gracias Kuervo, de verdad que están perfectos. Mejores de los que estaba buscando (Los semejantes) Jeje! Sería bueno que los publicaras en vBulletin.org para que lo descarguen.

Muy bonito, será capás que tengas un foro demo para probarlos?

Es que ingresé a tu web y aún no los has colocado. Me gustaría saber a ver su estructura completa desde la web. Desde ya, gracias y saludos! (Y)
 
I

imported_Ryuk

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 Feb 2009
Mensajes
1.138
1antares1 no puse demo ya que con las imagenes pense que bastaba, pero en fin aqui un demo.



Saludos. ;)
 
1

1antares1

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 May 2010
Mensajes
129
Jeje! :( Por que no publicarlo antes éstos globos. Tuve que darte la idea y haciendo mis BBcodes feitos, para que hagas éstos :O

Que están super y bien hechos. Están mejor que los que hice personalizadamente, como éstos:

Ver el archivo adjunto 4037

Gracias por los tuyos. Sólo quería un demo para ver sus iconos respectivos del editor y al escribirlos.

Pero como los tuyos tienen Texto mayor descriptivo del contenido, están mucho mejor! :)

Saludos!
 
1

1antares1

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 May 2010
Mensajes
129
Hola amigo, verificando tu código. todo anda bien, a la perfección.

Pero tengo un problema con los iconos. Sale todo el reacudro completo pero la imagen que lo identifica, no sale.

Copie las imagenes al FTP, y los llamo al FTP. Hice los pasos del código del BB y todo bien. Sale el cuadro, más no la imagen.

Espero tu respuesta antes mi problema. Gracias.

Saludos!
 
I

imported_Ryuk

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 Feb 2009
Mensajes
1.138
Tienes que subir las imagenes de la carpeta Globos en la carpeta images que esta en la raiz de tu foro, un ejemplo es viendo la ruta en el demo que te di.

[noparse]http://www.tuforo.com/images/Globos/Felicidades.png[/noparse] que seria
Felicidades.png


public_html/images/Globos

Saludos. ;)
 
1

1antares1

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 May 2010
Mensajes
129
kuervo dijo:
Tienes que subir las imagenes de la carpeta Globos en la carpeta images que esta en la raiz de tu foro, un ejemplo es viendo la ruta en el demo que te di.

[noparse]http://www.tuforo.com/images/Globos/Felicidades.png[/noparse] que seria
Felicidades.png


public_html/images/Globos

Saludos. ;)
Hacer clic para expandir...


Jeje! Gracias bro. Ya había hecho correctamente eso.

El error era, que copié el codigo CSS del vbulletin 3.8 y no del 4 jeje! Y por eso no me generaba la imagen.

Lo cambié y exactamente, era eso. Me había equivocado, disculpa.

Muy bueno tus BBcodes, y aparte, esquinas redondeadas :O Que bien.

Saludos! Ahí tus gracias.
 
E

est3ban129

Alfa
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
22 Jul 2009
Mensajes
16
Hola,

Primero de todo felicitarte por los globos estan muy bien :D

Tengo 1 problemilla, tengo vBulletin 4.0.4 y sigo los pasos pero no me aparecen los globos... nose que hago mal porque lo copio tal cual.

Copio los css en additional.css de la plantilla y despues en el bbcode tal cual lo pone en el ejemplo pero no aparecen los globos. Me aparece esto en el post:

[info=INFORMACION]Mensaje de informacion.[/info]

Haber si alguien me lo puede solucionar :)

Gracias.


Ya esta solucionadojeje que tonto me falto activar la opcion "option" XD
 
I

imported_Ryuk

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 Feb 2009
Mensajes
1.138
Primero que nada, actualiza la informacion de tu perfil y agregar la url de tu foro para poder recibir soporte.
Mas informacion, lee el siguiente tema: Enlace eliminado

Edito. Estuve mirando el codigo y tenia un error, en el ejemplo del BBcode puse;

Ejemplo: [info=INFORMACION]Mensaje de informacion.[info]

Se me fue cerrar la etiqueta asi:

Ejemplo: [noparse][info=INFORMACION]Mensaje de informacion.[/info][/noparse]

Otra cosa, si pruebas el BBcode desde el panel de administracion no te funcionara ya que el css esta en las plantillas.

Pruebalo directamente en un post.

Saludos.
 
I

imported_Ryuk

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 Feb 2009
Mensajes
1.138
Las imagenes las perdi entre mi pc, maldito tinypic.
Apenas las encuentre las subire.
 
I

imported_Agustin

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
8 Ago 2010
Mensajes
399
uhhh chabon te mandaste la parte.
si fuera T! te daria 10 puntos.
Aca te agradezco y agrego este post a favoritos.
 
Hay que estar conectado o registrado para responder aquí.
Arriba