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 8 months ago.

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

    laura
    Participant
    Post count: 69

    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: http://momgoesonline.com

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

    Thank you in advance for your help!
    Laura

    http://momgoesonline.com
    #97565

    Winterburn
    Participant
    Post count: 19

    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.


    #97569

    laura
    Participant
    Post count: 69

    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?

    #97573

    Tom
    Participant
    Post count: 997

    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 GenesisThemes.ca | Twitter | Google+ | Tumblr

    #97581

    laura
    Participant
    Post count: 69

    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!!!

    Laura

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

You must be logged in to reply to this topic.