Títulos en imagen destacada y bordes en fotos

frankox3 · 9 Jun 2018

Buenas, hace unas cuantas semanas decidí crear un sitio web en worpress, todo bien hasta aquí.
Necesito que me guíen de cierta forma para lograr dos cosas en mi site.

Colocar el titulo del post sobre la imagen featured que aparece en las entradas de inicio.
Colocar un borde las imágenes de los post para que estos resalten en el sitio.

de antemano muchas gracias por leer. saludos!

piano · 9 Jun 2018

Ambas cosas deberías poder hacerlas con CSS sin mucho problema.
Para el borde de la imagen basta con buscar la clase correspondiente de la imagen y añadirle "border: 1px solid... "
Lo del título puede ser un poquito más complicado. En un principio se debería poder hacer ajustando el margen superior, el color de la fuente y haciendo que el texto tenga un z-index superior al de la imagen pero dependiendo de los contenedores que tenga el theme podría ser algo más complejo que eso. También existe la posibilidad de que haya que modificar los archivos php para poder dejarlo bien resuelto.
La cuestión es que, para poder hacer todo esto, es necesario ver el blog. Hay que revisarlo desde la consola del navegador para poder saber si es posible hacerlo sólo con CSS e indicarte cual es el código exacto que debes añadir y donde debes añadirlo.
Si te animas a dejar el link de tu blog por aquí cualquiera te lo podemos revisar y darte las indicaciones correspondientes.

frankox3 · 15 Jun 2018

Gracias por la respuesta y disculpa la demora en responder, una duda cómo exactamente sé a que clase corresponde, ejemplo abro el inspector luego de hacerle click y de ahí debería aparecer algo como .entry-grid-featured-img ? luego lo busco y le agrego el codigo para el borde, hasta ahí todo bien, el problema es que añado el código y no pasa nada 🙁 estoy usando el theme Magazine Hoot en su versión free y tiene una sección en la cual se puede añadir un css personalizado, cómo hago para añadir desde ahi el codigo y llamar a la clase correspondiente? no sé si me puedes entender y el sitio lo tenía en modo de prueba ya que lo estoy editando, pero te puedo dejar el link del demo Magazine Hoot – Just Another wpHoot Magazine Theme Demo

frankox3 · 15 Jun 2018

piano dijo:
Ambas cosas deberías poder hacerlas con CSS sin mucho problema.
Para el borde de la imagen basta con buscar la clase correspondiente de la imagen y añadirle "border: 1px solid... "
Lo del título puede ser un poquito más complicado. En un principio se debería poder hacer ajustando el margen superior, el color de la fuente y haciendo que el texto tenga un z-index superior al de la imagen pero dependiendo de los contenedores que tenga el theme podría ser algo más complejo que eso. También existe la posibilidad de que haya que modificar los archivos php para poder dejarlo bien resuelto.
La cuestión es que, para poder hacer todo esto, es necesario ver el blog. Hay que revisarlo desde la consola del navegador para poder saber si es posible hacerlo sólo con CSS e indicarte cual es el código exacto que debes añadir y donde debes añadirlo.
Si te animas a dejar el link de tu blog por aquí cualquiera te lo podemos revisar y darte las indicaciones correspondientes.

Gracias por la respuesta y disculpa la demora en responder, una duda cómo exactamente sé a que clase corresponde, ejemplo abro el inspector luego de hacerle click y de ahí debería aparecer algo como .entry-grid-featured-img ? luego lo busco y le agrego el codigo para el borde, hasta ahí todo bien, el problema es que añado el código y no pasa nada estoy usando el theme Magazine Hoot en su versión free y tiene una sección en la cual se puede añadir un css personalizado, cómo hago para añadir desde ahi el codigo y llamar a la clase correspondiente? no sé si me puedes entender y el sitio lo tenía en modo de prueba ya que lo estoy editando, pero te puedo dejar el link del demo Magazine Hoot – Just Another wpHoot Magazine Theme Demo

comprafacil · 15 Jun 2018

Yo soluciono esto con el servicio cloudinary

piano · 15 Jun 2018

frankox3 dijo:
Gracias por la respuesta y disculpa la demora en responder, una duda cómo exactamente sé a que clase corresponde, ejemplo abro el inspector luego de hacerle click y de ahí debería aparecer algo como .entry-grid-featured-img ? luego lo busco y le agrego el codigo para el borde, hasta ahí todo bien, el problema es que añado el código y no pasa nada 🙁 estoy usando el theme Magazine Hoot en su versión free y tiene una sección en la cual se puede añadir un css personalizado, cómo hago para añadir desde ahi el codigo y llamar a la clase correspondiente? no sé si me puedes entender y el sitio lo tenía en modo de prueba ya que lo estoy editando, pero te puedo dejar el link del demo Magazine Hoot – Just Another wpHoot Magazine Theme Demo

Tu problema pueden ser varias cosas:

Ante dos códigos CSS distintos, el código CSS que prevalece es el último que se carga. No es raro que una página web cargue múltiples códigos CSS desde distintos archivos. Quizás tú estés cargando tu código modificado en el archivo x.css ( o el que sea que use la plantilla) y sobre éste archivo se esté ejecutando bootstrap u otro CSS posteriormente.
También puede ser, por lo que veo en la demo, que se esté usando algún tipo de caché, ya sea sólo del CSS o de otro tipo. Quizás tú estés sobreescribiendo el archivo x.css de la plantilla y ésta esté cargando un archivo de caché .less, minify o similar.

Mi consejo:
1.- Desactiva en la plantilla el uso de caché, .less o cualquier otra fórmula similar que use para minimizar el código.
2.- No añadas las instrucciones usando las opciones de la plantilla, añádelas directamente al archivo .css que te muestre la consola del explorador ( habiendo desactivado primeramente lo indicado en el punto 1).
3.- Si aún así sigue sin funcionar añade el imperativo "!important" al código que deseas añadir. Ejemplo:

En vez de ésto:

Insertar CODE, HTML o PHP:

.img {
border: 1px solid #ccc;
}

Añades ésto:

Insertar CODE, HTML o PHP:

.img {
border: 1px solid #ccc!important;
}

Con esa instrucción tu modificación deberá sobreescribir cualquier otra, aunque se cargue después.

Títulos en imagen destacada y bordes en fotos

frankox3

piano

frankox3

frankox3

comprafacil

piano

Temas similares