Jump to content

Banner Text Formatting

Recommended Posts

Site URL: https://rabbit-indigo-e9dr.squarespace.com/config/design/custom-css

Hi! I'm trying to build out a prototype for a client in squarespace, and have struggled a bit with custom CSS (total novice). I've attached a PDF of my desired layout (build in InDesign [shame on me]) as well as a screenshot of the resulting index page within the Bedford template. My question is:

  • Can I set banner text as H1, H2, H3 with CSS? If so - any ideas re: the code I would need to add? 
    • I'd love for the top to be left justified, large and orange;
    • The second to be left justified, smaller, blue, with enough padding to clear the woman's face
    • and the third to be centered and white
  • Any suggestions outside of custom CSS that you think would help? Maybe posters or collages? 

Super specific and annoying, but figured it couldn't hurt to ask. Appreciate any and all direction you may be able to offer as I am absolutely at a loss on this! 

FSOA_Screenshot.png

FSOA_DesiredLookFeel.png

Link to comment

Add to Page Settings > Advanced > Header

<style>
  /* first banner */
  #home .desc-wrapper p {
    text-align: left;
}
  #home .desc-wrapper p * {
    font-size: 4em;
}
  /* banner 2 */
  #about .desc-wrapper {
    padding-left: 15vw;
    text-align: left;
}
  #about .desc-wrapper strong {
    color: blue;
    font-size: 2em;
}
  /* banner 3 */
  div#new-page * {
    color: white;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.