Globos con CSS

**Ryuk** · 24/07/2010 13:32

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.

Código HTML:

<div class="Globos felicidades">
<span class="strong">FELICIDADES!</span> Mensaje de felicitacion!
</div>

Código HTML:

<div class="Globos informacion">
<span class="strong">INFORMACION!</span> Mensaje de informacion.
</div>

Código HTML:

<div class="Globos peligro">
<span class="strong">PELIGRO!</span> Mensaje de peligro!
</div>

Código HTML:

<div class="Globos error">
<span class="strong">ERROR!</span> Mensaje de error.
</div>

Código HTML:

<div class="Globos noticia">
<span class="strong">NOTICIAS!</span> Mensaje de noticias.
</div>

__________________________________________________ _______________________

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:

Código:

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

Código:

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

Código 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.

**Andrés Durán** · 24/07/2010 20:14

Están excelentes, me encantaron

.

Cuando tenga foro indudablemente lo aplicaré

. Muchas gracias por compartir, kuervo.

**1antares1** · 25/07/2010 06:14

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)

**Ryuk** · 25/07/2010 22:32

1antares1 no puse demo ya que con las imagenes pense que bastaba, pero en fin aqui un demo.

Saludos.

**1antares1** · 26/07/2010 11:23

Jeje!

Por que no publicarlo antes éstos globos. Tuve que darte la idea y haciendo mis BBcodes feitos, para que hagas éstos

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

1.jpg

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!

**1antares1** · 26/07/2010 13:36

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!

**Ryuk** · 26/07/2010 17:40

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.

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

public_html/images/Globos

Saludos.

**1antares1** · 26/07/2010 18:47

Iniciado por kuervo

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.

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

public_html/images/Globos

Saludos.

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

Que bien.

Saludos! Ahí tus gracias.

**est3ban129** · 23/09/2010 03:07

Hola,

Primero de todo felicitarte por los globos estan muy bien

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

**Ryuk** · 23/09/2010 03:22

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: vBulletin Hispano - Nuevos Lineamientos

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: [info=INFORMACION]Mensaje de informacion.[/info]

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.

**NkC** · 23/09/2010 15:58

Actualiza las imagenes porfavor ya no se ven

**Ryuk** · 23/09/2010 18:52

Las imagenes las perdi entre mi pc, maldito tinypic.
Apenas las encuentre las subire.

**~~Agustin~~** · 03/10/2010 14:16

uhhh chabon te mandaste la parte.
si fuera T! te daria 10 puntos.
Aca te agradezco y agrego este post a favoritos.

**NkC** · 03/10/2010 14:39

!! las imágenes, se ven muy bien. Favoritos también

Globos con CSS

LinkBack

Herramientas

Califica este tema

Visualizar

Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Re: Globos con CSS

Sobre vBHispano

Links

Patrocinadores