Como arredondar as bordas dos widgets no template Evolve?

Buenos días a todos y muchas gracias por adelantado. Les escribo porque quiero redondear las esquinas de mis widgets: últimos post, más vistos, texto...etc. He visto que hay un post viejo sobre esto, sin embargo no consigo ningún cambio al aplicar los pasos en mi plantilla Evolve.

Tengo un widget normal (foto) y quiero convertirlo al widget azul (foto). El problema es que sigo todos los pasos de un post anterior y no consigo que el widget cambie.

He ido a APARIENCIA/EDITOR/style.css

Dentro de esta hoja de estilo he ido a widget-content y he hecho las modificaciones que ponía el post antiguo. Al actualizar la hoja el widget no ha cambiado. Alguien sabe sabe que estoy haciendo mal? Donde puedo colocar el border-radius??

(código del widget actual):

/* Widgets */
.widget {position:relative;margin-bottom:15px;}
.widget:after {background: url(library/media/images/widget-shadow.png) no-repeat top center;
bottom: -6px;
content: "";
height: 7px;
left: 0;
position: absolute;
width: 100%;}
.widget ul {margin-bottom:0;}
.widget-title-background {padding-top:10px;color:#333;text-shadow:0 1px 1px #fff;}
.widget-title {z-index:1;position:relative;display:block;margin-top:0;margin-bottom:10px;font-size:19px;line-height:19px;letter-spacing:0px;font-weight:normal;padding:10px 0px;}
.widget-title a {color:#333 !important;text-shadow:1px 1px 0px #fff!important;border-bottom:none !important;}
.widget-content {position:relative;margin:0 0px 35px 0px;padding:10px 15px 21px 15px;font-size:13px;
background: #F6F6F6;
border: 1px solid #E0DDDD;
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
-webkit-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
}

Asi como la imagen pero con espacios, entre cada numero y px, ejemplo: 50px 50px 50px 50px.

P.D si vas a usar 50px en todas las esquinas, usa sólo una vez 50px; border-radius: 50px;

kanikase disse:

Asi como la imagen pero con espacios, entre cada numero y px, ejemplo: 50px 50px 50px 50px.

P.D si vas a usar 50px en todas las esquinas, usa sólo una vez 50px; border-radius: 50px;

Clique para expandir...

.widget-content {position:relative;margin:0 0px 35px 0px;padding:10px 15px 21px 15px;font-size:13px;
background: #F6F6F6;
border: 1px solid #E0DDDD;
border-radius: 50px;
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
-webkit-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;

Así estaría correcto?

Cov92 disse:

.widget-content {position:relative;margin:0 0px 35px 0px;padding:10px 15px 21px 15px;font-size:13px;
background: #F6F6F6;
border: 1px solid #E0DDDD;
border-radius: 50px;
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;
-webkit-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9) inset;

Así estaría correcto?

Clique para expandir...

Sí, pero te recomiendo que uses:


Para que no tengas problemas de compatibilidad.

He añadido el código y he dado a actualizar. No ha cambiado nada el widget. 😕😕

que raro :v

agregalo así:


Tal vez tenga otro div o algo por encima :/ pruebalo con chrome.

Kanikase muchas gracias, al final lo conseguí.
Lo cambie en la stylesheet y en jetpack añadí el mismo código y listo.