WordPress.org

Ready to get started?Download WordPress

Forums

Text/shortcode over Featured Image in excerpts (13 posts)

  1. rawdolphe
    Member
    Posted 2 years 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 2 years ago #

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

  3. rawdolphe
    Member
    Posted 2 years 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 2 years 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. rawdolphe
    Member
    Posted 2 years 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 2 years 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. rawdolphe
    Member
    Posted 2 years 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 2 years ago #

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

  9. rawdolphe
    Member
    Posted 2 years 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 2 years 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

  11. rawdolphe
    Member
    Posted 1 year ago #

    @timDesain are you still around?

  12. timDesain
    Member
    Posted 1 year ago #

    :)

  13. rawdolphe
    Member
    Posted 1 year ago #

    How to get in touch with you?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.