Header Redondeado

imported_Elmer · 26 Nov 2009

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:
Ver el archivo adjunto 1971

Luego hay que editar la plantilla vbulletin-chrome.css

Remplazar esto:

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:

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

jesusanz · 26 Nov 2009

Gracias!

La verdad que queda MUY MUY Bien!! =D

coleccionocromo · 27 Nov 2009

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

imported_Elmer · 27 Nov 2009

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:

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:

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.

ClErK · 8 Ene 2010

alguna captura para ver como keda???

imported_Elmer · 8 Ene 2010

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

Traiman · 9 Ene 2010

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.

ZEL · 27 Ene 2010

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

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:

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

imported_Elmer · 27 Ene 2010

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:

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

ZEL · 27 Ene 2010

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

imported_Elmer · 27 Ene 2010

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.

Oswaldo Gutiérrez · 28 Ene 2010

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

imported_Elmer · 28 Ene 2010

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

Oswaldo Gutiérrez · 28 Ene 2010

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

ZEL · 28 Ene 2010

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

Elmer dijo:
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 😀

KingRuko · 30 Ene 2010

Perfecto, gracias elmer.

By Ramses · 11 Mar 2010

Interesante solo agregar que los que ocupen background en sus skins personalizados tienen que tener en cuenta la siguiente linea para que no se repita en el footer:

moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};

Oswaldo Gutiérrez · 13 Mar 2010

Segun las especificaciones del Opera 10.50 ya soportan CSS3, como seria el header redondeado para este navegador?? Porque yo sigo sin verlo aquí en vbh...

---------- Actualizado a las 02:14 ---------- Original a las 01:35 ----------

Listo, he conseguido como... El opera 10.5 trabaja con las funciones estandar de CSS3, es decir:

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-radius

Y para IE8 (solo en modo=IE8), seria:

-ms-border-radius
-ms-border-radius-topleft
-ms-border-radius-topright
-ms-border-radius-bottomleft
-ms-border-radius-bottomright

Darths · 14 Mar 2010

Hola, me ha funcionado con respecto al header, ahora me gustaria aplicarlo en los Avisos asicomo lo tienen aqui.
alguien sabe como ?

Andrés Durán · 14 Mar 2010

Hola Darths.

Busca en la plantilla vbulletin-chrome.css este código:

Insertar CODE, HTML o PHP:

    -webkit-box-shadow: -2px 2px 2px {vb:stylevar notices_shadow_color};
    text-align: {vb:stylevar left};
    clear:both;

Añade debajo:

Insertar CODE, HTML o PHP:

-moz-border-radius: {vb:stylevar border_radius};
-webkit-border-radius: {vb:stylevar border_radius};
margin-top: {vb:math {vb:stylevar padding}/2};

Y guarda los cambios.

Saludos.

Header Redondeado

imported_Elmer

jesusanz

coleccionocromo

imported_Elmer

ClErK

imported_Elmer

Traiman

ZEL

imported_Elmer

ZEL

imported_Elmer

Oswaldo Gutiérrez

imported_Elmer

Oswaldo Gutiérrez

ZEL

KingRuko

By Ramses

Oswaldo Gutiérrez

Darths

Andrés Durán

Temas similares