Add border and shadow to your ttg blog featured images

toddler playing at fountain

You may or may not know that within the TTG plug-ins Matt has included some css classes to help you style and place images. With them you can add borders and shadows to images as well as set floats.
If you’re using WordPress, you can simply add the class names in the image edit dialog.

However, even if you add these classes to an image in your WordPress post, those classes are not applied to your TTG blog featured images on your blog’s home page. But this is easy to remedy with custom css.

To get the same borders and shadow you’ll get by using the border and shadow class, just add this to your custom css file:

/*Add border and shadow styling to blog featured images
=======================================================*/
img.wp-post-image {
border: 1px solid #2C2C2C;
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

These rules were simply copied from the .border and .shadow classes found in my blog’s style.css file.

I figured out the selector to use (img.wp-post-image) by using the Inspector tool in my browser.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Subscribe to new posts

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight  4 & 5

See the Backlight Modules page on your site for latest Backlight and module versions and changelogs.

You’ll also find the latest version number and download link for the Lightroom Publisher plugin.
(BL 3 and later)

 

Backlight 1 Versions

Backlight 1.2.4
Pages module 1.2.4
Cart Add-on 4.1.7
Client Response Add-on 7.1.3
Theater Add-on 1.2.6
Galleria Add-on 1.0.0
WordPress Add-on 1.2.6
Publisher 3.2.3

Backlight 1 has seen its end of life. See this post.

CE4 Versions

note: CE4 is no longer being developed or sold. See this post.

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.10
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2