Image "border" and "title"

• 

  jaboldi · Member · Apr 9, 2014 at 5:07 pm

  • Copy link
  • Add topic to favorites

  Hello everyone,

  I’ve just made a wordpress.com site, and I’d like to design my inserted images in a way like a site does with wordpress. Its images have thick black borders and descriptions at the bottom of them.

  http://www.brainpickings.org/index.php/2014/04/09/the-public-library-robert-dawson-book/

  Could anyone help me how to do it (with html)?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 9, 2014 at 7:43 pm

  • Copy link

  The text at the bottom of the images is the image caption text. When inserting an image, you can add a caption of your choosing. On existing images, open the page/post in the editor, click on the image and then click on the “edit” icon for the image and you can add the caption and then update the image and update the post/page.

  For the black border and such, you would have to purchase the Custom Design upgrade and then use the following custom CSS. You can try out and preview custom CSS before you buy as explained here.

  Delete all informational text from the CSS edit screen and then paste in the following (after setting a caption or two so you can see what it is going to look like.

  .wp-caption {
      background: #000000;
      border: none;
      border-radius: 10px;
      color: #FFFFFF;
  }
  .wp-caption img[class*="wp-image-"] {
      margin: 20px 20px 0;
      max-width: 87%;
  }