Text/shortcode over Featured Image in excerpts

  • Gin

    (@rawdolphe)


    14 years, 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;

Viewing 12 replies - 1 through 12 (of 12 total)
  • baszer

    (@baszer)

    14 years, 6 months ago

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

    Thread Starter Gin

    (@rawdolphe)

    14 years, 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.

    TimDesain

    (@timdesain)

    14 years, 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;
}

    Thread Starter Gin

    (@rawdolphe)

    14 years, 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.

    TimDesain

    (@timdesain)

    14 years, 6 months ago

    šŸ™‚

    put the code in index.php or loop-index.php
    http://codex.ww.wp.xz.cn/Template_Hierarchy
    http://codex.ww.wp.xz.cn/Theme_Development

    you can create other code for your post cat

    Thread Starter Gin

    (@rawdolphe)

    14 years, 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.

    TimDesain

    (@timdesain)

    14 years, 6 months ago

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

    Thread Starter Gin

    (@rawdolphe)

    14 years, 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.

    TimDesain

    (@timdesain)

    14 years, 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

    Thread Starter Gin

    (@rawdolphe)

    13 years, 10 months ago

    @timdesain are you still around?

    TimDesain

    (@timdesain)

    13 years, 10 months ago

    šŸ™‚

    Thread Starter Gin

    (@rawdolphe)

    13 years, 10 months ago

    How to get in touch with you?

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Text/shortcode over Featured Image in excerpts’ is closed to new replies.