Jump to content

Styling "Read More" links in blog category pages

Recommended Posts

I am trying to style the my category blog pages to how I’ve styled my blog summary blocks, specifically, the “Read More” link.

Here is the style of the summary block where the “Read More” link is styled correctly:

https://www.lucasano.com/test-5

And below is a link to one of my category pages where I've tried to mimic the "Read More" style button:

https://www.lucasano.com/blog-content/category/Latest+Work

I can’t get the "Read More" link to style correctly even though I am using the same code for the summary block, but targeting the .blog-more-link selector. Also, the underline is not going away, despite the correct code to remove it. Here is the code I am using:

.blog-more-link {
    position: relative !important;
    display: inline-block !important;
    height: 40px !important;
    padding-top: 6px !important;
    padding-left: 5px !important;
    padding-right: 0px !important;
    padding-bottom: 5px !important;
    font-size: 13px !important;
    top: -20px !important;
    color: initial !important;
    z-index: 1 !important;
    transition: color 0.3s !important;
    text-decoration: none !important;
}

.blog-more-link::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 30% !important;
    height: 80% !important;
    border: 1px solid #323843 !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    transition: background-color 0.3s !important;
    z-index: -1 !important;
}

.blog-more-link:hover::before {
    background-color: #323843 !important;
}

.blog-more-link:hover {
    color: #EFEAE6 !important;
}

 

Link to comment
  • Replies 6
  • Views 234
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hey Luke! I'd love to help. Here is a quick code fix for ya:

.blog-more-link {
    border:1px solid #323843!important;
    padding:5px!important;
    padding-right:1.5rem!important;
    border-radius:4px;
    transition: all .3s!important;
}

.blog-more-link:after{
    background:transparent!important;
    content:"→"!important;
    transform:translate(3rem, -1rem)
}
.blog-more-link:hover{
    background:#323843;
    color:#FFF!important;
    transition: all .3s!important;
}

 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment

Thank you, @inside_the_square! This code worked perfectly! I had a couple other issues trying to get the category pages to match the style of blog post pages and summary blocks:

  • The date on category pages are displayed as 00/00/00 whereas blog posts and summary blocks are displayed as June 1, 2024. Is there a code to match to June 1, 2024?
  • I’d like the date displayed on top, then category underneath, followed by the blog title. 
Link to comment

You'll need some javascript to change the date type; not my specialty but hopefully another Squarespacer can help! For the order, you can use the settings built into Squarespace to set your primary metadata as the date, followed by the category as your secondary metadata. After that, this code will organize them into a column and hide the delimiter:

.blog-meta-section{
 flex-direction:column
}
.blog-meta-delimiter{
 display:none!important
}

 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment
Posted (edited)
1 hour ago, inside_the_square said:

You'll need some javascript to change the date type; not my specialty but hopefully another Squarespacer can help! For the order, you can use the settings built into Squarespace to set your primary metadata as the date, followed by the category as your secondary metadata. After that, this code will organize them into a column and hide the delimiter:

.blog-meta-section{
 flex-direction:column
}
.blog-meta-delimiter{
 display:none!important
}

 

Thank you! For a blog post, is there a way to stack the meta as well - with date on top and category underneath? https://www.lucasano.com/blog-content/template-blog-post

Edited by LukeDesign
new question
Link to comment
On 6/4/2024 at 4:42 AM, LukeDesign said:

Thank you! For a blog post, is there a way to stack the meta as well - with date on top and category underneath? https://www.lucasano.com/blog-content/template-blog-post

You can use this CSS code

div.blog-item-meta-wrapper {
    flex-direction: column-reverse;
}

image.png.7f41e0f828f2078cd7b694227b5b70e4.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

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.