WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] Trouble displaying Title on Hover THEME:SPUN (17 posts)

  1. new013
    Member
    Posted 1 year ago #

    Hello,

    I am new to word press and am using the SPUN theme. I am trying to get the post's titles to display over the image (ideally on hover) that appear in the circles on the homepage. I created a child theme and then I changed the "content-home.php" to always display the post's title (based on code suggested in the theme's support forum). I then added a span and a class to it. I have tried a variety of positions/display types and have no been able to get the title over the image. It just sits under it :(

    Did I put the span in the correct position? Does anyone have any suggestions for how I could accomplish this?

    Here is my URL

    Thank you so much for your help! I truly do appreciate it!!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  3. new013
    Member
    Posted 1 year ago #

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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  5. new013
    Member
    Posted 1 year ago #

    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?

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  7. new013
    Member
    Posted 1 year ago #

    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(); ?> -->
  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    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(); ?> -->
  9. new013
    Member
    Posted 1 year ago #

    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.

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try this CSS;

    .blog .hentry span.hometitle {
     position: absolute;
     top: 73px;
     width: 100%;
     text-align: center;
    }
    
    .blog .hentry {
     position: relative;
    }
  11. new013
    Member
    Posted 1 year ago #

    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!

  12. new013
    Member
    Posted 1 year ago #

    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?

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  15. tracyselena2
    Member
    Posted 1 year ago #

    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?

    http://greenboutique.ca

  16. tracyselena2
    Member
    Posted 1 year ago #

    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:      http://example.com/
    Description:    Child theme for the Twenty Twelve theme
    Author:         Your name here
    Author URI:     http://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;
    }
  17. tracyselena2
    Member
    Posted 1 year ago #

    k almost there LOL

    in a browser on a computer looks great! couldn't be happier..

    but when in iphone or ipad the words are not centered so I added some stuff to my css. it's probably more than necessary, but it works:

    below is my entire css that works in all devices:

    /*
    Theme Name:     Spun Child
    Theme URI:      http://example.com/
    Description:    Child theme for the Twenty Twelve theme
    Author:         Your name here
    Author URI:     http://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.4rem;
        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;
    text-shadow: 1px 1px #6B6868;
    }
    
    .blog .hentry {
     position: relative;
    }
    
    @media screen and ( max-width: 800px ) {
    
    	.blog .hentry span.hometitle {
     position: absolute;
     top: 50px;
     width: 100%;
       color: #FAFAFA;
        display: table-cell;
        font-family: Baskerville,"Playfair Display","Times New Roman",serif;
        font-size: 2.4rem;
        font-style: italic;
        height: 123px;
        line-height: 24px;
        overflow: hidden;
        text-align: center;
        transition: background 0.4s ease-in-out 0s;
        vertical-align: middle;
        width: 123px;
        word-wrap: break-word;
    text-shadow: 1px 1px #6B6868;
    }
    
    }
    @media screen and ( max-width: 600px ) {
    	.blog .hentry span.hometitle {
     position: absolute;
     top: 56px;
     width: 100%;
       color: #FAFAFA;
        display: table-cell;
        font-family: Baskerville,"Playfair Display","Times New Roman",serif;
        font-size: 2.4rem;
        font-style: italic;
        height: 140px;
        line-height: 24px;
        overflow: hidden;
        text-align: center;
        transition: background 0.4s ease-in-out 0s;
        vertical-align: middle;
        width: 140px;
        word-wrap: break-word;
    text-shadow: 1px 1px #6B6868;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic