[Resolved] Border everytime I add an image to a post

[Sebastián]

Hi!

Is it possible to automatically add (with code) a 1 px black border everytime I add an image to a post.

I want every single one of my post images having a border to highlight even more.

Thanks!

GeneratePress 2.2.2

[David]

Hi there,

some CSS like this will do – it’s specific to the single post:

.single-post img {
    outline: 1px solid #000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastián]

That was fast.

Thank you so much!

[David]

Glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastián]

On one of my websites https://nichoseo.com/que-es/ even the header logo looks with the border. I didn’t had any problem when I asked this for a different website.

What could be the problem? Thanks

[Tom]

Try this instead:

.single-post .entry-content img {
    outline: 1px solid #000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sebastián]

Didn’t worked 🙁

[Leo]

Looks like you still have David’s original CSS added but it working to me:
https://www.screencast.com/t/icJNmFaxIlN

Make sure to clear and caching plugin when you make changes.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastián]

Hi Leo, the screenshot you took is from https://donde.uy/ there it’s working well.

Now the site im having the problems is https://nichoseo.com/que-es

I put the code to prove that even the logo has the border.

And when adding this:

.single-post .entry-content img {
outline: 1px solid #000;
}

It doesn’t change anything.

Thanks!

[Leo]

The other site is also working to me:
https://www.screencast.com/t/W3tsv7GNNd

And this is the CSS that’s adding the border:

.single-post img {
    outline: 3px solid #000;
}

Make sure to clear and caching plugin when you make changes.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastián]

Yes but it’s adding border on other images from the page: https://imgur.com/fHwmQqg

And I don’t want that.

[Leo]

That’s because that site is using this CSS I mentioned above:
https://generatepress.com/forums/topic/border-everytime-i-add-an-image-to-a-post/#post-868736

and not using Tom’s (correct) CSS here:
https://generatepress.com/forums/topic/border-everytime-i-add-an-image-to-a-post/#post-868204

Make sure to clear and caching plugin when you make changes.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastián]

When I put Tom’s CSS the border dissapears: https://imgur.com/H31NM96

[Leo]

Looks like entry-content class is removed when using Elementor.

Try this:

.single-post .site-content img {
    outline: 1px solid #000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastián]

That worked for me! But, I don’t want that border on my featured images. Is it possible to apply the same code and leave the featured image without it?

[Author]

Posts