Image Border

  • Resolved gjsouthwell

    (@gjsouthwell)


    3 years, 11 months ago

    Hi,

    I just want to add a simple image to a border. But it seems with Gutenberg this is not so simple. I have an image that is left-aligned with text on the right. If I add custom CSS to create a border for that image, it seems to apply the border to the whole block (and not the image), and then only at the top.

    Alternatively, if I just add to the IMG tag within the HTMl (e.g.”style=border: 1px solid #cecece”), then WP doesn’t like it, and asks me to resolve the code or convert to HTML (the latter works, but from that point on you have to deal with code instead of WYSIWYG, so it’s not ideal).

    Any suggestions? Why is such a simple thing causing so much hassle?

    Thanks,

    Gareth.

Viewing 2 replies - 1 through 2 (of 2 total)
  • corrinarusso

    (@corrinarusso)

    3 years, 11 months ago

    @gjsouthwell

    Can you share a URL?

    – create a class to store the border
    – if you want the border to display on image in your page, get the class name of the page template you use, then :
    Customizer –> Additional CSS :

    .page img {
	border: 2px solid #cecece;
}

    – if you only want the border applied to particular images, then create a class and add it using Customizer –> Additional CSS :

    .myborder img {
	border: 2px solid #cecece;
}

    then add this class to the image in Gutenberg.

    Thread Starter gjsouthwell

    (@gjsouthwell)

    3 years, 11 months ago

    Thank you very much. I’m not sure what I was doing wrong, but this worked like a charm!

    Thanks again,

    Gareth.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image Border’ is closed to new replies.