Change font color of excerpt line in summary block

Squarespace community,

I can't find a post on this exact issue, so I'm hoping someone can help me. I'm trying to the change the font color of the excerpt line in a summary block--which is populated by an unlinked blog portfolio page--from black to gray. I'm working in the Foster template within the Wright template family, and there is no way to adjust this without custom code. I want the titles of each poem to stand out more, so I was hoping making the second line gray would help. Ideally, it would the same shade of gray as the lines above the Poems section (I think that shade is: hsla [0, 0%, 32%, .6]). I have no coding experience, and don't want to fool around with my site too much, so any help would be appreciated. If there is an earlier post I haven't seen about this issue, please point me toward it. Thanks!

All the best,

Ben

Also, my website is: http://bengroner.com

Hey @bengroner!

I wasn't sure if you were open to a code solution or if you were trying to stay away from one. Here is a code snippet that should work. I created a demo website with the Foster template, but make sure it works as you expect on yours, or if you could, share a link to your website.

.summary-excerpt {
    color: hsla(0, 0%, 32%, .6);
}

(In case it's helpful, here is how you can add CSS: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor)

Hope this helps! Let me know if that answers what you wanted.

@Inspirerd,

Thank you for the quick response! I am open to a code solution, so I appreciate you writing it out for me. However, when I go to the Design tab, it doesn't show Custom CSS like the tutorial says. I only have the options:  Logo & Title, Template, Site Styles, and Squarespace Badge. Once I find the Custom CSS box, I'll give this code a try. Do I just copy and paste it exactly as you've written it, or should I type it in myself? (I feel like I've seen the CSS box before, I just don't know where it could have gone.) 

@Inspirerd

http://bengroner.com Here's my website link too!

1 hour ago, bengroner said:

@Inspirerd,

Thank you for the quick response! I am open to a code solution, so I appreciate you writing it out for me. However, when I go to the Design tab, it doesn't show Custom CSS like the tutorial says. I only have the options:  Logo & Title, Template, Site Styles, and Squarespace Badge. Once I find the Custom CSS box, I'll give this code a try. Do I just copy and paste it exactly as you've written it, or should I type it in myself? (I feel like I've seen the CSS box before, I just don't know where it could have gone.) 

You need Business Plan or above to use custom code.

Try go to Site Styles -> Colors -> choose the relevant themes for your section, click edit -> Find Summary Block -> Excerpt Color

@melody495, Thank you for helping out too. I do have a Business Plan, but still don't see the custom code function. And I've looked all around Site Styles, and I don't have the Colors section you took have a screenshot of. I wish I did, because that would be an easy fix. Do some templates have more options to edit than others? Mine has lots of options for the site, header, main, footer, and mobile, but that's about it. The only two things under Content: Colors is "Body Text" and "Links." Is there another way to pull up those Summary Block options you have?

Hey @bengroner! Thanks for the link. It should work for your website. @melody495 was correct with their instructions. You want to use Custom CSS when you get there and you can copy and paste the code I provided. (You only need to type it in yourself if the copy and paste doesn't work.)

1 hour ago, melody495 said:

Website -> scroll to the bottom of Pages, click Website Tools under Utilities -> click Custom Code.

@melody495 I think your suggestion is with the 7.1 editor (based on the brush icon in the top right). I didn't realize how in-depth the 7.1 style options were - I will keep that in mind. I believe that since @bengroner is using the Foster template, he must be on the 7.0 editor. Also, I think (but I could be wrong), based on this answer (linked below), one of my own websites, and the Foster demo I used, that Code Injection and Javascript requires a Business plan or higher, but CSS and Custom CSS works even on the personal plan.

@melody495 and @Inspirerd, Thank you both so much!! Melody495, your directions successfully got me to the Custom CSS box, and Inspirerd, your code successfully changed the color. (You're right, I am in 7.0.) I'm really happy with how that section of my website looks now, so I appreciate the time and effort you both took in helping me out! Maybe when I get more skilled, I can pay it forward and help someone else. In the meantime, I may be back in this forum to ask additional questions later if I have them. I hope you both have a great day.

- Ben

@Inspirerd, Also, I was hoping to mark both you and Melody495 as the solution on this questios, but I see it only let me do one, and I clicked Melody495 first. I'm sorry, I wanted you to get credit for coming up with the code!

Just now, bengroner said:

@Inspirerd, Also, I was hoping to mark both you and Melody495 as the solution on this questios, but I see it only let me do one, and I clicked Melody495 first. I'm sorry, I wanted you to get credit for coming up with the code!

Ah ops. Yeah the code solution should definitely be the solution, I just gave direction 🤣 glad it worked out!

@bengroner Glad @melody495 and I could help! And no worries about the solution thing!