Need help? Check out our Support site, then


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

  1. jamesfoleyillustrations
    Member

    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.

  2. 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;
      }
    }
  3. 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?

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

  5. 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.

  6. 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%;
    }
  7. jamesfoleyillustrations
    Member

    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.

  8. 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%;
    }
  9. jamesfoleyillustrations
    Member

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags