How to style "featured posts" widget

Community Forums Forums Design Tips and Tricks How to style "featured posts" widget

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  laura 1 year, 3 months ago.

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


    Hi all

    I have been trying – without any success – to style the featured posts widgets.

    I’d like to display my most popular posts in the sidebar of my website (hence the use of the “featured posts” widget), but I’d love for it to look like the recent posts widget, which is more discreet and inline with the overall design of my website.

    I can’t simply use the recent post widget, as it only lists the recent posts, whereas I want to list my most popular posts.

    Can anyone please point me in the right direction?

    My website:

    I am currently displaying both widgets, so it’s easy to see the difference.

    Thank you in advance for your help!


    My thought in this case if you wanna using Genesis Featured Post Widget is:
    1. Create category named is Popular
    2. Get post from the above category
    The 02nd solution for this is using 03rd party plugins.



    Hi Winterburn

    Thank you for your suggestion. However, the problem is that I want to change the styling (css) of the Genesis Featured Post widget, not the posts that are being selected.

    Do you have a suggestion for how to do that?



    Laura, try this CSS at the bottom of style.css:

    .featuredpost div {
        padding: 0px;
        margin: 0px;
        border: none;
    .featuredpost .post {
        box-shadow: none;
        border-bottom: 1px dotted #ddd;
        margin-bottom: 0px;
    .featuredpost .post h2 a {
        color: #10b7b8;
        font-family: Arial, Helvetica, Tahoma, sans-serif;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.5;
        word-wrap: break-word;
    .featuredpost .post h2 a:visited {
        color: #10b7b8;
        text-decoration: none;
    .featuredpost .post h2 a:hover {
        text-decoration: underline;

    Choose your next site design from over 350 Genesis themes.
    Updates via | Twitter | Google+ | Tumblr



    Tom – your code worked perfectly!!!

    I am so so grateful – I have been trying to do this for a while, and could not work it out. THANK YOU SO MUCH!!!


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.