Header Redondeado

Esto es algo que ví en vBSEO Test Forums, me gustó la separación que hacen del header y luego redondearlo. Así que intenté hacerlo igual, solo que no se puede hacer todo por las variables de estilo...

Lo primero que hay que hacer es fijar un margen para la parte superior en doc_margin:
11-26-2009 8-26-57 AM.png

Luego hay que editar la plantilla vbulletin-chrome.css

Remplazar esto:

Código HTML:

.above_body {
	background:{vb:stylevar header_background};
	_background-image: none;
	margin: {vb:stylevar header_padding};
	width: 100%;
	-moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
	-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
	-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
}

Por esto:

Código HTML:

.above_body {
	background:{vb:stylevar header_background};
	_background-image: none;
	margin: {vb:stylevar header_padding};
	width: 100%;
	-moz-border-radius: {vb:stylevar border_radius};
	-webkit-border-radius: {vb:stylevar border_radius};
}

Gracias!

La verdad que queda MUY MUY Bien!! =D

¿Esto solo se puede hacer en la versión 4.0 o los estilos para esta versión?

Es para vB4, pero si quieres redondear algo de un estilo de esta versión puedes agregar una clase a tu css al final de CSS Principal, algo como:

Código HTML:

.redondeado {
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}

Luego agregas esa clase a lo que quieres redondear. Ten en cuenta que ese código solo redondea la parte de arriba de una tabla.

Si quieres redondear las cuatro esquinas de una tabla, sería:

Código HTML:

.redondeado {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

}

Algo que se me olvidó mencionar, es que esto solo funciona para navegadores que usan webkit y para firefox. No funciona para internet explorer.

alguna captura para ver como keda???

Puedes verlo acá en vBHispano, lo redondeado de arriba de la cabecera del foro.

Yo e intentado hacerlo y no me funciona al editar la plantilla vbulletin-chrome.css,le pongo el codigo le doy a guardar y hay se queda no vuelve a editor de plantillas ni a la plantilla,vuelvo a ir a la plantilla y no a guardado los cambios.

Iniciado por Elmer

Es para vB4, pero si quieres redondear algo de un estilo de esta versión puedes agregar una clase a tu css al final de CSS Principal, algo como:

Código HTML:

.redondeado {
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}

Luego agregas esa clase a lo que quieres redondear. Ten en cuenta que ese código solo redondea la parte de arriba de una tabla.

Si quieres redondear las cuatro esquinas de una tabla, sería:

Código HTML:

.redondeado {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

}

Algo que se me olvidó mencionar, es que esto solo funciona para navegadores que usan webkit y para firefox. No funciona para internet explorer.

Elmer agrego esto al final de la plantilla vbulletin-chrome.css y no se redondea yo tengo la 4.0.1 y le doy cargar y guardar y nada no redondea la cabezera y esto es lo que ahgrego al final de la plantilla

.redondeado {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}

Que cosa no se redondea? si quieres redondear el header debes agregar lo que está en el primer mensaje. Si quieres redondear un div propio, agrega este css al final o principio.. donde quieras:

Código HTML:

.redondeado {
	-moz-border-radius: {vb:stylevar border_radius};
	-webkit-border-radius: {vb:stylevar border_radius};

}

Luego debe ponerle a tu div esa clase como en <div class="redondeado">

Lo que quiero redondear es el cabezado como lo tiene vBHispano la parte de arriba que esta redondeada le he dado y nada todavia le estoy dando

tengo que editar esta plantilla vbulletin-chrome.css para que quede redondeado aqui esta mi plantilla y nada ya no hallo como hacerle Elmer Y lo quiero colocar asi por que sebe bien bonito asi ledas como mas estetica a la pagina

Disculpa, parece que no me había dado cuenta que en la última versión de vBulletin cambió eso. He actualizao el tema con los pasos para lograrlo.

saluos.

Yo no veo nada redondeado?? Alguien me podria decir donde esta lo redondeado aqui en vbh??

Las esquinas de la parte de arriba, donde aparece el logo y el menú... si usas Internet Explorer no vas a poder verlo, esto solo sirve para firefox, chrome, safari..

Ah, ya lo he visto... Pero he tenido que abrir el chrome para poder observarlo, pues en el opera (que es mi navegador por defecto) no se observa...

Iniciado por Elmer

Las esquinas de la parte de arriba, donde aparece el logo y el menú... si usas Internet Explorer no vas a poder verlo, esto solo sirve para firefox, chrome, safari..

Iniciado por Elmer

Disculpa, parece que no me había dado cuenta que en la última versión de vBulletin cambió eso. He actualizao el tema con los pasos para lograrlo.

saluos.

Ok lo actualisastes ya lo voy a usar haber si ahora si me sale gracias...

Elmer ya me funciono prefecto muchas gracias compañero muy bien