Jump to content

How can I use code to change the Summary Block type styles?

Go to solution Solved by tuanphan,

Recommended Posts

Hi, please could someone provide me with the appropriate code for adjusting the type style inside a Summary Block of blog posts. I am using them like a list of profiles, with each blog post as the full profile of the artist.

Screen shot shows some content in the summary block - the Title of each blog post is the artist name.

I would like to change the style of the Title of each blog post displayed in the summary block to use a Heading style, such as a H4, instead of the current style which appears to be a paragraph style.

Or, at the very least to change the font so that it uses the heading fonts, which are shown in the hidden blog page listing attached - the heading typeface displays in all upper case.

Thanks!

Screenshot 2024-02-17 at 2.53.24 pm.png

Screenshot 2024-02-17 at 3.00.06 pm.png

Link to comment
  • 2 weeks later...
  • 4 weeks later...

Hi, just to add to this... the code shared above works well for font size changes, but I'm struggling to change the font itself on my site.

I've tried: 

/* Summary title */
a.summary-title-link {
  font-family: Neue Haas Grotesk Text;
  font-size: 20px !important;
}

And I've also tried: 

.summary-title-link {
    font-family: Neue Haas Grotesk Text;
    font-size: 20px;
}

Here's a link to a page where the summary block is present too: https://writefulcopy.com/blog/get-content-published-or-perfect

Grateful for any pointers on what needs tweaking here so the font actually changes. Cheers.

Screenshot 2024-04-03 at 08.07.01.png

Edited by fi1
Adding information.
Link to comment
On 4/3/2024 at 2:19 PM, fi1 said:

Hi, just to add to this... the code shared above works well for font size changes, but I'm struggling to change the font itself on my site.

I've tried: 

/* Summary title */
a.summary-title-link {
  font-family: Neue Haas Grotesk Text;
  font-size: 20px !important;
}

And I've also tried: 

.summary-title-link {
    font-family: Neue Haas Grotesk Text;
    font-size: 20px;
}

Here's a link to a page where the summary block is present too: https://writefulcopy.com/blog/get-content-published-or-perfect

Grateful for any pointers on what needs tweaking here so the font actually changes. Cheers.

Screenshot 2024-04-03 at 08.07.01.png

Your id is correct but font name is incorrect

a.summary-title-link {
    font-family: 'neue-haas-grotesk-text' !important;
}

 

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.