Personalizar tamaño y diseño de imagen principal en CSS

  • Autor Autor Usuario eliminado 161863
  • Fecha de inicio Fecha de inicio
U

Usuario eliminado 161863

Hola a todos, quiero que me echéis una mano con esto. Quiero cambiar el css de los post y la imagen destacada.
Y quiero que primero se muestre el título, luego la imagen destacada con unas dimensiones de 680px por 250px y debajo de la imagen el texto.

Os dejo una imagen para que lo entendais mejor:
09f404c534929b22e8c2a85e7ec6643a.jpg


En el recuadro rojo iría el título, en el azul la imagen y en el negro el extracto de texto de la entrada.

A ver si me podéis ayudar!! Muchas gracias 🙂
 
Estaré atento al post, ya que tengo la misma duda :S justo iba a crear un tema sobre esto.
 
si publicas el link te puedo ayudar ya que asi sin ver el codigo no es facil... basicamente lo que tienes que hacer es poner esa image display:block pero solo funcionara si tienes todo en un solo div/section/article ....tambien por la imagen que publicaste parece que usa float:left para la imagen del post and float right para el content asi que no funcionara lo primero que dije... si publicas el link lo hago editando el DOM y te envio el codigo
 
si publicas el link te puedo ayudar ya que asi sin ver el codigo no es facil... basicamente lo que tienes que hacer es poner esa image display:block pero solo funcionara si tienes todo en un solo div/section/article ....tambien por la imagen que publicaste parece que usa float:left para la imagen del post and float right para el content asi que no funcionara lo primero que dije... si publicas el link lo hago editando el DOM y te envio el codigo
Buenas el link es este: Andro Life | Noticias, reviews, aplicaciones, juegos y sorteos
Por si quieres echarle un ojo 🙂
 
que tal

bueno veo que usas bootstrap asi que es mas sencillo aun .. solo cambia el col-md-5 col-md-7 a col-md-12 - y en la clase thumbnail agregas las dimensiones yo lo puse height: 200 width:100% ...cuando crees el post sube una image de 601x200 si usas unancho menor a 601 va a estirar la imagen como se ve en la imagen de abajo

Screen-Shot-2016-07-31-at-21.06.07.webp

me doy cuenta de que usas wordpress eso lo puedes editar desde el dashboard apparences / edit ... no estoy muy seguro .. solo busca editar el theme .. y busca el archivo post.php
veras algo como
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// por aqui tendras que editar eso
//
} // end while
} // end if
?>

espero que con esto soluciones ..
ahh pero si entendi mal ... quieres el titulo de primero... mmmm yo lo hice editando el css pero lo mejor seria editar el codigo ya q tienes el titulo en la section del contenido
otra foto mas

Screen-Shot-2016-07-31-at-21.29.01.webp

Cuantame si te fue de ayuda 🙂
 
Última edición:
que tal

bueno veo que usas bootstrap asi que es mas sencillo aun .. solo cambia el col-md-5 col-md-7 a col-md-12 - y en la clase thumbnail agregas las dimensiones yo lo puse height: 200 width:100% ...cuando crees el post sube una image de 601x200 si usas unancho menor a 601 va a estirar la imagen como se ve en la imagen de abajo

Ver el archivo adjunto 82720

me doy cuenta de que usas wordpress eso lo puedes editar desde el dashboard apparences / edit ... no estoy muy seguro .. solo busca editar el theme .. y busca el archivo post.php
veras algo como
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// por aqui tendras que editar eso
//
} // end while
} // end if
?>

espero que con esto soluciones ..
ahh pero si entendi mal ... quieres el titulo de primero... mmmm yo lo hice editando el css pero lo mejor seria editar el codigo ya q tienes el titulo en la section del contenido
otra foto mas

Ver el archivo adjunto 82724

Cuantame si te fue de ayuda 🙂
Lo.he probado pero no me funciona. Te he mandado un privado por si puedes contestar, gracias

Enviado desde mi ONEPLUS A3003 mediante Tapatalk
 
Atrás
Arriba