Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
PaulMichaelArmstrong

Change Font Color on One Section?

Question

8 answers to this question

Recommended Posts

  • 5

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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 "{}".

Share this post


Link to post
  • 0

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


Edited by brandon
Initial Revision

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

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...