Yoko – make date and time appear under the blog post title

• 

  jamesfoleyillustrations · Member · Jun 17, 2015 at 8:00 am

  • Copy link
  • Add topic to favorites

  Hi everyone,

  I’m looking for the css to make the date and time appear under my blog post titles.

  I’ve found a few other options in the forusm already- i.e. making the date and time appear above the blog posts, or deleting them entirely, but I can’t find one that makes the date and time go under the blog post title.

  Thanks in advance!

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

• 

  kathrynwp · Staff · Jun 17, 2015 at 7:16 pm

  • Copy link

  I don’t think it’s possible to move the post meta (i.e. author, date & time) below the titles with CSS alone. This CSS would place them above the post titles – it’s a bit hacky but it seems to work:

  @media screen and (min-width: 1179px) {
    .entry-details {
      margin-left: 210px;
    }
  }

• 

  ehtis · Staff · Jun 17, 2015 at 9:32 pm

  • Copy link

  Interesting scenario this one. Tried and tried, came up with this. It should keep the post meta below the post title in all three device/screen types:

  #content .entry-details {
    top: 21px;
  	left: 45px;
    position: relative;
    float: left;
    font: italic .8em/1.6 'Droid Serif', Times, serif;
    padding: 2px 18px 0 0;
    width: 22.507%;
  }
  
  #content .entry-header {
  	top: -65px;
  	margin-left: 42px;
    float: left;
  	width: 90%;
  	position:relative;
  }
  
  #content .entry-content {
  	margin-top:-8px;
  	margin-left: 42px;
  	float: left;
  	width: 90%;
  }

  Can you confirm if it works well at your end?

• 

  ehtis · Staff · Jun 17, 2015 at 9:35 pm

  • Copy link

  Hmm, indentation got messed up while I was customizing the CSS, forgot to correct it! Copy/paste would still work.

• 

  kathrynwp · Staff · Jun 17, 2015 at 10:42 pm

  • Copy link

  Interesting solution, Ehtisham. I see some issues on smaller screens (overlapping/absent post titles & meta) so if James goes for this, I’d suggest putting it in a media query to restrict it to tablet size and larger.

  I would also suggest removing the font declarations since those aren’t related to positioning and aren’t needed.

• 

  ehtis · Staff · Jun 17, 2015 at 11:07 pm

  • Copy link

  Kathryn,

  Thanks for the heads up! Indeed the post titles were not showing up on mobile-size screens in my previous code. However, it seems like post’s meta data (date, comments) is by default not included on mobile-size screens in this them. Even if you don’t apply any customization.

  Here’s a modified code which should work on all three sizes. I’m hacking it on the go, so it’d be great if you can find any bugs and let me know:

  #content .entry-details {
  	top: 81px;
  	left: 45px;
  	position: relative;
  	float: left;
  	width: 22.507%;
  }
  
  #content .entry-header {
  	top: -5px;
  	margin-left: 42px;
   	float: left;
  	width: 90%;
  	position: relative;
  }
  
  #content .entry-content {
  	margin-top: 44px;
  	margin-left: 42px;
  	float: left;
  	width: 90%;
  }

• 

  jamesfoleyillustrations · Member · Jun 18, 2015 at 10:53 am

  • Copy link

  Thanks so much for your help with this.

  Ehtis, the last set of code you posted works, there’s just one bug – in the mobile preview in the CSS customizer, the body text is being cut off on the right hand side by maybe 10 pixels or so.

• 

  ehtis · Staff · Jun 18, 2015 at 12:17 pm

  • Copy link

  James,

  Moved the sections, a bit to the left hand side. There you go:

  #content .entry-details {
  	top: 81px;
  	left: 22px;
  	position: relative;
  	float: left;
  	width: 22.507%;
  }
  
  #content .entry-header {
  	top: -5px;
  	margin-left: 22px;
   	float: left;
  	width: 90%;
  	position: relative;
  }
  
  #content .entry-content {
  	margin-top: 44px;
  	margin-left: 22px;
  	float: left;
  	width: 90%;
  }

• 

  jamesfoleyillustrations · Member · Jun 19, 2015 at 4:14 am

  • Copy link

  Thank you so much Ehtis! That’s working great.