Hola grupo:
Quisiera preguntar si puedo hacer un recuadro en el posteo para que no quede tan desprolijo. Algo como el rectángulo rojo que dibuje en la pantalla.
Adjunto captura de pantalla
Mil gracias por su ayuda de antemano
Hola!
No logro comprender la pregunta. Si podes extendé un poco más tu consulta. Por lo que veo querés destacar el posteo, pero la pregunta es:
- Querés destacar todos los posteos con dicho recuadro?
- Querés destacar algún posteo en particular?
- Tendrás que cambiar de forma constante el posteo a destacar?
Hay algunas alternativas que se me van ocurriendo, pero sin tener en claro qué es lo que querés y cómo sería darte soluciones parciales.
Te escuchamos!!!
Con la herramienta Inspeccionar del navegador podes ver que clase tiene asignada ese elemento.
Despues a esa clase le das un border: 1px solid #000; o el color que mas te guste.
Es re sencillo, yo uso GeneratePress para casi todas las webs jeje.
Saludos!
Hola, la idea es que los posteos esten en una “caja” para que sean homogeneos y no como se muestran ahora que uno es mas corto que el otro, por eso se me habia ocurrido como hacerles un “marco”. No se si me logro explicar bien.
Quisiera que los posteos me quedaran igual a los que paso en la imagen. Hoy en mi página no están así.
Muchas gracias por su ayuda de antemano
Se puede hacer hermano, mira esta hecha con GeneratePress como quedó con borde, sobra y esquinas redondeadas: https://renovartuhogar.com
Eso es si, pasa la url y te ayudamos!
Buen día grupo, no se porque no se envió el link, aquí va
www.casadelamujersi.org.ar
Ya estoy mirando las respuestas, pero no logro encontrar la caja correspondiente. Seguiré investigando.
Desde ya muchas gracias por su ayuda de antemano
Excelenete!
Mira, lo que tenés que hacer para hacer long story short, es:
- Instalar un plugin para cargar CSS (si ya tenés instalado un plugin de estas características saltatear este paso). El plugin que te recomiendo es “CSS & JS”
- Crear una nueva hoja de CSS
- Cargar el siguiente Script que te envío
/* Agregar un borde a los articulos */
article.wp-show-posts-single.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.wpsp-col-4 {
box-shadow: 0px 0px 4px 0px black;
margin: 10px;
padding: 1em 0px;
transition: 500ms;
}
/* Transición de Hover en Desktop */
article.wp-show-posts-single.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.wpsp-col-4:hover {
transform: scale(1.01);
}
.wp-show-posts-columns:not(.wp-show-posts-masonry) { /* don't wrap */
flex-wrap: inherit!important;
}
/* Controlar los espacios en blanco de los articulos */
.wp-show-posts-columns#wpsp-376 .wp-show-posts-inner {
margin: 0px!important;
width: 90%!important;
padding: 0px 1em;
}
/* Mejorar el tamaño de las imágenes */
img.center {
width: 100%;
object-fit: cover!important;
}
/* Que sean del mismo tamaño los articulos */
h2.wp-show-posts-entry-title {
overflow: hidden!important;
white-space: nowrap!important;
width: 300px!important;
text-overflow: ellipsis!important;
}
/* Detalle de margin -4 raro */
.wp-show-posts-columns#wpsp-376 {
margin: 0px!important;
}
Yo lo cargaría y vería el resultado. Luego esperaría a que @Maxi_Ramallo te compartiera su código para que lo cargues y probaría cual te resulta mejor. Inclusive la comunidad puede sumar sus ideas y pasarte el código para que vayas probando.
Mucha suerte!!!
Muchas gracias! ya mismo lo pruebo!!!
www.casadelamujersi.org.ar
Hola hermano, sin desmerecer la respuesta del compañero yo no te recomiendo instalar un plugin para agregar css personalizado. Estos son los pasos que yo haría:
- Ir a Apariencia > Personalizar > CSS Adicional
- Agregar esto al final de todo: .wp-show-posts-inner { border: 1px solid #000; padding: 20px; }
Eso es para tener el borde que mencionabas al principio del hilo. Un borde de 1 pixel color negro. El color puede ser el que vos quieras obvio! Lo del padding es para que el borde no quede pegado al contenido.
Y si tenes la versión PRO del GeneratePress, podes agrandar las miniaturas para que queden todas iguales y definir el largo del extracto, tambien para que queden todos iguales.
Se puede hacer practicamente lo que quieras jugando con CSS y las opciones de GP.
Cualquier cosa pega el chiflido! Saludos!
1 me gusta
Si, @Maxi_Ramallo lo que comentas puede ser, el tema es que el plugin que comento es muy bueno para ya tener dentro del arsenal si necesitas instalar HTML, JS o CSS. Es una vieja práctica común con los desarrollos que realizamos en la agencia! Así mismo el comentario que comentas debería de hacer el truco, así que cualquiera de las dos @casadelamujersi debería de cumplir con el objetivo!
Dale, subí la personalización que debería de quedar regio. Lo que yo te pasé trae algunos efectos de Hover y algunas cosas más, pero como dice @Maxi_Ramallo lo que vos pedías era solo un reborde negro. Adicionalmente para que cumpla con que tenga todo el mismo tamaño, por lo que yo noté lo que más problemas tenés es con los títulos, que a veces son más largos y otros más cortos, por lo que traje un overflow hidden para que se ocultara si pasaba texto de más de una línea.
En fin! Un poco de personalización. Avisa cuando esté cargado!!