WordPress.org

1. Lyuben
   Member
   Posted 5 months ago #

   Hi, found this tutorial:

   dailyblogging.org/wordpress/how-to-add-and-style-post-thumbnails-with-captions-in-wordpress/

   And inserted this code - it works correctly on my website, shows the thumbnails and caption text:

   <div class="excerpt_thumbnail">
   <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail();
   echo '<div class="thumbnail_caption">' .get_post(get_post_thumbnail_id())->post_excerpt.'</div>'; ?></a>
   </div>

   Except that excerpt (caption) text of the thumbnails appears as ordinary text, without any styling. According to the tutorial, it should appear into the photo in a transparent line.

   Wondering how to make it work? Maybe there is something wrong in the code?

   Here is the ccs code from the link, that I put at the end of stylesheet.ccs:

   .excerpt_thumbnail {
   float: left;
   }
   
   .excerpt_thumbnail img{
   background: #fcfcfc;
   padding: 0.4em;
   margin: 0.5em 1em 0.5em 0em;
   border: 1px solid #E0E0E0;
   }
   
   #content_area .excerpt_thumbnail div.thumbnail_caption {
   position: relative;
   background: rgba(51, 51, 51, 0.7);
   color: white;
   text-align: center;
   text-transform: uppercase;
   font-size: 0.8em;
   width: 112px;
   margin: -4em 0em 0em 0em;
   }

   Here is the result for the moment:
   http://planinski-vodach.com/?page_id=1655

2. alchymyth
   The Sweeper
   Posted 5 months ago #

   your theme does not have the #content-area css id;

   change the last style to:
   

   .excerpt_thumbnail div.thumbnail_caption {
   position: relative;
   background: rgba(51, 51, 51, 0.7);
   color: white;
   text-align: center;
   text-transform: uppercase;
   font-size: 0.8em;
   width: 300px;
   margin: -4em 1em 2em 6px;
   }

   (width and margins adapted)

   also change the margins in the style of .excerpt_thumbnail img; for instance to: margin: 0.5em 1em 1em 0em;

   for these kinds of formatting problems, try to work with a web tool such as Firebug http://getfirebug.com/

3. Lyuben
   Member
   Posted 5 months ago #

   Hey, thanks a lot, that worked!

Reply

You must log in to post.