[Tutorial] Redondear esquinas a tu theme
Hola amigos bueno ya que muchos ya saben y muchos queieren saber aqui le straigo este tuto para redondear esquinas a sus foros!!
Es algo MUY sencillo siguiendo las siguientes imagenes!
http://community.mybb.com/attachment.php?aid=9871
http://community.mybb.com/attachment.php?aid=9872
http://community.mybb.com/attachment.php?aid=9873
bueno pues en estas 2 imagenes veremos mis esquinas de mi tema cuadradas tanto de arriba como de abajo!!
![[Image: 24pgbxf.png]](http://i51.tinypic.com/24pgbxf.png)
![[Image: 11to39z.png]](http://i52.tinypic.com/11to39z.png)
bueno pues como sabes eso es el container entonces en nuestro theme creamos una hoja de estilo con el nombre que ustedes quieran en este casoo yo le pondre redondear!!
entonces como le pondremos redondeadas las esquinas y eso es el #container vamos a nuestra hoja de estilos creada y pondremos!
el 15 se lo podemos cambiar mientras mas pongamos mas redondeado queda les dejo 2 ejemplos uno con 15 y el otro con 50
15:
![[Image: 2ppjvpl.png]](http://i56.tinypic.com/2ppjvpl.png)
50:
![[Image: ruu2h4.png]](http://i54.tinypic.com/ruu2h4.png)
y con eso queda rendodeado y asi vamos redondeando mas por ejemplo los campos de texto estan asi (al iniciar sesion)
![[Image: 9sgtcm.png]](http://i51.tinypic.com/9sgtcm.png)
y como podemos ver en esta imagen
http://community.mybb.com/attachment.php?aid=9872
los campos de texto es input.textbox a eso le agregaremos redondear!
Vamos una vez mas a nuestra plantilla y abajo de #container agregamos esto
una vez mas repito el 15 se puede cambiar!
y con eso los campos de texto se pueden poner las esquinas redondeadas les dejo una imagen de como me quedo!
![[Image: 30rvgua.png]](http://i54.tinypic.com/30rvgua.png)
un ultimo ejemplo para la textarea donde escribimos nuestros mensajes, temas, etc
como podemos ver en esta imagen
http://community.mybb.com/attachment.php?aid=9873
donde escribimos es la textarea mi editor esta asi en este momento
![[Image: 2hhg7yu.png]](http://i55.tinypic.com/2hhg7yu.png)
entonces agrego esto a la hoja de estilo:
y se ve de esta manera
![[Image: bf4yv6.png]](http://i56.tinypic.com/bf4yv6.png)
y asi va quedando mi css
y asi van agregando dependiendo lo que quieran redondear!!
Espero les guste!
Saludos a todos!
Es algo MUY sencillo siguiendo las siguientes imagenes!
http://community.mybb.com/attachment.php?aid=9871
http://community.mybb.com/attachment.php?aid=9872
http://community.mybb.com/attachment.php?aid=9873
bueno pues en estas 2 imagenes veremos mis esquinas de mi tema cuadradas tanto de arriba como de abajo!!
![[Image: 24pgbxf.png]](http://i51.tinypic.com/24pgbxf.png)
![[Image: 11to39z.png]](http://i52.tinypic.com/11to39z.png)
bueno pues como sabes eso es el container entonces en nuestro theme creamos una hoja de estilo con el nombre que ustedes quieran en este casoo yo le pondre redondear!!
entonces como le pondremos redondeadas las esquinas y eso es el #container vamos a nuestra hoja de estilos creada y pondremos!
#container {
border-radius: 15px;
}
el 15 se lo podemos cambiar mientras mas pongamos mas redondeado queda les dejo 2 ejemplos uno con 15 y el otro con 50
15:
![[Image: 2ppjvpl.png]](http://i56.tinypic.com/2ppjvpl.png)
50:
![[Image: ruu2h4.png]](http://i54.tinypic.com/ruu2h4.png)
y con eso queda rendodeado y asi vamos redondeando mas por ejemplo los campos de texto estan asi (al iniciar sesion)
![[Image: 9sgtcm.png]](http://i51.tinypic.com/9sgtcm.png)
y como podemos ver en esta imagen
http://community.mybb.com/attachment.php?aid=9872
los campos de texto es input.textbox a eso le agregaremos redondear!
Vamos una vez mas a nuestra plantilla y abajo de #container agregamos esto
input.textbox {
border-radius: 15px;
}una vez mas repito el 15 se puede cambiar!
y con eso los campos de texto se pueden poner las esquinas redondeadas les dejo una imagen de como me quedo!
![[Image: 30rvgua.png]](http://i54.tinypic.com/30rvgua.png)
un ultimo ejemplo para la textarea donde escribimos nuestros mensajes, temas, etc
como podemos ver en esta imagen
http://community.mybb.com/attachment.php?aid=9873
donde escribimos es la textarea mi editor esta asi en este momento
![[Image: 2hhg7yu.png]](http://i55.tinypic.com/2hhg7yu.png)
entonces agrego esto a la hoja de estilo:
textarea {
border-radius: 20px;
}y se ve de esta manera
![[Image: bf4yv6.png]](http://i56.tinypic.com/bf4yv6.png)
y asi va quedando mi css
textarea {
border-radius: 20px;
}
#container {
border-radius: 50px;
}
input.textbox {
border-radius: 15px;
}y asi van agregando dependiendo lo que quieran redondear!!
Espero les guste!
Saludos a todos!
jeje vamos era para la demo de como se redondea yo siempre los redondeo entre 10 a 15 
Saludos!
Saludos!
Te recomiendo que ademas de border-radius
agregues -moz-border-radius: y tambien -webkit-border-radius:
Porque border radius es para opera safari u otros creo
Porque -moz-border-radius es para mozilla firefox y -webkit-border-radius para chrome
Y si pones solo como tu pusiste, los que usen dichos navegadores verán todo normal o:
agregues -moz-border-radius: y tambien -webkit-border-radius:
Porque border radius es para opera safari u otros creo
Porque -moz-border-radius es para mozilla firefox y -webkit-border-radius para chrome
Y si pones solo como tu pusiste, los que usen dichos navegadores verán todo normal o:
si olvide mencionarlo jeje
ya sabia que
es para mozilla pero no sabia para que es el otro
Bueno como no me gusta quedarme con la duda investige un poco y aqui se los traigo!!
ya sabia que
-moz-border-radius:es para mozilla pero no sabia para que es el otro
Bueno como no me gusta quedarme con la duda investige un poco y aqui se los traigo!!
Por el momento Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate Recommendation", que es cuando se supone que los distintos navegadores deben implementarlas. El nombre del atributo por el momento es:
-moz-border-radius Los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas de CSS 3, pero el atributo border-radius tampoco funciona directamente, como en el caso de Firefox, sino que hay que utilizar un "alias":
-webkit-border-radius.
-webkit-border-radius
Es para chrome y no se si alguno mas
Es para chrome y no se si alguno mas
:d repito:
Bueno como no me gusta quedarme con la duda investige un poco y aqui se los traigo!!
Bueno como no me gusta quedarme con la duda investige un poco y aqui se los traigo!!
Por el momento Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate Recommendation", que es cuando se supone que los distintos navegadores deben implementarlas. El nombre del atributo por el momento es:
-moz-border-radius Los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas de CSS 3, pero el atributo border-radius tampoco funciona directamente, como en el caso de Firefox, sino que hay que utilizar un "alias":
-webkit-border-radius.
24 Dec, 2010, 4:51 pm Edson Ordaz wrote:Jajaja bueno almenos estuve cerca ajja
:d repito:
Bueno como no me gusta quedarme con la duda investige un poco y aqui se los traigo!!
Por el momento Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate Recommendation", que es cuando se supone que los distintos navegadores deben implementarlas. El nombre del atributo por el momento es: -moz-border-radius
Los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas de CSS 3, pero el atributo border-radius tampoco funciona directamente, como en el caso de Firefox, sino que hay que utilizar un "alias": -webkit-border-radius.
jeje si aun asi grax por mencionarlo sirvio que lo investige (una cosa mas a mi cerebro xD)
Saludos!
Saludos!
-webkit-border-radius
Chrome ,Mozilla y nninguno más creo
Chrome ,Mozilla y nninguno más creo
![[Image: l7Qimoa.png]](http://i.imgur.com/l7Qimoa.png)