Jump to content

Customizing Cookie Banner with Variable Font and Color for Template

Recommended Posts

Hi there,

I'm working on building my first Squarespace template. Since - per the nature of templates - people will be uploading or using their preferred fonts and colors, I'd like to create some code to style the cookie banner so that whatever font or colors they use sitewide will get pulled into the cookie banner.

First, I'd like to do this with the font. So that whatever font they use for paragraphs will get used here.

I'd also like to do to do this for the background color and the text color so that whatever color they choose as their darkest/lightest will be pulled for the background and text colors, respectively. I've currently got a workaround code in there that's pulling the menu block title color for the background, but I could see that getting messy. I'd much prefer to have it refer to the actual core site palette if possible. 

I've tried a few things but nothing's working seamlessly yet. Thanks in advance for any help! 

Site: https://www.caroline-reese.squarespace.com

Password: Caroline23

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

@Jess84 I think the easiest way to accomplish this would be to make use of the :root CSS mapping... just inspect the page and look down to the :root CSS formatting and then assign your mappings using the same formats... for example, something like this:

.sqs-cookie-banner-v2 {
	background-color: var(--darkAccent-hsl); /* or whichever color from the list you want to map it to */
}
.sqs-cookie-banner-v2 p {
	color: var(--lightAccent-hsl); /* or whichever color from the list you want to map it to */
	font-family: var(--body-font-font-family);
}

That should set it up so that whenever the primary theme colors or fonts are updated, the cookie banner keeps the same styling as the rest of the site. Make sense?

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.