Jump to content

Five: How to underline body text links?

Recommended Posts

  • Replies 10
  • Views 18.1k
  • Created
  • Last Reply

Mathias, I like very much the image that headlines your website. That's a nice photo.

Are you familiar with adding CSS rules to the Custom CSS Editor? You get there by clicking the paintbrush icon, scrolling to the bottom of the Style Editor, and clicking the Custom CSS button.

I can offer two ideas for underlining the links. One idea is to add a simple underline to the font:

#canvas-wrapper a {text-decoration: underline;}

I did not so much like the look of the result, so I also offer this alternative approach:

#canvas-wrapper a {border-bottom: black solid 1px;}

Add one of these rules to your Custom CSS Editor. You should see results. Then you can decide which result you prefer. If you like, you can change 1px to 2px (or any other number) and get a thicker line.

The use of #canvas-wrapper in the rules above targets the html DIV element containing the main body content of your page. Links in the footer and the header will not be affected.

Jonathan Gennick, Author: Learn CSS for Squarespace

Link to comment
  • 2 weeks later...

I'm sorry. I don't know how I missed seeing that. Target the page body instead:

#page-body-wrapper {border-bottom: white solid 1px;}

It looks like you've instead solved the problem by changing the link color to white. That might be a better approach. I like it better than to have the underlines.

The rule I give here will cause some trouble if you ever place a Call to Action button in your page body. That's another reason to go with your current approach of making the links white.

Link to comment
  • 3 months later...
  • 4 months later...
  • 1 year later...

Hi there - I've applied the following custom CSS:

#page-body-wrapper a {border-bottom: #ED7002 dotted 1px;}

as I want the luiks within the body text to be underlined. However when I view my blog all the links within that are all underlined now too and I don't want this - I only want to target links within the page text - is there a way to do that?

Link to comment
  • 1 year later...
  • 3 years later...


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.