Support » Themes and Templates » Add Boarder to JUST Featured Image

  • Hey folks,

    I’d like to make some adjustments so that when I add a featured image to a post it appears on the post and home page with a 3px black boarder. However, I’d like to it so that applies to ONLY featured images (some of the non-featured images will be pngs with transparent properties, so a black boarder around them won’t look to great.)

    I’ve had a look ’round and really haven’t been able to find any info on this. If anyone has and advice it’d be much appreciated. My site url is http://www.chroniclechamber.com.previewdns.com (in preview mode for testing)

    Thanks in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You could add a specific class to your post_thumbnail in your template like this:

    <?php the_post_thumbnail('thumbnail', array('class' => 'yourclassname')); ?>

    So you could do something like:

    img.yourclassname { border: 3px solid black; }

    Thread Starter JoeMD

    (@joemd)

    Thanks. So is there any part of this I’d have to change, such as ‘yourclassname’ to ‘featured?’ Sorry, I’m rather new to this.

    Exactly – you just need to create a class name that you want to use.

    Thread Starter JoeMD

    (@joemd)

    So is a class the same as a category? All posts I want to feature I put into the Featured category. So, would the code look like this;

    <?php the_post_thumbnail('thumbnail', array('class' => 'featured')); ?>
    
    img.featured { border: 3px solid black; }

    Would I have to change the ‘thumbnail’ portion of code? What would I use for that?

    A class is not the same as a category.

    Your class name can be anything. You are making up whatever class name you want to use for these images. If ‘featured’ sounds like a good class name, then go ahead and use it.

    This needs to go in your template file where you are calling the image:
    <?php the_post_thumbnail('thumbnail', array('class' => 'featured')); ?>
    …and this needs to go in your style.css:
    img.featured { border: 3px solid black; }

    Thread Starter JoeMD

    (@joemd)

    Ah, with it now. Thanks very much, Doc.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Add Boarder to JUST Featured Image’ is closed to new replies.