Twenty Seventeen, display-posts-listing, position of date

  • Unknown's avatar
    manuschwendener · Member ·

    Hi

    I’m using this code (from another of my sites) https://en.forums.wordpress.com/topic/twenty-seventeen-display-posts-listing-length-of-hover-line-under-link.

    Now on https://rdm2017.wordpress.com I added the date to the blog post.

    Can I make the colour of the date brighter (#46505A)?

    And, more important: can I set the date in front of the title, instead of after it?

    A bonus would be to be able to remove some of the empty space below the ‘See all’ link.

    Thank you! :-)

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

  • Unknown's avatar
    otpidusprime · Member ·

    Hello @manuschwendener

    Can I make the colour of the date brighter (#46505A)?

    Yes, use this CSS to change the color of the date to #46505A: 

    .date {
    color: #46505A;
}

    And, more important: can I set the date in front of the title, instead of after it?

    Since the HTML is dynamic and precoded, we cannot change the HTML to set the date before the title. However, we can use absolute positioning in CSS to do that.

    Here’s what we do:
    1. Add relative positioning to the parent class so that the date stays inside this class when absolute positioning is added: 

    .listing-item {
    position: relative;
}

    2. Add absolute positioning to the date and move it left: 

    .date {
    color: #46505A;
    position: absolute;
    left: 0;
}

    3. The above code will overlap the title and the date, so to resolve that add left margin to the title: 

    .title {
    margin-left: 110px;
}

    NOTE: As the date changes, it might acquire more/less left spacing then it is currently has, so you have to manually adjust the left spacing of the title according to that.

    A bonus would be to be able to remove some of the empty space below the ‘See all’ link.

    As simple way to do that would be to remove/reduce the bottom padding of the class that wraps the entire post, like this: 

    .wrap {
    padding-bottom: 1em !important;
}

    but it also affects the post with the image above.

    So to only remove the spacing after the ‘See all’ link, do this:
    1. Go to your post editor and switch to the HTML tab.
    2. Find the code for the ‘See all’ link, you must look for something like this: 

    <p>
   <a href="https://rdm2017.wordpress.com/news/">See all</a>
</p>

    3. Add a custom class to this link. I added ‘see_all_link’ class to it: 

    <p class="see_all_link">
   <a href="https://rdm2017.wordpress.com/news/">See all</a>
</p>

    4. And finally target this class using CSS and add negative bottom margin to remove the spacing after the ‘See all’ link: 

    .see_all_link {
    margin-bottom: -50px;
}

    Hope these help 🙂

  • Unknown's avatar
    manuschwendener · Member ·

    Thank you, otpidusprime, working fine :-)

    Is there a way to bring the date and the post title to the same height?

    Date is standing a bit higher than the title, atm.

    I tried 

    .date {
    color: #46505A;
    position: absolute;
    left: 0;
    bottom: -2;
}

    but the -2 has no effect.

  • Unknown's avatar
    otpidusprime · Member ·

    Thank you, otpidusprime, working fine :-)

    Awesome! Glad I could help 😇
     

    I tried

    .date {
    color: #46505A;
    position: absolute;
    left: 0;
    bottom: -2;
}

    but the -2 has no effect.

    Instead of using absolute bottom positioning, try adding a top padding, like this: 

    .date {
    color: #000;
    position: absolute;
    left: 0;
    padding-top: 2px;  /*this one*/
}
  • Unknown's avatar
    manuschwendener · Member ·

    Thanks a lot, padding-top: 3px fixed it :-)

  • Unknown's avatar
    otpidusprime · Member ·

    @manuschwendener you’re welcome! 😇

  • The topic ‘Twenty Seventeen, display-posts-listing, position of date’ is closed to new replies.