Gap between posts & line between posts

  • Resolved shaunkillian

    (@shaunkillian)


    5 years, 8 months ago

    Hi

    I need help stylising 2 ‘Posts In Sidebar’ widgets on my site.

    On the page above, you will see I have used the Posts In Sidebar widget twice. Once for Popular Posts and once for Latest Posts.

    I am working on the Popular Posts widget only, and once I am happy with it, I will copy the styling to the Latest Post.

    Specifically, I need help with how to do 2 things:
    1. I want to reduce the gap between each post image and the associated post title. At the moment, the post title for the 1st post is closer to the image of the second post, than it is to its own image.
    2. I want to add a short horizontal line between each post listed.

    Any help is much appreciated.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Aldo Latino

    (@aldolat)

    Hi,
    you can use these CSS rules. I added a comment before each rule.

    /* Remove empty paragraphs */
.pis-ul p:empty {
	display: none;
}

/* Move titles 20 pixels up */
.pis-title {
	margin-top: -20px;
}

/* Add a border after each post */
.pis-li {
	border-bottom: 1px solid #eee;
}

/* Remove the border after last post in the list */
.pis-li:last-child {
	border-bottom: 0 none;
}

    Let me know, please.

    P.S.
    These rules are applied to every “Posts in Sidebar” widget. If you want to apply them to a specific widget only, you have to add the relevant ID before each rule. For example, the first rule becomes:

    #pis_posts_in_sidebar-2 .pis-ul p:empty {
	display: none;
}

    where pis_posts_in_sidebar-2 is the CSS ID of the single widget. To find the ID of the widget, go to in the admin panel of the single widget, then in the subpanel Styles > Custom styles.

    • This reply was modified 5 years, 8 months ago by Aldo Latino. Reason: Added the P.S
    • This reply was modified 5 years, 8 months ago by Aldo Latino.
    Thread Starter shaunkillian

    (@shaunkillian)

    That worked perfectly. Thanks so much.

    Plugin Author Aldo Latino

    (@aldolat)

    You’re welcome! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Gap between posts & line between posts’ is closed to new replies.