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

  • Author
    Posts
  • #2409937

    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 jamesfoley.com.au.

    #2410149

    kathrynwp
    Staff

    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;
      }
    }
    #2410163

    ehtis
    Staff

    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?

    #2410164

    ehtis
    Staff

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

    #2410169

    kathrynwp
    Staff

    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.

    #2410170

    ehtis
    Staff

    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%;
    }
    #2410184

    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.

    #2410186

    ehtis
    Staff

    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%;
    }
    #2410237

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

The topic ‘Yoko – make date and time appear under the blog post title’ is closed to new replies.