Jump to content

Change Font Color on One Section?

Recommended Posts

Guest PaulMichaelArmstrong
Posted

Hello!

I am trying to change the font color of everything on the turquoise section where my "services," "amenities" and "investment" are on my site.

Could someone tell me how I could go about that because everything I've tried isn't working?

Thanks!

  • Replies 8
  • Views 73.7k
  • Created
  • Last Reply
Posted

Paul, if you right-click in that section and select Inspect Element, you'll get a handy little inspector that opens at the bottom of your window. Look closely at the highest level

tags. The one enclosing the section of interest specifies id = 'pricing-section'. That's the ticket, right there.

Knowing that section name, you can use it to target different elements with in the section. For example, to change paragraph text color:


#pricing-section p {color: white;}

And to change the color of heading-3 elements, which I think you'll need to do:


#pricing-section h3 {color: white;}

The above are lines of CSS. You would add them into your Custom CSS Editor. Do you know how to do that?

Try the above rules. See how they work out.

Oh, you can also specify colors by number, as in:


#pricing-section p {color: #f0f0f0;}

Hope that helps.

Jonathan Gennick

Author: Learn CSS for Squarespace

Guest PaulMichaelArmstrong
Posted

That's super easy and totally worked!

Thank you so much!

  • 1 year later...
Posted

Hello John:

I am trying to change the color of just a few lines of text on an index page. I can't seam to access the inspect element function from the text block on page settings. Any suggestions?

Thanks,

Matt

Posted

Hello John:

I am trying to change the color of just a few lines of text on an index page. I can't seam to access the inspect element function from the text block on page settings. Any suggestions?

Thanks,

Matt

  • 1 year later...
Guest iamme123
Posted

You can also use this Chrome extension to get the unique block ID to target any individual Text Block on the site for CSS:

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Then structure the CSS like this:


#block-yui_3_17_2_33_14884356287498_9144 p {color: #000000}

"p" targets body text, and "h1", "h2", and "h3" target the different headings. Use that after the block ID (with a space) and before the curly bracket "{}".

  • 11 months later...
Posted

Another option, if you need to target text within a paragraph (

p

element) is to try Squint, a plugin I created for Squarespace that allows for custom styles, more headings, superscript, subscript, underline and more. You can select a single word (like this), a sentence, or whatever - like you'd expect with most WYSIWYG editors.

-Brandon


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

  • 3 weeks later...
  • 10 months later...

Archived

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

Guest
This topic is now 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.