Jump to content

Change the styling of 'Read more' text in summary block

Go to solution Solved by Lesum,

Recommended Posts

Hey!

I'm struggling to change the font styling of the read more text in a summary block.

 

I have tried to use this code, but no luck:
 

a.summary-read-more-link {
   font-weight: 500 !important;
    font-size: 1rem;
  	text-transform: none;
  font-style: normal !important;
}

 

It is for the 'Stories we've told so far' section on the home page, if you want to take a look.

https://www.blackandwhiteweb.design/

Password: testing

 

Thanks in advance!

Edited by DillonBradley
missing link
Link to comment
  • Solution

@DillonBradley You can try this code snippet:

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
	font-family: 'aktiv-grotesk-extended' !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	font-style: normal !important;
	text-transform: none !important;
}

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Hey @Lesum, thank you so much that worked!

I had a couple more questions if you didn't mind for this section of my website:
 

  1. I'd like to change the navigation arrows so they are similar styling (icon thickness and size) to the arrows used in my faq's accordian further down on the page. How would I go about this? I've already got some custom css to get them positioned where they are:
     
    .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: auto;
    }
    
    .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {   float: none;   width: 105%;   position: absolute;   bottom: 50%;   left: 50%;   -webkit-transform: translate(-50%,-50%);       -ms-transform: translate(-50%,-50%);           transform: translate(-50%,-50%);   -webkit-box-pack: justify;       -ms-flex-pack: justify;           justify-content: space-between;   z-index: 9; }

     
  2. What's the right css to customize the padding between the title, description and read more text?

Many thanks again!

Link to comment

@DillonBradley 1. Customizing the navigation arrow icons, unlike the arrows used in the FAQ accordion, presents some limitations. The styling of navigation arrow icons depends on the font styling of the accompanying text. In contrast, the accordion arrow icon is essentially a styled block that is transformed into an arrow shape using CSS code.

That said, we do have the option to hide the navigation arrow icon entirely and replace it with a custom icon that can be customized using CSS code.

 

2. To add padding on title:

.sqs-block-summary-v2 .summary-block-setting-text-size-large .summary-title {
	padding-bottom: 0.5rem !important;
}

To add padding on description:

.sqs-block-summary-v2 .summary-excerpt {
   padding-bottom: 0.5rem !important;
}

To add padding on read more text:

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
	padding-bottom: 0.5rem !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@DillonBradley If you mean these arrows


image.thumb.png.89c1998f1ac33551f59cb900e6627968.png

You can use this CSS code, replace Pixabay with your custom icon url

/* Summary Arrows in Left-Right side */
span.summary-carousel-pager-next.next {
    background: url(https://cdn.pixabay.com/photo/2023/09/10/00/49/lovebird-8244066_1280.jpg) no-repeat center center !important;
    background-size: contain !important;
}
span.summary-carousel-pager-prev {
        background: url(https://cdn.pixabay.com/photo/2023/09/04/10/16/girl-8232444_1280.jpg) no-repeat center center !important;
        background-size: contain !important;
}

.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before, .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    opacity: 0;
}

image.thumb.png.6956d232dff4641d9dcd108bb1293983.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
  • 2 weeks later...

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.