Header Redondeado

I

imported_Elmer

Zeta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 26 Nov 2009

• #1

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

 

J

jesusanz

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 26 Nov 2009

• #2

Gracias!

La verdad que queda MUY MUY Bien!! =D

 

C

coleccionocromo

Delta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 27 Nov 2009

• #3

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

 

I

imported_Elmer

Zeta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 27 Nov 2009

• #4

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.

 

C

ClErK

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 8 Ene 2010

• #5

alguna captura para ver como keda???

 

I

imported_Elmer

Zeta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 8 Ene 2010

• #6

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

 

T

Traiman

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 9 Ene 2010

• #7

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.

 

Z

ZEL

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 27 Ene 2010

• #8

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.

Hacer clic para expandir...

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

Hacer clic para expandir...

 

I

imported_Elmer

Zeta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 27 Ene 2010

• #9

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

 

Z

ZEL

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 27 Ene 2010

• #10

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

 

I

imported_Elmer

Zeta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 27 Ene 2010

• #11

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.

 

O

Oswaldo Gutiérrez

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 28 Ene 2010

• #12

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

 

I

imported_Elmer

Zeta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 28 Ene 2010

• #13

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

 

O

Oswaldo Gutiérrez

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 28 Ene 2010

• #14

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

 

Z

ZEL

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 28 Ene 2010

• #15

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

Hacer clic para expandir...

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.

Hacer clic para expandir...

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 😀

 

K

KingRuko

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 30 Ene 2010

• #16

Perfecto, gracias elmer.

 

B

By Ramses

Alfa

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 11 Mar 2010

• #17

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

 

O

Oswaldo Gutiérrez

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 13 Mar 2010

• #18

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

 

D

Darths

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 14 Mar 2010

• #19

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

 

A

Andrés Durán

Xi

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 14 Mar 2010

• #20

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.