[Resolved] Adding image borders

[ch1800]

How to add simple borders for all images with CSS please?
(not using a page builder)

[David]

Hi there,

try this CSS – it applies to all images within the page, so it won’t effect logos in your header:

#page img {
    border: 4px solid #000 !important;
    box-shadow: border-box;
}

[ch1800]

Great, many thanks!

[David]

You’re welcome

[ch1800]

Hi David, I’m using the above in custom CSS and works fine with all images in posts.

Now, I just want to EXCLUDE it from a particular page where I don’t want borders.
Is it possible to achieve this by running the Simple CSS plugin that allows having specific CSS for each page and thus disabling this CSS there?

Or rather create a new class “no borders” that blocks the border CSS and that I can use for specific images only in their properties?

[Leo]

If you just want to exclude one page, then you can actually modify David’s CSS to this:

body:not(.page-id-xxx) #page img {
    border: 4px solid #000 !important;
    box-shadow: border-box;
}

And change the xxx to the actual ID of the page.

Let me know 🙂

[ch1800]

Thanks Leo but this doesn’t seem to work.
I tested with different post IDs but none worked.

I edited my question above while you were replying and maybe the last sentence is something easier to perform?

“Or rather create a new class “no borders” that blocks the border CSS and that I can use for specific images only in their properties?”

[Leo]

My CSS would be the best way – otherwise I wouldn’t have suggested it.

Can you link me to a page with the CSS added that’s not working?

[ch1800]

Sorry, still on local host.

[Leo]

Sorry but it’s really impossible for me to tell why it’s not working without seeing the site live.

Maybe we can revisit the issue when it’s live?

[ch1800]

OK, that’s fine then. Nothing urgent.
Thanks for your kind help!

[Leo]

No problem!

Just comment here again when you have the site live 🙂

[Author]

Posts