Modifying the look of a post (3 posts)

  1. rainsmom
    Posted 2 years ago #

    I'm customizing Blocomo, a child theme of Twenty Twelve. I have set it up with a static front page, but on that static front page, I have inserted an excerpt of my latest blog post.

    The static front page is page-templates/front-page.php. It "calls" the excerpt from content-fpage.php.

    I want to modify the look of the excerpt and its title -- change the font, reduce font size, and indent them about an inch -- but only on this front page.

    1. In my stylesheet, do I precede my changes with the name of the static front page (.template-front-page) or with the name of the page it calls from (.content-fpage ??)

    2. The title of the excerpt is h2. Would the body be p?

    Here's the page I'm working with.

  2. rainsmom
    Posted 2 years ago #

    Nevermind. I managed to figure this one out on my own! (Miracles DO happen!)

    Thanks anyway!!

  3. Michael
    Part-Time Forum Moderator
    Posted 2 years ago #

    do I precede my changes with the name of the static front page

    the theme uses body_class() which outputs template and page specific css classes;

    try using a browser inspection tool to find out.

    the same for the excerpt ...

    or without a inspection tool, use 'View source' in your browser to look at the html code which is generated by your site.

    for the body tag, you find:

    <body class="home page page-id-701 page-template page-template-page-templatesfront-page-php custom-background template-front-page custom-font-enabled">

    there you have all css classes you could possibly use to precede the new css - just distinguish between the general and specific ones.

    for the excerpt, you'll find:

    <div class="entry-content">
            <div class="post"><h2><a href="http://www.clickersolutions.com/wordpress/latest-post-for-front-page/">Latest post for front page</a></h2>
    <p>If I ...you both you and your [...]</p>

    so a suitable specific css for formatting the excerpt text could be:

    .template-front-page .entry-content .post p { ... }

Topic Closed

This topic has been closed to new replies.

About this Topic