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
  • Replies 2
  • Views 860
  • Created
  • Last Reply

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.