Jump to content

How to change a link to a button | Summary block

Go to solution Solved by bycrawford,

Recommended Posts

Hi there!

I have added a Summary block to my home page to display the latest blogs. Currently it is showing the 'read more' as a link, but I would like that to display the link as a button (see attached image).

Does anyone have any code I could add to this page so the read more links display instead as buttons? ideally with an outline in #11394D colour if possible (although I'll settle with black)

Thanks in advance.

Smiles,

Jo

blog summary example.png

Link to comment

Hey Jo,

Use this:

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  border: solid 1px #11394D;
  padding: 10px;
  width: 60%;
  text-align: center !important;
  margin-top: 30px !important;
  transition: 0.2s;
  
  &:hover {
    background: #11394D;
    color: white;
    transition: 0.2s;
  }
  
}

 

Edited by bycrawford
Code change
Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
19 hours ago, curlybirdie21 said:

Thanks so much but sorry for sounding like a pleb but where should i put this code - when I add it to the page it doesnt work - should it be on the main css section?

Add it to Design > Custom CSS

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
16 hours ago, curlybirdie21 said:

Thanks you so so much, now one last request, is there any way we can change the font in the Read More box to Bebas Neue CAPS? without the arrow (ideally).
Sam thank you so so much!
You are so flipping clever!

Hey Jo, thanks for the kind words! So to add in Bebas Neue as your font in caps, here is how the code would look:

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  border: solid 1px #11394D;
  padding: 10px;
  width: 60%;
  text-align: center !important;
  margin-top: 30px !important;
  transition: 0.2s;
  font-family: 'Bebas Neue';
  text-transform: uppercase;
  
  &:hover {
    background: #11394D;
    color: white;
    transition: 0.2s;
  }
  
}

To get rid of the arrow, there are some codes floating round, but I believe they mess with the styling of the button code I gave you. If you download an amazing plugin called Lazy Summaries from SquareWebsites (https://www.squarewebsites.org/squarespace-plugins/lazy-summaries) it allows you to change the text (screenshot attached). If you input whatever you want and hit save, the text will change and the arrow will no longer be shown.

Hope this helps!

Screenshot 2022-12-30 at 08.35.42.png

Edited by bycrawford
Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
4 hours ago, curlybirdie21 said:

Thanks Sam!
So is this code to replace the code you sent me previously, or in addition to?
Smiles

Jo

Hey Jo, this would be to entirely replace the code that I sent earlier 🙂

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
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.