Trouble displaying Title on Hover THEME:SPUN

Do you have a section in the dashboard named, “Custom CSS”, “Custom Styles” or “Jetpack”, or are you using a Child Theme?

Hi Andrew. Thanks for the quick response. I’m using a child theme

Excellent. Can you wrap the post titles in span tags?

Thanks Andrew!

I did wrap the a span in the section that they suggested be changed (content-home.php) to have the title always show….

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<span class="hometitle"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php echo $thumb; ?><?php the_title(); ?></a></span>
</article><!-- #post-<?php the_ID(); ?> -->

and then I tried to use CSS to style it in using the class I added to the span

.hometitle a{
	color: red;
	display: table-cell;
	font-family: Baskerville, "Playfair Display", "Times New Roman", serif;
	font-size: 32px;
	font-size: 3.2rem;
	font-style: italic;
	text-align: center;
	vertical-align: middle;
	word-wrap: break-word;
	z-index: 1999;
}
}

which is based the styles that the theme uses to display the title in the circle when there isn’t an image with the post.

I’ve spent hours/days trying to get it to work and no matter what I try the title always appears in under the image….Am I missing something? Maybe I put the span in the wrong section?

Hmm I think the CSS should be straight forward, but first make sure you only wrap the title with the span, not the image and the title.

I think that’s likely what I’m doing. Admittedly PHP is very new to me and I am working hard to learn it but I’m still very new. Can you look at the code below and see if I’ve put the span in the correct location/where it should go??

THank you for all of your responses Andrew I really do appreciate it!

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<span class="hometitle"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php echo $thumb; ?><?php the_title(); ?></a></span>
</article><!-- #post-<?php the_ID(); ?> -->

Try this instead;

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
              <?php echo $thumb; ?>
              <span class="hometitle">
                    <?php the_title(); ?>
              </span>
         </a>
</article><!-- #post-<?php the_ID(); ?> -->

Thanks Andrew. That does seem to isolate the title but some of the previously working CSS is working on it now, I’ll take a look at firebug and see if something is being overwritten in CSS. It also makes the title get duplicated in the circles that already print the title (when there is no image). At this point though I’d be happy to add images to the ones that don’t have them if your span allows me to move the title over the images!!

Really though, thanks for taking the time to help me. I really appreciated it. I’ll play around and see if I can make it work.

Try this CSS;

.blog .hentry span.hometitle {
 position: absolute;
 top: 73px;
 width: 100%;
 text-align: center;
}

.blog .hentry {
 position: relative;
}

Thank You!!!!!!!!!!!!!!!! You are absolutely brilliant!! It works perfectly and is centred over the image! Thank you! Thank you!! I had spent days trying to sort this out! I can’t wait till I better understand PHP so that things like the span’s location will be more obvious to me!

Thank you again!

Andrew, is there a better way to link this to the SPUN theme so that others can easily find this solution if they need it?

I don’t see a way to relate this thread with the theme.
What I think you could do is create a new thread through the theme’s support section with your issue and link to this thread saying how you resolved it.

Note for other readers:
You should not be editing the theme’s files.
Make a Child Theme and copy over the file you want to change (content-home.php) into your Child Theme directory. You can then modify that.

I think I might be missing something. I changed the bottom part of content-home.php to

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
              <?php echo $thumb; ?>
              <span>
                    <?php the_title(); ?>
              </span>
         </a>
</article><!-- #post-<?php the_ID(); ?> -->

and then created a child theme with css including this:

.blog .hentry span.hometitle {
 position: absolute;
 top: 73px;
 width: 100%;
}

.blog .hentry {
 position: relative;
}

but yet the titles are still not on top of the images.

Can anyone help me out?

https://greenboutique.ca

it’s ok I figured it out. my child theme css looks like this ..incase anyone needs the whole solution:

/*
Theme Name:     Spun Child
Theme URI:      https://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     https://example.com/about/
Template:       spun
Version:        0.1.0
*/

@import url("../spun/style.css");

.blog .hentry span.hometitle {
 position: absolute;
 top: 70px;
 width: 100%;
   color: #FAFAFA;
    display: table-cell;
    font-family: Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 3.2rem;
    font-style: italic;
    height: 180px;
    line-height: 32px;
    overflow: hidden;
    text-align: center;
    transition: background 0.4s ease-in-out 0s;
    vertical-align: middle;
    width: 180px;
    word-wrap: break-word;
}

.blog .hentry {
 position: relative;
}