Border Around Images BLOCK

  • Hello there,

    Ahhh, remember the good old day when simple html and inline CSS just worked ??

    I have tried to put a border around an image in wordpress now for an hour. I added some css to additional CSS for the theme, I then “With a SPACE” added the css to the image style attributes under advanced. NOTHING…. I manually added a style to the html view of the image and still NOTHING…

    What pray tell am I doing wrong. lol

    Just want to add a border around one image on that page. Thanks for any and all help. Also, I do not want the border to encapsulate the caption area of the image, just the image itself.

    • This topic was modified 2 years, 6 months ago by saxamo.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • You could copy the image + caption code and drop it into a Custom HTML block if you want to make inline CSS changes. Below, I have copied the image code from the page you linked to and added a style attribute to the image that adds a black 1px solid border.

    You can change the border:1px solid #000 to your preferred border style.

    
<figure class="wp-block-image size-large is-style-default">
        <img style="border:1px solid #000;" width="1024" height="437" src="https://sunshinewildlifetours.com/wp-content/uploads/slider2-1024x437.jpg" alt="Sunshine Wildlife Tours" class="wp-image-106" srcset="https://sunshinewildlifetours.com/wp-content/uploads/slider2-1024x437.jpg 1024w, https://sunshinewildlifetours.com/wp-content/uploads/slider2-300x128.jpg 300w, https://sunshinewildlifetours.com/wp-content/uploads/slider2-768x327.jpg 768w, https://sunshinewildlifetours.com/wp-content/uploads/slider2-1536x655.jpg 1536w, https://sunshinewildlifetours.com/wp-content/uploads/slider2.jpg 1663w" sizes="(max-width: 1024px) 100vw, 1024px">
</figure>

    It’s a bit of a process having to do it like this, but if it’s just for one image, it’s not too bad. If doing it for a lot of images, it’s better to use a class-based approach, and I can help with that if needed.

    Thread Starter saxamo

    (@saxamo)

    I appreciate the response.. I would like to see the ADDITIONAL CSS code and see where I went wrong. Can you please also add that to this thread? Thanks so much

    .img-cam-border

    if possible

    • This reply was modified 2 years, 6 months ago by saxamo.

    Sure, you can add this via the Additional CSS box in the customizer:

    
.img-cam-border img {
	border:1px solid #000;
}

    Then, under the “Advanced” section in the block inspector sidebar (in the post editor), add the img-cam-border class.

    Thread Starter saxamo

    (@saxamo)

    thanks again.. I still have no idea what I did wrong.. I did the same darn thing.. lol This is crazy.. Hmmmmm.. Well, thanks.. it’s done.. ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Border Around Images BLOCK’ is closed to new replies.