CSS code for taking out borders for PNG images

  • Author
    Posts
  • #3597305

    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 maciejduraj.com.

    #3597527

    supernovia
    Staff

    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.

    #3601639

    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/

    #3601641

    on my graphic design page on toop the images aligned also that robot (and others) has a border.

    #3601670

    kokkieh
    Staff

    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;
    }
    #3601734

    That is what I want to remove border for all images.

    #3601735

    what wouod be the code for that or remove border around all images or at lewst all png ones?

    #3601736

    I’ve added the code you suggested to the two top robot blocks and borders are still showing:
    https://maciejduraj.com/graphic-design/

    #3601760

    kokkieh
    Staff

    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.

    #3602197

    Thanks, it seems to work thus far.

The topic ‘CSS code for taking out borders for PNG images’ is closed to new replies.