marktwhaley Posted March 24, 2021 Share Posted March 24, 2021 Site URL: https://www.lifelong-wellbeing.com/ Hi there, I am trying to reposition the metadata on my blog list page so that it appears underneath the blog title instead of above. As well, instead of all numeric values for the date, I'd like to show the abbreviated month (ex: Feb). Thanks for your help! Mark Link to comment
WillMyers Posted March 24, 2021 Share Posted March 24, 2021 Hey Mark, I'd use Flexbox for this. Try adding this to your Custom CSS area: .blog-basic-grid .blog-basic-grid--text { display:flex; flex-direction:column; } .blog-basic-grid .blog-basic-grid--text .blog-title{ order: 1 } .blog-basic-grid .blog-basic-grid--text .blog-meta-section{ order: 2 } Now let's play around with some JS to edit the Dates. Warning, I'm about to get super nerdy with this, but I'll try to talk through the steps. First create an array with the months that we want in their correct order. Then, we need to loop through each date, convert it to the format MM/DD/YYYY (javascript needs this format) , then convert that into a UTC Date. Then we pull out the month number and match it to the number in our Months Array. Vanilla JS should look like this: Add this to your Page Settings » Advanced » Code Injection area. <script> let months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ], dates = document.querySelectorAll('.blog-date'); dates.forEach(date => { let text = date.innerHTML.split("/"), newDate = new Date(text[1] +'/'+ text[0]+'/'+ text[2]); date.innerHTML = months[newDate.getMonth()]; }) </script> Let me know if this does it! Hey there, my name is Will and I help Squarespace designers and developers with my plugins, tutorials, and my Code Curious Membership. I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life - I'm an expert in 2 of these. Youtube | Website Link to comment
marktwhaley Posted March 25, 2021 Author Share Posted March 25, 2021 Thanks @WillMyers!! The rearrange worked perfectly! For the code injection, when I go to Page Settings » Advanced » Code Injection area, I only see boxes to inject code for the Header, Footer, Order Confirmation and Lock page. I tried injecting it into the "Post Blog Item Code Injection" space, but that didn't seem to work. Any ideas? Thanks again for your advice! Mark Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.