WordPress.org

1. Justice
   Member
   Posted 6 months ago #

   I want to have the excerpt (I use a short code in this example) OVER the featured image, at the BOTTOM. I do NOT want it on the right/left or below the image.

   The following gives me the look I want, with a little issue (cannot have background color), but is the styling correct?

   Most importantly, I use the "max-height: 1px;" to get rid of a margin under the thumbnail (when the shortcode is over it), this margin is added by the shortcode item, I tried "margin: 0;" but it did not help, so I came up a with "max-height: 1px;" which seem to do the trick, but the downside is the I cannot use a "background-color:" with it.

   What is the best way to achieve this? Did I miss anything, should I change something?

   Post thumbnail css:
   

   border: 0;
   padding: 0;
   background: none;
   margin: 1px 3px 0 0;

   Excerpt:
   <div id="test">[shortcode]</div>

   CSS:
   

   div#player_y {
   	position: relative;
   	width: 127px;
   	max-height: 1px;
   	bottom: 25px;

2. baszer
   Member
   Posted 6 months ago #

   do you have an vissual example? An image or website? Because its hard to imagine what you want.

3. Justice
   Member
   Posted 6 months ago #

   I am working locally.

   Why do you need an example to understand a code as simple as that?
   It's self explanatory.

   The code works and does what it's supposed to do, I just need inputs/ideas from experts.

4. timDesain
   Member
   Posted 6 months ago #

   try it.
   put this code within loop
   

   <div class="post">
     <div class="post-excerpt"><?php the_excerpt();?></div>
     <div class="post-thumb">
       <?php if ( has_post_thumbnail()) : the_post_thumbnail(); endif; ?>
     </div>
   </div>

   css
   

   .post{
   border-top: 1px solid #eee;
   padding: 10px 0;
   }
   .post-excerpt{
   display: block;
   text-align: justify;
   }
   .post-thumb{
   display: block;
   border-top: 1px solid #eee;
   padding: 4px;
   background: #f1f1f1;
   margin:10px 0;
   }

5. Justice
   Member
   Posted 6 months ago #

   @timDesain, thanks you, it's a good idea, but it's not giving me what I want.

   I only want the excerpts and thumbnails in the front page though. Your code added bits to the posts.

6. timDesain
   Member
   Posted 6 months ago #

   :)

   put the code in index.php or loop-index.php
   http://codex.wordpress.org/Template_Hierarchy
   http://codex.wordpress.org/Theme_Development

   you can create other code for your post cat

7. Justice
   Member
   Posted 6 months ago #

   I did put your code in the index.php. but it's not working, I am using a modified index file already.

   What I need is simpler really, I don't to alter the index again or play with php for this.
   Just need the styling optimised/amended for the above code.

8. timDesain
   Member
   Posted 6 months ago #

   would you like to copy your index to http://wordpress.pastebin.com?
   then post the url here.

9. Justice
   Member
   Posted 6 months ago #

   The index will not help, i don't want to involve php.
   Just want to use CSS. As I said, I have the desired effect with CSS, but I would like to know if the above code makes sense, or is there anything obvious that should be amended.

10. timDesain
    Member
    Posted 6 months ago #

    ok.

    before we make css, we need to know the html structure.
    so, copy the page source (browser output, not php) of index to http://wordpress.pastebin.com

Reply

You must log in to post.