Jump to content
Join us live on Dec. 11 as we discuss the most-anticipated designs of 2025 with three brand design experts. ×

Writing on images

By OlivierL, in Customize with code

Go to solution Solved by OlivierL,

Recommended Posts

OlivierL Level 4

OlivierL

Posted
Posted (edited)

Site URL: https://cello-cheetah-stpl.squarespace.com/

Hello,

I've been trying for a while to reproduce this template (image linked) in my squarespace website. The site is not online yet, so I don't know how to show you anything (nothing to see really, but...). My main problem is that I can't write over an image. I mean, I can, but using the provided option, and so the text is only centered, as you may know.

So, could you help me with this ?

The goal is to have a full background image instead of the white, so I can't use the section banner and pray for the best (which is probably the worst to do, obviously). So I meant to have like the Orange image with the 3 stripes on one "box" and write over it, and another "box" with the blue and white image. If it is not possible to have that overlap of the cyan "box", it's not a problem, we'll move it down.

Does all of this make sense ?

Pardon me for my english, as you may have noticed in the attached image, I'm french 😄

Thanks for your help !

Oh, by the way, I'm using Brine on SquareSpace 7.0.

Site_Lorem.png

Edited by OlivierL
adding website url and SS version
  • Replies 1
  • Views 341
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

  • Solution
OlivierL Level 4

OlivierL

Posted
  • Author
  • Solution
Posted

So, obviously, after a few days searching, this is when I ask for help that I find the solution...

If anyone needs it, this is the CSS code I injected in the Custom CSS area.

Of course, I'll be happy to modify it if any of the CSS masters that lurks around here stumble upon this post and see some awfull newbie mistakes on that code !

Here it is : 

.image-card-wrapper {
  display: block !important;
  margin-left: 15px !important;
  margin-top: 15px !important;
}
.image-card * {
  text-align: left !important;
}
.image-title p{
  font-family: proxima-nova-condensed, sans-serif !important;
  font-weight: 900 !important;
  font-size: 2.5em !important;
  color: black !important;
}
.image-subtitle {
  margin-top:75px !important;
}
.image-subtitle p{
  font-family: proxima-nova-condensed, sans-serif !important;
  font-size: 1.1em !important;
}

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources