how to style single post and page titles

Community Forums Forums Design Tips and Tricks how to style single post and page titles

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Jan Ruehling 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #42273

    sido
    Participant
    Post count: 2

    I am trying to style my .single .entry-title (http://www.youmeandfivebucks.com/free-to-be-me/) and my .page .entry-title (http://www.youmeandfivebucks.com/about/) to look like the .entry-title and .widgettitle on my homepage (http://www.youmeandfivebucks.com/) –meaning the titles have a lined background with a white background behind the text. Can anyone help? I’ve been driving myself crazy for the past two days trying to figure it out. Thank you!

    http://www.youmeandfivebucks.com
    #42478

    Jan Ruehling
    Participant
    Post count: 22

    Hello Sido,

    you are missing a sub-class in the title on your singleposts / -pages.

    Code Homepage:

    <h2 class="entry-title">
     <a href="http://www.youmeandfivebucks.com/free-to-be-me/" title="free to be me" rel="bookmark">free to be me</a>
     </h2>

    Code other pages:

    <h1 class="entry-title">
     About
     </h1>

    The .entry-title has the striped background … but the white background in the middle comes from the <a> – tag … and that’s missing in #2

    You have to edit your loop (single.php && page.php) to

    1) add an <a> tag around the title (

    <h1 class="entry-title"><a>About</a></h1>

    )  … this is an ugly solution since the color will change as clickable link on hover … OR

    2) add a <span> around the title (

    <h1 class="entry-title"><span>About</span></h1>

    ) and style it in your (Child)theme style.css:

    .entry-title span {
     background: white;
     } 

    OR

    3) add a <span class=”white”> around the title and add this in the style.css

    .white {
     background: white;
     }

    Example loop-change solution #3:

    In single.php of your (child)theme (create if it does not exist):

    <?php
     function jr_change_post_title() {
     ?>
     <h1 class="entry-title"><span class="white"><?php the_title(); ?></span></h1>
     }
     remove_action('genesis_post_title', 'genesis_do_post_title);
     add_action('genesis_post_title', 'jr_change_post_title');
    
    /* Other code here */
    
    genesis();
    
    

    Hope that works for you …

    #42497

    sido
    Participant
    Post count: 2

    Thank you so so much, Jan! I tried option #2, which worked perfectly in getting the white background on all post/page titles just the way I want. I added the following code to the genesis_post_title_hook :

    <h1 class="entry-title"><span><?php the_title(); ?></span></h1>

    The only problem that came up now is that the post titles on my homepage are not permalinks anymore. Any way to fix that?

    #42498

    Jan Ruehling
    Participant
    Post count: 22
    
    <?php
    
    function jr_change_post_title() {
      if(  is_home() == false  ) {
       echo '<h1 class="entry-title"><span><?php the_title(); ?></span></h1>';
     } // end if statement 
    } // end function
    remove_action('genesis_post_title', 'genesis_do_post_title);
    add_action('genesis_post_title', 'jr_change_post_title');
     
    /* Other code here */
     
    genesis();
    
    #42502

    Jan Ruehling
    Participant
    Post count: 22

    Ok … wrong thought:

    Try this:

    
    function jr_change_post_title() {
       echo '<h1 class="entry-title"><span><?php the_title(); ?></span></h1>';
    } // end function
    if(  is_home() == false  ) {
        remove_action('genesis_post_title', 'genesis_do_post_title);
        add_action('genesis_post_title', 'jr_change_post_title');
    } // end if statement
    
    /* Other code here */
    
    genesis();
    
    • This reply was modified 11 months ago by  Jan Ruehling. Reason: Messed up code style
    • This reply was modified 11 months ago by  Jan Ruehling. Reason: Messed up code style
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.