¿Cómo redondear las esquinas de los widgets en la plantilla Evolve?

  • Autor Autor Cov92
  • Fecha de inicio Fecha de inicio
Cov92

Cov92

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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;
}




Widget.webp
 
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;
 
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;

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

Sí, pero te recomiendo que uses:

Insertar CODE, HTML o PHP:
-o-
-ms-
-moz-

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í:

Insertar CODE, HTML o PHP:
border-radius: 50px;
overflow: hidden;

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.
 
Atrás
Arriba