CSS code for taking out borders for PNG images

multimediacontentcreator · Member · Nov 23, 2020 at 4:29 pm
Copy link

Add topic to favorites
Hello,

I recently added some png clear images onto some sections of my site and hate the border that my theme forces me to view when viewing the sites live. Anyway to take it out on png images I add?

The blog I need help with is: (visible only to logged in users)
supernovia · Staff · Nov 24, 2020 at 1:09 am
Copy link
Hi — could you send a link to an affected page or post? It’s hard to know where to look for the clear images, but if you’ll point them out, we’ll take a look.
multimediacontentcreator · Member · Dec 3, 2020 at 4:17 am
Copy link
Sorry for getting baxk this late to the topic, I was busy with a move. Like all the images on this section (the robot for instance aligned right before my medium articles) have a border despite being pgn transparents:
https://maciejduraj.com/journalismportfolio/
multimediacontentcreator · Member · Dec 3, 2020 at 4:20 am
Copy link
on my graphic design page on toop the images aligned also that robot (and others) has a border.
kokkieh · Staff · Dec 3, 2020 at 5:47 am
Copy link
The only way to do this is to remove the border for all images. There’s no way to use CSS to only target images of a specific file format – that would require a custom PHP function in the theme itself:
```
img.alignleft, .alignleft img, img.aligncenter, .aligncenter img, img.alignright, .alignright img {
  border: none;
}
```
If you only want to apply this to specific images, you can also add a custom class to images themselves. When inserting an image block, click on the Advanced heading in the editor sidebar, and under CSS class add something like no-border. The you use that as the selector in your custom CSS instead:
```
.no-border {
  border: none;
}
```
multimediacontentcreator · Member · Dec 3, 2020 at 8:04 am
Copy link
That is what I want to remove border for all images.
multimediacontentcreator · Member · Dec 3, 2020 at 8:07 am
Copy link
what wouod be the code for that or remove border around all images or at lewst all png ones?
multimediacontentcreator · Member · Dec 3, 2020 at 8:11 am
Copy link
I’ve added the code you suggested to the two top robot blocks and borders are still showing:
https://maciejduraj.com/graphic-design/
kokkieh · Staff · Dec 3, 2020 at 10:31 am
Copy link
what wouod be the code for that or remove border around all images

The code I gave above removes it for all images:
```
img.alignleft, .alignleft img, img.aligncenter, .aligncenter img, img.alignright, .alignright img {
  border: none;
}
```
I’ve added the code you suggested to the two top robot blocks and borders are still showing:

There’s no way to add this code directly to the blocks. Custom CSS code is added in the Customizer.

Go to My Site ->Design ->Customize ->Additional CSS, and paste that code on a new line after the custom CSS code you already have added to your site.
multimediacontentcreator · Member · Dec 4, 2020 at 6:38 am
Copy link
Thanks, it seems to work thus far.

No items found.