Jump to content

Move author profile to below blog post headline, reformat name and date

Go to solution Solved by tuanphan,

Recommended Posts

Hello - I'd like to match my blog posts with the way my newsletter email template looks (made in ConvertKit). I'd like all blog post pages to display the author profile (avatar and author name) and the published date below the blog headline and to look like the attached screenshot. Can someone help me with the CSS to get this done? Way out of my wheelhouse. Thank you!

 

Site: https://cricket-puma-wbgh.squarespace.com/articles/blooming-romantic-garden-design-by-ecoregion (password is dag)

Screenshot 2023-09-29 at 1.40.53 PM.png

Link to comment
  • Solution

To make text next to image, you can add this code to Website Tools (under Not Linked) > Custom CSS

.blog-item-wrapper .blog-item-author-profile-wrapper>a {
    display: flex;
    align-items: center;
}
.blog-item-wrapper .blog-item-author-profile-wrapper>a span {
    margin-right: 10px;
}

image.png.ac2730872cffa40819d1a600c49ffe53.png

to make date appear under name, add this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.blog-item-author-date-wrapper').appendTo('span.author-name');
})
</script>
<style>
  .author-name time.dt-published.blog-meta-item.blog-meta-item--date {
    display: block !important;
}

span.author-name span {
    color: black !important;
    font-size: 14px !important;
}
</style>

image.png.a895fb1e19017bb00ed79181e4da47d6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

Figured it out from another post 🙂 Used this code in the Custom CSS injection: 

 

.blog-item-content-wrapper {

  display : -webkit-box;
  display : -ms-flexbox;
  display : flex;
  
  -webkit-box-orient : vertical;
  -webkit-box-direction : normal;
  -ms-flex-direction : column;
  flex-direction : column;
  
  }

.blog-item-author-profile-wrapper {

  -webkit-box-ordinal-group : 0;
  -ms-flex-order : -1;
  order : -1;
  margin-top : 0 !important;
  
  }
Edited by ZKE
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.