Support » Plugin: WordPress Popular Posts » Changing Font Size and Weight of Title and Excerpt

  • Resolved wpblogger369

    (@wpblogger369)


    Hi, I haven’t published this on my page yet to link to it. I am using cards and I want to be able to have it be the same font size and weight as my “Recent Blog Posts” list. I spent the better part of the past two days trying to figure this out. (New to using CSS) I have the look I want with the cards option but can not figure out the CSS to adjust the weight of the title so it is not bold and also to change the size of the font of the excerpt. This is what I have for the excerpt, can anyone tell me if this is correct?`}

    .wpp-list {
    }

    .wpp-list li .wpp-excerpt; {

    font-family: “Helvetica”, Sans-serif;
    font-size: 16px;
    font-weight: 400;

    }

Viewing 15 replies - 1 through 15 (of 19 total)
  • Plugin Author Héctor Cabrera

    (@hcabrera)

    Hi @wpblogger369,

    When you say you’re using “cards”, you mean the Cards theme for the widget?

    Thread Starter wpblogger369

    (@wpblogger369)

    Yes Hector and thank you for making this widget!

    Thread Starter wpblogger369

    (@wpblogger369)

    I’m trying to get it to look more like the Latest Comments on my home page.

    Thread Starter wpblogger369

    (@wpblogger369)

    And to clarify on my homepage I’m not currently using WPP for the Popular Posts section but instead created a category for the most popular posts and using that. Your widget will show the actual most popular posts which will be terrific.

    Plugin Author Héctor Cabrera

    (@hcabrera)

    I don’t see a “Latest Comments” section on your homepage though 😛 Did you mean “Latest Posts” instead?

    Thread Starter wpblogger369

    (@wpblogger369)

    Yes, sorry meant latest blog posts. 🙂

    Plugin Author Héctor Cabrera

    (@hcabrera)

    I’ll do you one better:

    1. Set Theme back to None.

    2. Set Post HTML Markup: to:

    <article class="elementor-post elementor-grid-item post-{pid} post type-post status-publish format-standard has-post-thumbnail hentry">
        <a class="elementor-post__thumbnail__link" href="{url}">
            <div class="elementor-post__thumbnail elementor-fit-height">
                {thumb_img}
            </div>
        </a>
        <div class="elementor-post__text">
            <h3 class="elementor-post__title">
                <a href="{url}">{text_title}</a>
            </h3>
            
            <div class="elementor-post__excerpt">
                <p>{summary}</p>
            </div>
        </div>
    </article>

    3. Set Before / after Popular Posts: to:

    
    <div class="elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid elementor-has-item-ratio">

    and

    
    </div>

    respectively.

    4. Under “Posts settings”, make sure that the Display post excerpt checkbox is enabled, then set the Excerpt Length field to 15 characters (feel free to tweak this value to your liking though), and select the words option below.

    5. Under “Posts settings”, make sure that the Display post thumbnail checkbox is enabled, select the Set size manually, and set width and height to 130 and 73 (respectively.)

    6. Scroll down and click on Save to apply changes.

    With this -if everything went well- your popular posts list will look identical to your Latest Posts section. Give that a try and report back 🙂

    Thread Starter wpblogger369

    (@wpblogger369)

    Thank you so much! But I think I did something wrong because the HTML markup showed up on the page. I took screenshots of what I did but you can’t post photos here and can’t reply to the email. I copied and pasted what you had sent. Any idea what I may have done wrong??

    Thread Starter wpblogger369

    (@wpblogger369)

    Wait!! Got it I copied from the email not from here. Give me a second to redo it!

    Thread Starter wpblogger369

    (@wpblogger369)

    Don’t know why but that didn’t seem to work. There aren’t any thumbnails, and the font is still bold. Also the list is sort of cascading and indenting in and out.

    Thread Starter wpblogger369

    (@wpblogger369)

    Maybe it’s the first line it says has post-thumbnail hentry? Could that be it? Should it be entry?

    Plugin Author Héctor Cabrera

    (@hcabrera)

    Upload the screenshots to prnt.sc or postimages.org, then share the links here so I can see them.

    You can also create a temporary page on your website with the WPP widget in it and share the link here so I can see the code directly.

    Thread Starter wpblogger369

    (@wpblogger369)

    Here I made a temporary page and here is the image of the widget settings.

    Plugin Author Héctor Cabrera

    (@hcabrera)

    Alright, so:

    • Review step #4 to make sure the excerpt is as long as the ones shown under the Latest Posts section 😛
    • Go to Settings > WordPress Popular Posts > Tools > Thumbnails, set Lazy load to No and click on the Apply button below to save changes.
    • It seems you need to assign the font face of the post titles via Elementor. I’d tell you how but unfortunately I’m not familiar with it as I don’t really use it. Alternatively you can also just use regular CSS to set the font-family and the font-size of the post titles.

    Give those a try and report back.

    Thread Starter wpblogger369

    (@wpblogger369)

    Thank you again for your help. Unfortunately the thumbnails are still not showing up and it’s still doing that odd indenting thing. Maybe I’ll just go back to the manual way of inserting the popular blog posts and I’ll use WPP stats to help with that.

Viewing 15 replies - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.