How to add a black border around all thumbnail images?

So I am trying to do some CSS code to add black border around thumbnail images like:



(which is the before and after)

However its not working. My current CSS code is:

#related_posts_thumbnails {
border: 1px solid black;
}

(related_posts_thumbnails is the function that calls up random thumbnails related to posts)

Do I need to add img in there?

 

You do not style the function name, you style the Html CSS selector for the image. Look at your source code to see what DIV is enclosing the image, or if the image has an actuall class attribute.

Plus you may be better served in the CSS forum here for those types of questions.

 

How would I be able to see what DIV is enclosing the image?

Can a moderator move this post to the CSS forum, I would hate to open up a duplicate post.

 

In Wordpress you can add a border to any image that you upload for a post or page. Just hover over the image , and click on the edit box and set your border.
If you want to add a default box around all images, then you need to open your CSS for the theme that you are using and find the area that deals with images or the specific image type that you want to change, and add the CSS to add a border around them.

 

This is what I'm wondering. I have a plugin that creates thumbnails for me. However, I want to create a border around JUST THE THUMBNAIL images not the larger size ones. Where in my CSS, if I were to look, do you think it would be? I'm using the daydreams theme so my CSS is pretty similar.

 

Then, if the plug in is creating the thumbnails, then you need to look into the styling how the plug in displays the images.
If there is a CSS file for the plug in, then start there. If it doesn't have one, it has to take styling from somewhere..sometimes it's in a php file.

I can't tell you where in the CSS it would be, you just have to open it and look through it.

 

If you have a link to the page you have the thumbnails on, I can tell you exactly where to make the change. PM me with the link if you prefer not to divulge it at this time.

 

Actually found the plugin. You were pretty close. Try this:

#related_posts_thumbnails li img {
margin-right: 8px;
vertical-align:text-top;
border:1px solid black;
}

Code (markup):

 

As mentioned in that PM, the plugin is using inline styles which over-rides your CSS stylesheet.

Per a WP forum post, change the "Output style" to "List" in plugin settings. This will allow you to change CSS settings of plugin using #related_posts_thumbnails selector for list. Also, with this setting you can turn off plugin inline styles completely.

 

I have it set to "List" in the plugin settings. Also added what you suggest in private:

#related_posts_thumbnails li img {
margin-right: 8px;
vertical-align:text-top;
border: 1px solid black !important;
}

still it doesn't seem to come up. So if you look on the "Submit" page, you'll see on the submit button that there is also not a black border around like Name, Subject, Comment.

Could this be related?

 

Is this still a problem? I thought you said via PM that it was working properly.

 

I got it fixed. Thanks Dodge!

THIS PROBLEM IS SOLVED. THANKS DODGER

 

Also, the "Submit" page is different issue altogether. Your styling for that can be over-rode in your stylesheet by using #wpcf7-f1-p78-o1 in front of the elements you are trying to style.

For example:

#wpcf7-f1-p78-o1 input, #wpcf7-f1-p78-o1 select, #wpcf7-f1-p78-o1 textarea {
   border: 1px solid #bbbbbb;
}

Code (markup):

Or you can do a blanket change, site-wide in your styles.css file around line 465 for the border (which is white right now):

input, textarea, select {
  border: 1px solid #bbbbbb;
  color: #666666;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 1em;
}

Code (markup):