Support » Themes and Templates » Get post title over featured image – customized theme

  • Resolved thehodge

    (@thehodge)


    Hi everyone.

    I’m having some issues moving the post title above the post thumbnails on my site. This just a dummy site right now, so ignore the place holder text and images.

    Here is the site, and here is the original theme, unaltered.

    I know this can’t all be done in CSS, so I’m including the PHP I think is responsible for this. This theme has several extra php pages, for some reason.

    loop-portfolio.php

    <?php if ( have_posts() ) : ?>
        <?php $i = 0; ?>
        <?php while ( have_posts() ) : the_post(); $i++; ?>
    
        <div class="post_home">
            <a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
                <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail(array(305,175)); ?>
                <?php else : ?>
                    <img src="<?php bloginfo('template_url'); ?>/i/noimage.jpg" width="305" height="175" alt=""/>
                <?php endif; ?>
            </a>
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
        </div>
    
        <?php if ($i % 6 == 0) echo '<div style="clear: both;"></div>'?>
        <?php endwhile; ?>
    <?php endif; ?>

    And the CSS involved:

    .post_home {width: 305px; float: left; margin: 0 0 30px 15px;}
    .thumb {display: block; width: 305px; height: 175px; margin-bottom: 5px; position: relative; color: #333;}
    .thumb img {display: block; width: 305px; height: 175px;}
    .thumb span {display: block; width: 305px; height: 175px; position: absolute; top: 0; left: 0; background: #CCFFFF;}
    .post_home h2 {font-size: 12px; font-weight: normal; text-transform: uppercase;}
    .post_home h2 a {color: #000; text-decoration: none;}
    .post_home h2 a:hover {color: #CCC;}

    I’m pretty familiar with CSS but am a little skittish with PHP, hence why I turn to you guys haha I just want it above so I can screw around with the look in CSS until I get it right, but I really hate the text being below.

    Any help at all is greatly appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter thehodge

    (@thehodge)

    I’ve changed the loop-portfolio so the title is called before the image, but am having problems moving the title around in CSS now.

    Here’s what the loop-portfolio.php is now:

    <?php if ( have_posts() ) : ?>
        <?php $i = 0; ?>
        <?php while ( have_posts() ) : the_post(); $i++; ?>
    
        <div class="post_home">
    <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
                <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail(array(305,175)); ?>
                <?php else : ?>
                    <img src="<?php bloginfo('template_url'); ?>/i/noimage.jpg" width="305" height="175" alt=""/>
                <?php endif; ?>
            </a>
        </div>
    
        <?php if ($i % 6 == 0) echo '<div style="clear: both;"></div>'?>
        <?php endwhile; ?>
    <?php endif; ?>

    I feel like the title is trapped in the “post_home” CSS. I tried to give it it’s own name, but it pretty much derailed the structure of the page.

    When I try to move the CSS of the title around, it acts as though the text is incapable of overlaying the image.

    Any advice at all about this? I’ve been working at it all day and am just stumped.

    Thread Starter thehodge

    (@thehodge)

    K. Figured it out on my own.

    Posting this so people googling this might have some help too.

    1. Rearranging that string of PHP was the right thing to do. Make it call the title before the image.

    2. These are the changes I made to my CSS. The original piece related to featured images and the post title is posted above.

    Changes:

    .post_home h2 {font-size: 12px;
    		font-weight: normal;
    		text-transform: uppercase;
    		position: relative;
    		z-index: 1;
    		top: 100px;
    		width: 305px;
    		height: 25px;
    		padding-top: 5px;
    		text-align: center;
    }

    So almost every site I went to said to use “position: absolute” but this stacked my post titles on top of each other. Used “relative” instead of absolute and it fixed it. No idea why.

    Z-index set to 1 brings it above the images (the content container has a z-index of 0, so the images do as well by relation).

    The “top” forces the text down from the top of the post_home box that all of this is housed in. So I’m assuming that means that the text is pushed down 100px from the top of the post_home object.

    The “width” and “height” is related to the background behind the text. I gave it a bit of padding as I wanted the text centered on that bar.

    So, good luck.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Get post title over featured image – customized theme’ is closed to new replies.