Creating a row of posts (thumbnail excerpt) using display posts shortcode css

• 

  jessewheaton · Member · Mar 9, 2014 at 3:45 am

  • Copy link
  • Add topic to favorites

  I’m trying to display a row/column of posts (with titles and excerpts) on a static page. For example on the “Weekly Themed Posts” page there would be a static full width page with a row of 3 articles across, extending infinitely down. http://electroniccurrent.com/weekly-themed-posts/
  -thumbnail images
  -with title and short excerpt
  -organized by date posted.

  [display-posts image_size="thumbnail" category="DOWNTEMPO THURSDAY" posts_per_page="20" order="ASC" wrapper="div" orderby="most recent" include_excerpt="true" ]

  Here’s the code I’ve come up with so far but its not working right, Title and short description should be below the image, not to the right, and limited to the width of the image (250 px) as if wrapped in a div tag.

  A good example of this would be the following blogs:

  http://www.earmilk.com/category/dance
  http://metrojolt.com/

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 10, 2014 at 5:24 pm

  • Copy link

  Hi there, I took a look at your Weekly Themed Posts page, and the example links you provided, and give the following CSS a try. As you will see, you are going to have to have the proportions for all the images you use as featured images the same since the length of the excerpts is set in the theme files and cannot be changed. This seems to flow well with the responsive nature of the theme you are using, but do take a look at it in a phone, both in portrait and landscape orientation, and also in a tablet if you have one.

  .display-posts-listing img {
      float: left;
      margin-bottom: 10px;
  }
  .display-posts-listing li {
      display: inline-block;
      margin-bottom: 20px;
      max-width: 250px;
      vertical-align: top;
      margin-right: 20px;
  }

• 

  jessewheaton · Member · Mar 11, 2014 at 6:19 am

  • Copy link

  sweeet.

• 

  thesacredpath · Member · Mar 11, 2014 at 4:39 pm

  • Copy link

  Glad that got you where you want to be. Let us know if you have additional questions or run into any other problems.

• 

  jessewheaton · Member · Mar 14, 2014 at 6:54 am

  • Copy link

  for some reason it won’t display more than 2 side by side- I want it to increase to three if there is enough space…

• 

  jessewheaton · Member · Mar 14, 2014 at 8:42 am

  • Copy link

  also I want to justify the font within the div tags, create a gap between the title and excerpt, and include tags (preferably within a colored box similar to this http://metrojolt.com/)

• 

  jessewheaton · Member · Mar 14, 2014 at 8:50 am

  • Copy link

  actually ideally it would be responsive to the width of the .content in the current browser- filling it with 2 posts if its 500- 800 px, 3 posts from 800 –1100px

• 

  jessewheaton · Member · Mar 14, 2014 at 9:02 am

  • Copy link

  it seems to be related to the content being restricted to a max width (despite my increasing that in css).

  Expand the browser as wide as possible to see what i mean: http://electroniccurrent.com/2014/01/13/moombah-monday-zedd-stay-the-night-deiger-remix/

• 

  thesacredpath · Member · Mar 17, 2014 at 10:22 pm

  • Copy link

  Give the way the responsive design works, I would suggest doing this instead. Go to Appearance > Header and “show” the header text and then add the following CSS. What it does is to use the text site title and then uses a pseudo :after rule to add your tagline in and position it to the right and hides your existing header image.

  Give it a try and see what you think.

  .site-title {
      font-size: 40px;
      font-weight: 400;
      position: relative;
      top: -60px;
      width: 100%;
  }
  .site-title:after {
      color: #B3B3B3;
      content: "... We Feature the Next Generation of Producers";
      font-size: 20px;
      font-weight: 400;
      line-height: 30px;
      position: absolute;
      right: 20px;
      top: 10px;
  }
  .site-title a {
      color: #550088;
  }
  #site-header img {
      background-color: #000000;
      height: 64px;
      visibility: hidden;
  }
  #site-header {
      background-color: #000000;
      border-bottom: 4px solid #550088;
      position: relative;
  }