How to Generate Custom CSS for Squarespace using ChatGPT

I received a question from one of our customers today about how to make image caption titles appear on hover. I thought this would be a good case study for using ChatGPT to generate CSS on a Squarespace site. Let's dig in.

First, we need to inspect the element. I will isolate the image, and it seems that each of these divs applies to a different image. I will click "Edit as HTML," copy the entire HTML, and paste it here. Now, in my prompt, I will ask ChatGPT to write CSS to make the caption title appear on hover.

To make the caption title appear on hover, we can use CSS. Here's an example of how to achieve this. Let's test it and see if it works. It seems that the image slide title is currently below the image. How can we make it overlay the image? This code might help us achieve that. Let's copy the code and give it a try.

I will paste this in my custom CSS. As you can see, the image title now appears on hover. Let's save that. We might want to change the color of the text and adjust the spacing. To change the font color and size, we can use the following customizations. I will copy that piece and paste it within what we already have here, then hit save.

Now the color is white, and the font size is 20. If we want to make it 30, we can adjust the code accordingly. However, let's bring it back to 20, as that seems good enough.

So, there you have it. This is how you can generate custom CSS for your Squarespace site using ChatGPT. It's quite simple. First, copy your HTML and give a specific command. If the initial command isn't specific enough, go back and provide more clarity. If you have any questions about this process, feel free to leave them in the comments, and I'll be happy to answer them. Peace.

Here’s another example…

You can find the code here.

Code Queen: The Story of Becca Harpain and Inside the Square

This month is our 8th year business anniversary and we're celebrating with a series called Into the SQSP Metaverse: 33 Portals Through Web Design And Entrepreneurship. This is Portal #3.

The California sun was setting as Becca Harpain sat hunched over her laptop, her fingers flying over the keys. She was deep in the digital trenches of Squarespace 7.1, the platform's latest version that had sent shivers of anticipation and trepidation throughout the web design community. But Becca was not daunted. Instead, she was thrilled by the challenge.

For years, Becca had been a Squarespace entrepreneur, a self-proclaimed CSS super nerd who spoke the language of computers with fluency and flair. She had a knack for transforming web pages into breathtaking digital canvases, and she was about to do it again. But this time, it was different. This time, she was not just redesigning a website. She was reshaping her destiny.

“I want to become a lot more of a resource than just a one-off. I want to make it easy for people to narrow down what they need.”

— Becca Harpain

Becca's journey into the Squarespace metaverse began in a small town deli across a startup company. Tired of smelling like turkey, she had taken the job as a phone operator at the startup, which eventually led her to the world of online marketing. With ten keywords and a hundred dollars, Becca dived headfirst into Google Ads, kickstarting her career in the digital realm.

Years later, she was managing a global marketing campaign, dealing with six-figure budgets, three languages, and multiple countries. But as thrilling as it was, the fast-paced world of marketing began to wear her out. She longed for the creativity of art, the joy of design. So, she pivoted, teaching herself CSS and starting to build websites for clients.

Becca's pivot led her to create Inside the Square, a platform where she shared her CSS knowledge with the Squarespace community. Every Tuesday, she would post a new video or article, sharing her insights and tips. The response was overwhelmingly positive, and Inside the Square quickly gained traction.

But Becca wasn't satisfied with just sharing her knowledge. She wanted to empower others to become experts themselves. Inside the Square is Becca's brainchild, her gift to the Squarespace community. With a wealth of free CSS tutorials and the launch of Custom Code Academy, she is on a mission to democratize web design, distilling years of experience into a comprehensive and accessible course.

“I’m a very high energy person. I like to channel that energy into a lot of different directions. Picking one path and focusing on it has been a really big part of Inside the Square”

— Becca Hapain

As Inside the Square continues to grow, Becca is excited about the future. She's redesigning her website, organizing her content, and creating cheat sheets for those who want to dip their toes into CSS. She's also nurturing her community, fostering collaboration, and helping her students become experts.

Through all her trials and triumphs, Becca remains committed to her mission: to empower Squarespace entrepreneurs to become CSS experts. As she charts her course through the Squarespace metaverse, Becca's story serves as a beacon of hope for aspiring entrepreneurs. It demonstrates that with passion, creativity, and a bit of code, they too can etch their mark in the digital universe.

Listen to her story here and check out her new podcast Think Inside the Square.

From Squarespace Agency to Saas Success: The Rise of MemberSpace

This month is our 8th year business anniversary and we're celebrating with a series called Into the SQSP Metaverse: 33 Portals Through Web Design And Entrepreneurship. This is Portal #2.

"The key is to start as simple as you can with as few variables as you can. Get some people to give you their credit card and pay you."

- Ward Sandler

Ward and Ryan were running a small but successful Squarespace design and development agency, 320NY. They had a steady flow of clients, but a recurring issue kept cropping up - their clients were desperate for membership functionality on their Squarespace sites.

"We were software developers. We knew how to build things," Ward recalls. "So, we did a little research."

They headed to the Squarespace Q&A forum, where they found a post about adding membership functionality to Squarespace, which had received tens of thousands of views. The demand was clear.

“The less variables possible, start there. Then you can always add on new things. You can always make things more complicated and you can do that based on feedback from people paying you, not just random thoughts in your head or friends or family who just want to see you do well, but aren’t actually your customers.”

— Ward Sandler

Ward and Ryan saw an opportunity. They began developing a product, MemberSpace, that would allow Squarespace users to add membership functionality to their sites.

The transition from agency to product business was not without its challenges. "Building sites for people doing support requires a lot of time," Ward says. "But with software, you can help a lot more people with the same amount of time."

MemberSpace was an instant success. The product was profitable, and the team of nine full-time employees began to grow. The founders had a relentless focus on supporting their customers and community, which earned them a reputation for world-class support.

The founders also made a commitment to fair long-term pricing. "We all know the story by now," Ward says. "A platform that creators and entrepreneurs rely on raises a giant pile of venture capital, tries to grow too fast, and eventually is forced to massively hike prices to their customers’ dismay or implode. MemberSpace is optimizing their company to never do that to their customers."

Despite the success of MemberSpace, the founders are not resting on their laurels. They have made a strategic decision to extend their technology beyond Squarespace.

They've cleverly built their technology in a way that is decoupled from the underlying content management system (CMS). This means they can extend their services to basically any other web platform out there.

With this expansion, MemberSpace is not just about Squarespace anymore. They are now empowering entrepreneurs across all platforms to build their membership businesses seamlessly. This commitment to their customers, coupled with their fair pricing and world-class support, continues to drive their growth and success. For Ward, Ryan, and their team, the journey is just beginning.

As for their own plans, the founders intend to stay focused on building a profitable, sustainable company. "We're optimizing for retention," Ward says. "We want every customer that walks through the door to stay with us forever."

For Ward, the key was always to start small, to learn from real customers who are actively using the product, and to be agile in their approach. With this mindset, they built a thriving business that caters to entrepreneurs and businesses seeking a powerful, user-friendly membership solution on the Squarespace platform.

Through their creativity and adaptability, the 320NY team successfully transformed their software development expertise into a flourishing subscription-based business. Their story serves as a beacon of inspiration for Saas entrepreneurs navigating their own journey in the SQSP Metaverse.

Listen to Ward’s story here.