Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 39: How to style img tags using Thesis 2 custom CSS

Thesis 2 CSS for img tags

Take a look at the picture above?  Can you tell the inserted image from the post?  Neither can I.  For the Complete Guide to Thesis 2 I’m using screenshots of this site for illustration purposes.  This can make it difficult to distinguish an image from the post itself.  To help with this problem I’m going to use some Thesis 2 custom CSS.  A strength that Thesis has always had is the ability to add custom CSS.  Thesis 2 goes one step further to make it even easier.

From the WordPress Dashboard navigate to the Thesis 2 Skin Editor, CSS page.

Thesis 2 Custom CSS

Click on the “Custom CSS” tab.  This page will be blank if you haven’t added any custom CSS up to this point.  Below I have entered the desired CSS that will place a border around each image.  Note that this CSS will only affect images within your posts.  Images in the sidebar will be omitted from this change.  Don’t forget to click the green “Save CSS” button at the top right of the page.

Thesis 2 Custom CSS img tag

Let’s break down the CSS:

  • .post_content: this is the CSS container where your posts will be displayed.  This statement will limit the img styling to only your posts.  We may not want to style the sidebar, header, footer, and other images the same way so we are limiting the scope of this CSS change to just img tags within the post content.
  • img: this is the HTML tag used by web pages for inserting pictures (images)
  • padding: this adds padding around the image.  In this case the padding is 10 pixels wide for top, left, right, and bottom sides.  If you aren’t familiar with the CSS box model it would be good to read up on it.
  • background: here we are adding a background color to the img tag.  This color can be seen in the padding area around the image.
  • border: here we are creating a 2 pixel wide solid border colored dark gray.

The code is below:

.post_content img {
 padding: 10px 10px 10px 10px;
 background: #fff;
 border: 2px solid #eee;
 }

The end result looks like the image below.  Notice how the image has a white background (padding) with a dark gray border.  This helps the image to stand out against the rest of the post.

Thesis 2 img tag CSS

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 4 comments… add one }
  • LouAnn - ScrapCraze.com May 26, 2015, 2:33 PM

    I have thesis 2, navigated to skin editor CSS, Skin CSS, but there is not a Custom CSS tab! Any idea what I’m doing wrong? I used WP image editing all the time to add a border around my images, but this version of WP doesn’t have that option. 🙁

  • Doug Macklem September 14, 2015, 8:10 PM

    I’m now running Thesis 2.1.9. I click “Thesis” in the WordPress editor sidebar and I have the “Custom CSS” menu item. Do you not have this? Sadly, it does not match this post (Step 39) as Thesis has changed since I posted this step. However, the custom CSS should still work once you find the “Custom CSS” menu. See below.

    Thesis 2 Custom CSS

  • Ken Wilson April 4, 2016, 2:06 AM

    Hello Doug,

    Another excellent guide about things that you can achieve on Thesis.
    Although you did put this one up almost 12 months ago, it still worked like a charm, and I am using Thesis 2.2.3, the latest version.

    One thing I did notice though with this, if you have a Description, (which you usually write in the Media File) written under your images, the actual nice, neat borders that you have showed us, do not sit centre of what is placed on the page if you have an image with description.

    What happens is, the outside of your border actually lines up with the start of the First Letter of the description sentence, and therefore does not sit centre.

    I did a test, and removed the description on one of the images, and it does look so much better with what you have showed us, a nice clean image with a border.

    I have decided to ditch all the Image Descriptions, which people may or may not read, and go for your image with the clearly defined border.

    In your opinion, do you think Image Descriptions really help SEO on a page, or is it just something for those interested to read.

    Keep the good stuff coming, its Gold to Learner Drivers.

    Thank You,

    Ken Wilson.

  • Doug Macklem December 19, 2016, 2:02 PM

    I apologize for the late reply. I cannot say what impact on SEO this will have as I’m no expert. I have read that all images should have “alt” text for SEO purposes.

Leave a Comment