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 1 year, 6 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:

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

    Code other pages:

    [html]<h1 class="entry-title">
    About
    </h1>[/html]

    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 ([html]<h1 class="entry-title"><a>About</a></h1>[/html]

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

    2) add a <span> around the title ([html]<h1 class="entry-title"><span>About</span></h1>[/html]

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

    [css].entry-title span {
    background: white;
    } [/css]

    OR

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

    [css].white {
    background: white;
    }[/css]

    Example loop-change solution #3:

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

    [php]<?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();

    [/php]

    Hope that works for you …

    • This reply was modified 1 year, 6 months ago by  Jan Ruehling.
    • This reply was modified 1 year, 6 months ago by  Jan Ruehling.
    #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 :

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

    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]

    <?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();
    [/php]

    #42502

    Jan Ruehling
    Participant
    Post count: 22

    Ok … wrong thought:

    Try this:

    [php]

    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();
    [/php]

    • This reply was modified 1 year, 6 months ago by  Jan Ruehling. Reason: Messed up code style
    • This reply was modified 1 year, 6 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.