Esquinas redondeadas 【Sidebar】

Hoy ando inspirada! ᕙ(⇀‸↼‶)ᕗ Publicaré todos los tutoriales que encuentre!! WUW!

Ya les enseñe como Colocar 3 columnas bajo la cabecera. Así que aprovechando eso, aquí dejo una forma muy pero MUY FACIL de convertir las esquinas de los Sidebar a redonditas! ¿Listos para el paso a paso? GO!!!!!!

Clic en las img. para agrandar

PRIMERO: Escogemos el sidebar que deseamos modificar las esquinas. En mi caso, escogí 'Crosscol'.

Y así es como se vé mi Sibebar, cuadradito.

Así que trabajaremos en base a ese. Vamos a 'Diseño → Plantilla → Edición de HTML'

Buscamos (Control+F): #crosscol-columna-contenedor{

Aparecerá lo siguiente:

#crosscol-columna-contenedor{ background: #000; margin: 0 -20px 0 -20px; clear:both; }

SEGUNDO: Existen MUCHAS formas para modificar las esquinas, y hoy les enseñaré 2 de ellas...

A) Todas las esquinas curvas: Pega el sgte. código después de 'margin'

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

Deberá de quedar así:

#crosscol-columna-contenedor{ background: #000; margin: 0 -20px 0 -20px; -moz-border-radius: 24px; -webkit-border-radius: 24px; clear:both; }

Clic en 'Vista previa' y se verá esto:

Ahora todas las equinas son curvas

B) Esquinas superiores curvas: Pegamos el sgte. código después de 'margin'

-moz-border-radius-topright: 1em;

-moz-border-radius-topleft: 1em;

-webkit-border-top-right-radius: 24px;

-webkit-border-top-left-radius: 24px;

Quedando así:

#crosscol-columna-contenedor{ background: #000; margin: 0 -20px 0 -20px; -moz-border-radius-topright: 1em; -moz-border-radius-topleft: 1em; -webkit-border-top-right-radius: 24px; -webkit-border-top-left-radius: 24px; clear:both; }

Clic en vista previa:

Y este es el que he escogido yo (✪㉨✪)

TERCERO: Una vez escogido la foma A o B le damos clic en 'Guardar plantilla' y LISTO!

Nota:

- Para modificar cuán grande va a ser la curva solo cambiamos el 24px por cualquier otro número.

- Mientras menor sea el número, menor será la curva. Es decir que si es 0 la curva será nula.

- Puede modificarse cualquier Sidebar, sólo elige el tuyo y sigue los mismos pasos.

Es todo y espero que les haya sido útil, bye byeeeeeeeee!!! ＼(・｀(ｪ)・)/