WordPress.org

Ready to get started?Download WordPress

Forums

Display Posts Shortcode
[resolved] Is there a way to get the posts to carry over the formatting from (5 posts)

  1. sventhebaker
    Member
    Posted 3 years ago #

    Bill,
    First of all, thanks for such an awesome plugin! Just what I was looking for!

    I'm working on a website for a nonprofit that has sites all around the country. I'm trying make it so that on one page, it can pull 3 posts from each location.

    My issue right now is that the title of the article gets pushed down below the thumbnail and there is no formatting. I'm definitely something of a newbie when it comes to figuring out how to get it to output right...

    Here's a link to a trial page I set up: http://www.usvetsinc.org/demo/

    Here's how I want the formatting to look:
    http://www.usvetsinc.org/category/barbers-point/bpnews/

    Is there any way that the posts can 'inherit' the formatting of the website? i.e. the Titles are bold and a larger font and next to, not below, the image?

    Thanks!

    Stephen

    http://wordpress.org/extend/plugins/display-posts-shortcode/

  2. Bill Erickson
    Member
    Plugin Author

    Posted 3 years ago #

    Unfortunately no, it can't inherit the styling of your post listing because it will need the exact same html structure. If you want the html structure exactly the same, I recommend:
    - Disable plugin
    - Copy all the code in display-posts-shortcode.php to your functions.php file
    - Modify the code to render the HTML you're looking for

    But there's a method that's a bit easier, since it's all CSS-based. I've just updated the plugin to add a class of "display-posts-listing" to the unordered list (you might need to wait an hour or so before downloading the new one). You can then write specific CSS to get it displaying the way you want.

    For instance,

    .display-posts-listing li {
    list-style-type: none;
    min-height: 175px;
    overflow:hidden;
    padding-left: 175px;
    position: relative;
    width: 100%;
    }
    
    .display-posts-listing img {
    left: 0;
    position: absolute;
    top: 0;
    }

    That will make the image float to the left of the content. You'll need to do some more styling to it to get it the way you want. You can also use 'use_excerpt' => 'true' to add the excerpt.

    With some creative CSS I'm sure you can get it looking like your current listing.

  3. sventhebaker
    Member
    Posted 3 years ago #

    Thanks for the immediate response! Thanks for adding the class...I'm working with the CSS right now.
    One thing that helped was putting the width to "inherit."

    Here's the code I am using:

    .display-posts-listing li {
    list-style-type: none;
    min-height: 175px;
    overflow:hidden;
    padding-left: 175px;
    position: relative;
    width: inherit;
    }

    .display-posts-listing .title {
    font-size:1.2em;
    font-weight:bold;}

    .display-posts-listing img {
    left: 0;
    position: absolute;
    top: 0;
    }

    And here's the updated page:

    Is there a way to get the "title" for the displaypost to inherit all the css for the fpost title in the site?
    Great job on this plugin.

    Stephen

  4. Bill Erickson
    Member
    Plugin Author

    Posted 3 years ago #

    There's two ways you can do it:

    - Find where the post title is getting its CSS declared in the style.css file and add the title to it ( .entry-title { } would become .entry-title, .display-posts-listing .title { } )

    - Use inspector or firebug to see all the CSS applied to your title, copy it, and write your own CSS statement for the title.

  5. sventhebaker
    Member
    Posted 3 years ago #

    makes sense. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic