Jump to content

Five: How to underline body text links?

Go to solution Solved by jgennick,

Recommended Posts

I want to underline two names that are part of the body text that are linked to content that isn’t on the navigation.

Here’s the site: http://mathias-ivanissevich-edpd.squarespace.com/contact/

The idea is to have ‘Jorge di Bendetto’ and ‘Lucía Iturbe’ underlined so its clear that they are links.The Style Editor only allows me to change link colors and hover colors.

Edited by Mathi
Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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?

Edited by Milomade
Initial Revision
Link to comment
  • 1 year later...
  • 3 years later...

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.