Jump to content

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

By ZKE, in Code Blocks

Go to solution Solved by tuanphan,

Recommended Posts

ZKE Level 4

ZKE

Posted
Posted

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

  • Replies 6
  • Views 2.7k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

ZKE
ZKE

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

tuanphan
tuanphan

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:

Posted Images

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

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!)

  • 4 weeks later...
ZKE Level 4

ZKE

Posted
  • Author
Posted (edited)

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
  • 10 months later...
tuanphan Level 18

tuanphan

Posted
Posted
21 hours ago, danikaamericaa said:

Or how to pull the Bio/description from our Author profile and allow it to show alongside our picture and name?

we need to use some CSS + JS to achieve this, you can share link to blog post on your site, we can check easier

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!)

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources